基于 Flutter 的 Web 渲染引擎「北?！拐介_源！

時間：2023-06-03 06:15:01 | 來源：網(wǎng)站運營

時間：2023-06-03 06:15:01 來源：網(wǎng)站運營

基于 Flutter 的 Web 渲染引擎「北?！拐介_源?。?blockquote data-first-child data-pid="G7U0nH3p">簡介：阿里巴巴歷時 3 年自研開發(fā)的 Web 渲染引擎北海（英文名：Kraken）正式開源，致力打造易擴展，跨平臺，高性能的渲染引擎，并已在優(yōu)酷、大麥、天貓等業(yè)務(wù)場景中使用。作者 | 染陌
來源 | 阿里技術(shù)公眾號

阿里巴巴歷時 3 年自研開發(fā)的 Web 渲染引擎北海（英文名：Kraken）正式開源，致力打造易擴展，跨平臺，高性能的渲染引擎，并已在優(yōu)酷、大麥、天貓等業(yè)務(wù)場景中使用。

一 背景

互聯(lián)網(wǎng)業(yè)務(wù)如火如荼地發(fā)展離不開跨平臺技術(shù)，而最成熟的跨平臺技術(shù)就是大家熟悉的瀏覽器了，它與生俱來的跨平臺能力、開放的標準以及強大的生態(tài)使它成為炙手可熱的容器之一。而由于其本身不是為了性能而設(shè)計的，并且歷史包袱重、兼容性、廠商更新慢等問題，瀏覽器在移動端的表現(xiàn)并不突出。盡管網(wǎng)絡(luò)以及硬件的發(fā)展帶來了足夠多的性能紅利，但是日益復(fù)雜的業(yè)務(wù)總能把已有的性能吃透。

過去也有很多對跨平臺方案的探索與實踐，新的技術(shù)方案也隨著歷史的浪潮不斷地發(fā)展。從最早的 H5 方案到 Hybrid 方案，以及后來的 Weex/React Native 方案，到現(xiàn)在如火如荼的 Flutter。

Flutter 由于其精簡的渲染管線，高效的布局渲染能力，以及自繪渲染的特性，一躍成為這兩年跨端屆的新寵。而在 Flutter 出現(xiàn)之前，主流的方案還是用 React Native（Weex）的，這套方案的底層調(diào)用了原生的 View。正是因為如此，導(dǎo)致這套方案很難保證完全的多端一致性，因為原生 View 本身就存在一些限制，有限的能力不能滿足開發(fā)者所有的需求，所以在實現(xiàn) W3C 標準時有些牽強。而 Flutter 基于更底層的 Skia 做自繪渲染，可以很好地保證多端一致性。

熟悉 Flutter 的同學(xué)肯定知道 Flutter 是用 Dart 語言以及 Widget 來開發(fā)的，雖說 Dart 語言對熟悉 JavaScript 的前端同學(xué)來說上手成本并不是很高，對于 Widget 這種基于狀態(tài)驅(qū)動的開發(fā)模式也已經(jīng)是非常熟悉，但是整體上與已有基建與前端生態(tài)割裂的矛盾是無法接受的。再者，動態(tài)化能力對于互聯(lián)網(wǎng)業(yè)務(wù)來說簡直就是剛需，而目前來看 Flutter for Web 并不理想。

畢竟，引入一項新技術(shù)的第一步是解決引入這項新技術(shù)的成本問題。所以我們積極探索一種向上對接前端生態(tài)，向下使用原生渲染的跨平臺方案。

于是誕生了這款基于 W3C 標準的高性能跨終端渲染引擎——北海（Kraken）。

二 基于 W3C 標準

