近日，由51CTO主辦的WOT全球技術創新大會2023·深圳站成功舉辦，眾多企業CTO、技術團隊負責人在會場分享了優秀的技術實踐。其中，剪映前端開發工程師趙培霏分享了主題為《剪映業務的大前端實踐》的演講。

趙培霏主要負責剪映前端的商業化模塊，在跨端、中后臺領域有較多的探索和實踐。在此次分享中，趙培霏從業務場景及架構、用戶體驗提升、端融合實踐和智能化探索四方面出發，為大家帶來技術實踐分享。

自研Lynx架構，突破多端、多場景、高性能技術難點

趙培霏表示，目前，剪映APP的前端應用是非常廣泛的，前端業務的復雜性與重要性也使得其所在的團隊面臨著重重挑戰，其中有三個主要技術難點，即多端、多場景、高性能。多端是指剪映前端業務不僅要跨web端，還需要跨PC端，也就是說需要同時支持Mac版本和Windows版本；多場景是指前端涉及到的業務模塊非常多，對應的彈框頁面也非常多，并且剪映業務涉及全球多個國家和地區，也進一步增加了業務場景；高性能則要求，在用戶量巨大的情況下，保證整體的用戶體驗。

針對以上情況，趙培霏團隊使用了React Lynx架構，該方案把端渲染和自渲染結合：在iOS和安卓側，利用端渲染，也就是使用平臺原生的組件去做渲染，從而降低成本；在Mac OS和Windows側，利用剪映自建的自渲染框架，從而實現多端適配。此外，React Lynx架構也可以幫助前端業務達成高性能目標。在編譯側，React Lynx會把業務代碼分成三部分，分別是ttml.js、lepus.js和app-service.js。在運行側，有兩個線程，一個是UI線程，另一個是JS線程。UI線程直接運行在Native側，就是原生側，它整體的渲染速度非常快；在JS線程執行加載公共的core.js，以及業務上的JS代碼，然后再去做對應的渲染。通過這個雙線程的方案，縮短白屏時間，實現首屏直出。

多方案優化，提升用戶應用體驗

談及用戶體驗感，趙培霏首先為大家介紹了兩個概念，一個是活躍意愿，一個是消費意愿。活躍意愿是指用戶愿意去打開APP，用戶行為會提高APP的日活、月活等數據；消費意愿是指用戶打開了APP，是否愿意在APP里面持續使用、持續消費。

趙培霏認為，提升用戶體驗可以從優化頁面常規渲染流程開始，頁面常規渲染流程包括靜態資源加載、動態資源加載和內容渲染三部分。

首先，優化靜態資源加載可以從三方面入手，第一，通過把相關資源內置到APP里，從而減少靜態資源加載內容；第二，在合適的時機將用戶可能會需要的靜態資源提前下載下來，從而保證用戶使用的流暢度；第三，業務迭代時，只更新修改過的代碼，降低靜態資源下載需求量。

其次，相較于靜態資源，動態資源就必須得加載，因此優化方案就會針對早加載和少加載兩個方向發力。趙培霏團隊采取預拉取的方式，即在合適的時候提前拉取接口、圖片、視頻等動態資源，提早加載動態資源；通過視頻、圖片格式優化方式，減少內容大小。

最后，內容渲染環節優化與動態資源加載優化邏輯類似，在合適的場景，在后臺創建對應的Lynx容器，對頁面進行隱式渲染；再通過list、ViewPager組件自帶的懶加載能力，優先渲染適合的元素節點。

此外，趙培霏還強調，因為剪映APP的特殊性，僅僅是優化頁面渲染的流程還不能給用戶帶來優質的應用體驗。因此，還需要針對不同的手機型號，做出不同的調整，從而保障用戶的應用體驗。

結合Lynx和Native優勢，開展端融合實踐

趙培霏分享的第三個部分為端融合實踐。他首先介紹了Lynx組件與Native組件各自的優勢，Lynx組件的整體迭代效率非常高，且開發成本低；而Native組件底層控制能力更有優勢，能夠帶來更好的用戶體驗感。將兩種組件融合起來，利用Native優質的底層控制能力，并在Lynx頁面里面使用Native的組件，然后在對應Native的頁面里面使用相應的Lynx組件，來滿足應用的快速迭代需求也能提高用戶應用滿意度。

例如，在“剪同款”頁面里，可能會因為大量的動圖占用用戶內存而發生OOM情況，這種情況下，趙培霏團隊就會選擇利用Native組件對動圖內存優化的功能來提高應用流暢度。另外，視頻編輯的整體界面是由Native來實現的，當涉及到部分區塊進行產品迭代時，就可以由前端通過Lynx的方式去實現。

內容智能化探索，提高用戶消費意愿

在這部分，趙培霏先為大家介紹了剪映APP上的幾個商業化場景，包括：開屏訂閱引導、固定入口引導、權益攔截彈框和訂閱頁權益展示。這些商業化場景往往都具有視頻場景多、用戶人群多、權益種類多的特點。在這種情況下，趙培霏團隊通過智能分發方案來提高用戶的消費意愿。也就是說，通過給對應的用戶群來展示這些用戶可能更感興趣或者對用戶更有吸引力的特定權益或者文案，來提高用戶整體的付費意愿。

趙培霏表示，內容智能化方案主要包括兩方面內容，一方面是用戶模型，另一方面是權益分發。利用用戶模型對用戶特征進行深入挖掘，進一步分析用戶的喜好，針對特定人群做定向分發策略。權益分發包括混排、精排等工作，比如，通過將付費與免費的素材進行混合排列，提高用戶的付費幾率。再比如，預估權益banner的點擊率和轉化率，將點擊率和轉化率高的banner提前，通過這種精排來提高用戶付費率。

整體的內容智能化落地則會通過整體的內容管理后臺，針對各種資源進行相關配置，不同的資源位會匹配不同的文案與權益，再通過后臺代碼設定，算法會自動判斷并進行分發。其中，趙培霏團隊還會在分發服務中做AI判斷，利用AI判斷的人群圈選、用戶畫像和算法模型相關能力，保證不同的人群能夠看到不同的對他更有吸引力的相關權益和文案。最后，通過對相關數據的進一步挖掘，明晰用戶畫像，促進智能分發的精確性不斷提高，從而提高用戶的付費意愿。

結語

隨著技術的不斷進步和應用的不斷深化，大前端扮演著越來越重要的角色。趙培霏的分享也表明，大前端的技術棧將會更豐富、更智能，業務的開發也更注重用戶體驗感的提升。廣大前端工程師也需要不斷學習和創新，以適應變化并推動技術的發展。