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

官網(wǎng)：https://openkraken.com

Github：https://github.com/openkraken/kraken

背景

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

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

熟悉 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 并不理想。

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

于是誕生了這款基于 W3C 標(biāo)準(zhǔn)的高性能跨終端渲染引擎——北海（Kraken）。

基于 W3C 標(biāo)準(zhǔn)

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

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

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

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

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

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

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

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

渲染一致性

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

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

比 Web 更好的體驗(yàn)與能力

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

無限滾動列表

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

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

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

同步光柵化

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

增強(qiáng)的手勢能力

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

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

element.addEventLisenter('swipe',(gestureEvent) => {
 ///...
})

增強(qiáng)的手勢能力解決了 Web 下原本需要頻繁傳遞事件的性能問題以及 JavaScript 處理手勢占用 UI 線程的問題。此外，通過容器內(nèi)部實(shí)現(xiàn)的競爭場能力，可以解決 Web 下手勢穿透等問題。

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

插件化能力

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

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

除了擴(kuò)展渲染能力，開發(fā)者還可以擴(kuò)展手勢能力，擴(kuò)展手勢能力可以將以往需要在前端劫持 Touch Event 實(shí)現(xiàn)的能力下沉到容器本身，除了增強(qiáng)了交互體驗(yà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 在實(shí)際生產(chǎn)場景的表現(xiàn)如何。

目前 Kraken 在 C 端場景移動設(shè)備以及低性能 IoT 設(shè)備均有相關(guān)業(yè)務(wù)接入，完全可以使用在實(shí)際生產(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)較好，長時(shí)間運(yùn)行應(yīng)用，內(nèi)存穩(wěn)定并無明顯增長，保證線下 IoT 應(yīng)用的穩(wěn)定性。

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

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

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

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

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

未來展望

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

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

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

官網(wǎng)：https://openkraken.com

Github：https://github.com/openkraken/kraken

點(diǎn)擊下方【閱讀全文】訪問 Kraken Github，給 Kraken star 支持一下吧～