Kraken 最終要服務(wù)的用戶還是前端開發(fā)者，那么如何降低前端開發(fā)者的學(xué)習(xí)熟悉成本以及如何將老項目快速地遷移到 Kraken 之上呢？我們并不想重新創(chuàng)造一套新的 DSL 作為研發(fā)框架來給開發(fā)者用，如果需要的話，那 Flutter 本身的 Widget + Dart 已經(jīng)做得很不錯了。前端開發(fā)者可能是用 Rax，也有可能是用 Vue 或是 React 的，我們都期望 Kraken 的用戶能夠做到“零成本”的快速接入。那么，就需要依賴一套開發(fā)者非常熟悉的標準來實現(xiàn) Kraken。

W3C 標準是互聯(lián)網(wǎng)最重要的標準之一，也是前端開發(fā)者非常熟悉的標準，基于 W3C 標準來實現(xiàn)渲染引擎，對于熟悉瀏覽器的前端開發(fā)者可以做到近乎“零成本”的快速上手。同時，我們可以擯棄一些沉重的歷史包袱，使得 Kraken 的渲染效率更高。

三 強大的前端開發(fā)者生態(tài)

受益于基于 W3C 標準來開發(fā)，在 Kraken 上前端開發(fā)者完全可以使用目前熟悉的龐大的前端生態(tài)。

首先，在研發(fā)框架的選擇上，無論開發(fā)者使用的是 Rax 或者 Vue ，還是 React 或者 Angular 的，都可以保證在 Kraken 上很好地完成渲染。

再次，前端擁有非常繁榮的生態(tài)，社區(qū)海量的 NPM 包都可以在 Kraken 項目上直接使用，大量成熟的模塊保證了業(yè)務(wù)開發(fā)的效率。

除此之外，開發(fā)者平時在開發(fā)項目使用的各式各樣的工具，都可以在 Kraken 項目上直接使用，無需任何額外的熟悉以及學(xué)習(xí)成本。

通過對接了 Chrome DevTools Protocol，使開發(fā)者可以直接使用非常熟悉的 Chrome DevTools 來調(diào)試所開發(fā)的頁面。無論開發(fā)者需要修改 CSS 樣式，還是查看 DOM 結(jié)構(gòu)，或者是通過斷點調(diào)試 JavaScript 代碼，都能保證跟 Web 開發(fā)一致的調(diào)試體驗。

四 渲染一致性

Kraken 的渲染能力是對其 W3C 標準的，所以可以保證跟 Web 渲染的結(jié)果完全一致。

下圖是實際業(yè)務(wù)的截圖，從左到右分別是 Kraken（iOS），Kraken（Android）以及 Web 版本，可以看出渲染結(jié)果是完全一致的。

五 比 Web 更好的體驗與能力

那么到這里會有同學(xué)想問了，除了與目前前端開發(fā)一致的開發(fā)及調(diào)試體驗，以及渲染一致性，那么最終到底能得到怎么樣的能力，以及跟瀏覽器比，到底可以獲得哪些收益呢？

1 無限滾動列表

在業(yè)務(wù)開發(fā)中，有時開發(fā)者會遇到一些無法用分頁卻又大量數(shù)據(jù)的「無限滾動列表」。在客戶端開發(fā)中有 RecyclerView/UITableView 來實現(xiàn)滾動回收的布局容器，而 Web 標準上盡管也有很多前端側(cè)的優(yōu)化方案來處理這個問題，但也一直是個難題。Kraken 嘗試在容器側(cè)解決了此問題，增加 CSS Display 屬性值——sliver。

當(dāng) Sliver 容器中的子元素滾動出該容器的 Viewport 時，可以將該子元素中用于渲染的 renderobject 回收以達到節(jié)省內(nèi)存占用的目的。當(dāng)子元素重新出現(xiàn)時，根據(jù) DOM 描述重新生成 renderobject。

這是一個上萬個節(jié)點的 demo，左邊是 overflow: scroll 的容器，而右邊是 display: sliver 的容器，可以看到 sliver 容器在「無限滾動列表」場景下滾動明顯流暢很多。左上角有 FPS 的數(shù)據(jù)，可以看到 display: sliver 的容器 FPS 一直維持正常水平，而 overflow: scroll 的容器 FPS 明顯下降。此外，在內(nèi)存方面也有較大收益。

2 同步光柵化

在瀏覽器中，光柵化是異步進行的，進行慣性滾動時，會出現(xiàn)白屏，這個是 WebView 始終無法避免的問題。而借助 Flutter 足夠高效的同步光柵化實現(xiàn)，Kraken 可以做到長列表快速滾動不白屏。

3 增強的手勢能力

Kraken 通過對常用手勢進行內(nèi)置，使業(yè)務(wù)開發(fā)者使用手勢能力的時候，再也不需要引入一個 JavaScript lib 以劫持 Touch event 來做開發(fā)了。

以輕掃手勢“swipe”為例，開發(fā)者只需要通過以下方式就可以獲得一個 element 上默認提供的手勢能力。直接使用內(nèi)置增強的手勢能力，能夠更快速地開發(fā)復(fù)雜的可交互應(yīng)用。

element.addEventLisenter('swipe',(gestureEvent) => { ///...})增強的手勢能力解決了 Web 下原本需要頻繁傳遞事件的性能問題以及 JavaScript 處理手勢占用 UI 線程的問題。此外，通過容器內(nèi)部實現(xiàn)的競爭場能力，可以解決 Web 下手勢穿透等問題。

而內(nèi)置的標準化手勢能力，也保證同個容器的不同應(yīng)用下，手勢交互能力的標準化以及統(tǒng)一性。

4 插件化能力

除了上面的那些超越 Web 的體驗與能力以外，Kraken 非常重要的一個特性就是插件化能力，插件化能力提供給前端工程師重新定義瀏覽器能力的機會，開發(fā)者只需要編碼一個 Flutter plugin，就可以擴展 Kraken 本身的能力。

通過插件化能力，開發(fā)者可以在內(nèi)部實現(xiàn)許多自定義的標簽（譬如說 Camera 或者自定義的視頻播放器等），也可以基于性能的考慮將常用的業(yè)務(wù)組件（譬如說 Slider）下沉到容器層。由于瀏覽器廠商開發(fā)以及標準制定往往是滯后的，用插件化能力開發(fā)者可以快速地自定義各種渲染能力，使業(yè)務(wù)開發(fā)可以用到最新的或者增強的各種能力。

除了擴展渲染能力，開發(fā)者還可以擴展手勢能力，擴展手勢能力可以將以往需要在前端劫持 Touch Event 實現(xiàn)的能力下沉到容器本身，除了增強了交互體驗，也給交互提供了更多可能性。

六 穩(wěn)定性保障

渲染引擎非常復(fù)雜，經(jīng)常出現(xiàn)改一個 Bug 牽一發(fā)而動全身，所以需要高覆蓋率的自動化測試來保障渲染引擎的穩(wěn)定性，每次修改后都需要保障已有的 case 沒有問題。通過自動化測試來保障每個 case 與修改之前的結(jié)果做對比，如果有差異，可以通過 case 以及差異的 diff 來修改 Bug。

這套自動化測試系統(tǒng)保證了 Kraken 每次修改前后得到的 case 結(jié)果的一致性，以確保渲染引擎本身的穩(wěn)定性。

目前已經(jīng)有近 3000 個測試用例，未來還會根據(jù)更多的場景繼續(xù)增加，以此來保證 Kraken 的穩(wěn)定性。

七 業(yè)務(wù)落地

講了那么多 Kraken 的能力，肯定有同學(xué)想知道 Kraken 在實際生產(chǎn)場景的表現(xiàn)如何。

目前 Kraken 在 C 端場景移動設(shè)備以及低性能 IoT 設(shè)備均有相關(guān)業(yè)務(wù)接入，完全可以使用在實際生產(chǎn)場景。

在優(yōu)酷 APP 中，Kraken 已經(jīng)落地了大量業(yè)務(wù)。以下方所示身份詳情頁為例，Kraken 改造后啟動有了一個質(zhì)的提升，相較于同個頁面的 原方案，首屏渲染提升28.4%，幀率提升 8.3%。

在 IoT 設(shè)備上，我們的天貓 U 先業(yè)務(wù)在線下低性能的 IoT 設(shè)備上，Kraken 也有非常不錯的表現(xiàn)。在線下相對較復(fù)雜的 Slider 等場景下，動畫以及交互性能都表現(xiàn)較好，長時間運行應(yīng)用，內(nèi)存穩(wěn)定并無明顯增長，保證線下 IoT 應(yīng)用的穩(wěn)定性。

八 社區(qū)協(xié)作機制

kraken 團隊期望通過一種良好的社區(qū)協(xié)作機制，來與社區(qū)的眾多開發(fā)者一起共建 Kraken 底層能力及生態(tài)。

kraken 團隊期望通過協(xié)作者的方式來參與 Kraken 功能迭代以及 issue 討論等工作。同時，通過由一部分協(xié)作者組成的技術(shù)委員會（TSC）來確定技術(shù)方向、發(fā)布以及定制標準等工作。

kraken 團隊期望通過一種公平良好的協(xié)作機制，讓社區(qū)的開發(fā)者能夠更好地參與到對 Web 標準的容器技術(shù)的演進中去，讓每個人的聲音都能被聽到，共同促進 Kraken 以及行業(yè)的發(fā)展。

查看更詳細的協(xié)作機制可以移步github。

九 未來展望

以往我們在做前端性能優(yōu)化的時候，往往優(yōu)化到瀏覽器層面就優(yōu)化不動了，很難向下進行進一步的優(yōu)化。而 Kraken 的出現(xiàn)，給予了前端工程師新的機會與挑戰(zhàn)，它提供了前端工程師一個重新定義瀏覽器的能力的機會，擁有非常大的想象空間：

• 超越 Web 的能力，比肩 Native 的性能與體驗。
• 比瀏覽器廠商更快地實現(xiàn)標準，站在標準的前沿定義問題，通過實現(xiàn)的能力去反推標準，促進行業(yè)的發(fā)展。
• 可以自頂向下看整個渲染鏈路的優(yōu)化及體驗，通過全鏈路的手段去優(yōu)化性能以及定義一些新的渲染能力。
• 目前日益復(fù)雜的前端應(yīng)用導(dǎo)致 JS bundle 的已經(jīng)顯得越來越臃腫，開發(fā)者也可以把常用能力抽象復(fù)用并下沉到容器層面，渲染與公用能力的復(fù)用不再只依賴于 NPM，可以通過下沉通用能力來做更多事情。
• 通過“云+端”的結(jié)合，也有機會去探索面向未來的新一代渲染技術(shù)。
• 基于 Kraken，探索更多的可能性......

最后，期望 Kraken 能給大家?guī)砀玫捏w驗及能力，也希望大家可以積極參與到 Kraken 項目中去，大家一起共建 Kraken 生態(tài)。

---

阿里云開發(fā)者社區(qū)

世界讀書日，來讀書吧

4月23日是第26個世界讀書日，阿里云開發(fā)者社區(qū)推出“記錄閱讀之路，影響同行之人”活動，6位阿里技術(shù)人為同學(xué)們分享他們看過的好書，開發(fā)者藏經(jīng)閣也推出了最受大家歡迎的電子書。

點擊https://developer.aliyun.com/topic/worldreadingday?utm_content=g_1000264434，推薦曾經(jīng)影響你的書，來一起讀書吧~

版權(quán)聲明：本文內(nèi)容由阿里云實名注冊用戶自發(fā)貢獻，版權(quán)歸原作者所有，阿里云開發(fā)者社區(qū)不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。具體規(guī)則請查看《阿里云開發(fā)者社區(qū)用戶服務(wù)協(xié)議》和《阿里云開發(fā)者社區(qū)知識產(chǎn)權(quán)保護指引》。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，填寫侵權(quán)投訴表單進行舉報，一經(jīng)查實，本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。