為了進(jìn)一步提升小程序的渲染性能和體驗(yàn)，我們推出了一套新渲染引擎 Skyline，現(xiàn)在，跟隨著基礎(chǔ)庫 3.0.0 發(fā)布 Skyline 正式版。

我們知道，小程序一直用 WebView 來渲染界面，因其有不錯的兼容性和豐富的特性，且各大廠商也在不斷優(yōu)化 Web 的渲染性能，但 Web 體系相比于原生開發(fā)，在性能上仍然有較大差距，并且特性上發(fā)展緩慢，使得小程序很難做出類原生的體驗(yàn)。因此，我們開發(fā)了一套新渲染引擎 Skyline，旨在替代 WebView 作為小程序的渲染層，以提供更優(yōu)秀的渲染性能和諸多增強(qiáng)特性，讓小程序能達(dá)到原生的體驗(yàn)。

以下為你全方位介紹 Skyline 的特點(diǎn)。

提供更好的性能

在渲染流程上，WebView 因其需要向后兼容，積累了較多歷史包袱，加之整體設(shè)計(jì)目標(biāo)不同，使其渲染流水線更加冗長復(fù)雜，而 Skyline 則更為精簡，同時只保留更現(xiàn)代的 CSS 特性。在此基礎(chǔ)上，我們還進(jìn)一步實(shí)現(xiàn)了很多優(yōu)化點(diǎn)：

• 單線程版本組件框架。Skyline 下默認(rèn)啟用了新版本的組件框架 glass-easel，該版本適應(yīng)了 Skyline 的單線程模型，使得建樹流程的耗時有效降低（優(yōu)化 30%-40%），同時 setData 調(diào)用也不再有通信開銷。
• 組件下沉。我們將部分內(nèi)置組件（如 scroll-view、swiper、picker-view 等）直接在底層實(shí)現(xiàn)，以追求更流暢的交互體驗(yàn)。此外，我們也將常用的內(nèi)置組件（view、text、image）從 JS 下沉到原生實(shí)現(xiàn)，相當(dāng)于原生 DOM 節(jié)點(diǎn)，有效降低了創(chuàng)建組件的開銷（優(yōu)化 30%）。
• 長列表按需渲染。長列表是一個常用的但又經(jīng)常遇到性能瓶頸的場景，Skyline 對其做了一些優(yōu)化，使 scroll-view 組件只渲染在屏節(jié)點(diǎn)（用法上有一定的約束），并且增加 lazy mount 機(jī)制優(yōu)化首次渲染長列表的性能，后續(xù)我們也計(jì)劃在組件框架層面進(jìn)一步支持 scroll-view 的可回收機(jī)制，以更大程度降低創(chuàng)建節(jié)點(diǎn)的開銷。
• WXSS 預(yù)編譯。同 WebView 傳輸 WXSS 文本不同，Skyline 在后臺構(gòu)建小程序代碼包時會將 WXSS 預(yù)編譯為二進(jìn)制文件，在運(yùn)行時直接讀取二進(jìn)制文件獲得樣式表結(jié)構(gòu)，避免了運(yùn)行時解析的開銷（預(yù)編譯較運(yùn)行時解析快 5 倍以上）。
• 樣式計(jì)算更快。Skyline 通過精簡 WXSS 特性大幅簡化了樣式計(jì)算的流程。同時 Skyline 與小程序框架結(jié)合也更為緊密，例如： Skyline 結(jié)合組件系統(tǒng)實(shí)現(xiàn)了 WXSS 樣式隔離、基于 wx:for 實(shí)現(xiàn)了節(jié)點(diǎn)樣式共享（相比于 WebView 推測式樣式共享更為精確、高效）。
• 降低內(nèi)存占用。在 WebView 渲染模式下，一個小程序頁面對應(yīng)一個 WebView 實(shí)例，并且每個頁面會重復(fù)注入一些公共資源。而 Skyline 只有 AppService 線程，且多個 Skyline 頁面會運(yùn)行在同一個渲染引擎實(shí)例下，因此頁面占用內(nèi)存能夠降低很多，還能做到更細(xì)粒度的頁面間資源共享（如全局樣式、公共代碼、緩存資源等）。

總體上，由于 Skyline 在渲染流程上更加可控，我們能讓小程序的特性盡可能融合進(jìn)渲染流程中完成，還有很多在細(xì)節(jié)上的優(yōu)化（比如對 rpx 的處理、image mode=widthFix 的處理等，都是融入渲染流程中，而避免在 JS 做太多額外的計(jì)算）就不再一一介紹。另外，我們也在持續(xù)優(yōu)化中，Skyline 會是之后小程序性能優(yōu)化的重點(diǎn)。

至于目前整體的性能情況，我們從已上線的小程序數(shù)據(jù)觀測到（基礎(chǔ)庫 3.0.0 glass-easel 帶來的優(yōu)化暫未體現(xiàn)），啟動耗時方面，即點(diǎn)擊到完全渲染（LCP）的耗時，WebView 對比 Skyline 為 2492ms vs 2052ms，減少 17.6%；渲染階段耗時方面，即框架建樹到完全渲染（LCP）的耗時，WebView 對比 Skyline 為 626ms vs 312ms，減少 50%。

根除舊有架構(gòu)的問題

在基于 Web 體系的架構(gòu)下，小程序的部分基礎(chǔ)體驗(yàn)會受限于 WebView 提供的能力（特別是 iOS WKWebView 限制更大一些），使得一些技術(shù)方案無法做得很完美，留下一些潛在的問題。

• 原生組件同層渲染更穩(wěn)定。iOS 下原生組件同層渲染的原理先前有介紹過，本質(zhì)上是在 WKWebView 黑盒下一種取巧的實(shí)現(xiàn)方式，并不能完美融合到 WKWebView 的渲染流程，因此很容易在一些特殊的樣式發(fā)生變化后，同層渲染會失效，而在 Skyline 下可以很好地融合到渲染流程中，因此會更穩(wěn)定。
• 無需頁面恢復(fù)機(jī)制。iOS 下 WKWebView 會受系統(tǒng)的管理，當(dāng)內(nèi)存緊張時，系統(tǒng)就會將不在屏的 WKWebView 回收，會使得小程序除前臺以外的頁面丟失，雖然在頁面返回時，我們對頁面做了恢復(fù)，但頁面的狀態(tài)并不能 100% 還原，而在 Skyline 下則不再有該問題。
• 無頁面棧層數(shù)限制。由于 WebView 的內(nèi)存占用較大，頁面層級最多有 10 層，而 Skyline 在內(nèi)存方面更有優(yōu)勢，因此在連續(xù) Skyline 頁面跳轉(zhuǎn)（復(fù)用同一引擎實(shí)例）的情況下，不再有該限制。

全新的交互動畫體系

我們發(fā)現(xiàn)，要達(dá)到類原生的體驗(yàn)，渲染性能與交互動畫缺一不可，渲染性能能讓頁面更快渲染出來，而交互動畫能讓瀏覽頁面的體驗(yàn)更佳。但在 Web 體系下，難以做到像素級可控，交互動畫銜接不順暢，究其原因，在于缺失了一些重要的能力，為此，我們提供一套全新的交互動畫能力。

• Worklet 動畫機(jī)制。在原來雙線程的架構(gòu)下，若要對界面元素做逐幀動畫是需要頻繁在邏輯層和渲染層之間通信的，這會帶來較大的延遲，動畫也就不會流暢。而 Worklet 動畫正是為了解決這類問題而誕生的，其運(yùn)行機(jī)制與 WXS 類似，但比 WXS 更靠近渲染流程而性能更好，而且支持的特性更多，可擴(kuò)展性更強(qiáng)，這個是 Skyline 交互動畫體系的基礎(chǔ)。
• 手勢系統(tǒng)。在原生的交互動畫里，手勢識別與協(xié)商是一個很重要的特性，而這塊在 Web 體系是缺失的，因此 Skyline 下補(bǔ)全手勢系統(tǒng)相關(guān)特性，包括常用手勢的識別，如縮放、拖動、雙擊等，還有很重要的手勢協(xié)商機(jī)制，在遇到手勢沖突（常見于滾動容器下）時決定讓哪個手勢生效，以實(shí)現(xiàn)更順暢的動畫銜接。
• 自定義路由與共享元素。頁面間的自定義轉(zhuǎn)場動畫，在原生應(yīng)用里也是一個很常見的交互動畫。在原來的小程序架構(gòu)下，每個頁面都是獨(dú)立的 WebView 渲染，互相隔離，其跨頁能力是基本不具備的。因此，Skyline 提供了一套自定義路由機(jī)制，能實(shí)現(xiàn)市面上大多數(shù)頁面轉(zhuǎn)場動畫，同時也提供了共享元素機(jī)制，能很方便地做到同一元素在頁面間飛躍的效果。

此外，對內(nèi)置組件的擴(kuò)展也是重要一環(huán)，特別是 scroll-view 組件，我們優(yōu)化了下拉刷新的體驗(yàn)，并且實(shí)現(xiàn)“下拉二樓”的交互，也添加很多控制能力，這都是些在 Web 下很難做到又非常重要的特性?？傊?，這套全新的交互動畫體系是 Skyline 能實(shí)現(xiàn)類原生交互體驗(yàn)的關(guān)鍵。

釋放更多高級能力

除了上面提到的交互動畫能力外，Skyline 所能釋放的能力還遠(yuǎn)不止于此，借助 Skyline 的特點(diǎn)，我們還提供以下新的組件

• grid-view 瀑布流組件。瀑布流是一種常用的列表布局方式，得益于 Skyline 在布局過程中的可控性，我們直接在底層實(shí)現(xiàn)并提供出來，渲染性能要比 WebView 更優(yōu)。
• snapshot 截圖組件。大多數(shù)小程序都會基于 canvas 實(shí)現(xiàn)自定義分享圖的功能，但分享圖的布局較復(fù)雜時，canvas 的方案實(shí)現(xiàn)成本會更大，而 Skyline 是具備對 WXML 子樹截圖的能力的，因此我們直接封裝后開放出來，這樣能復(fù)用更完善的 WXSS 能力，極大降低開發(fā)成本。

除了新增的組件，還有不少是原有內(nèi)置組件擴(kuò)展的小特性，這里就不一一介紹，可 查看文檔 或 更新日志。未來，我們還會持續(xù)在 Skyline 上開放更多高級功能，如全局跨頁面組件，scroll-view 列表節(jié)點(diǎn) builder 模塊支持節(jié)點(diǎn)可回收等，更多可查看 文檔特性狀態(tài) 一欄，同時，也歡迎開發(fā)者在社區(qū)給我們提議。

至此，Skyline 的主要特點(diǎn)已基本介紹完畢，更完整的介紹、用法、遷移指引、注意點(diǎn)等等請查閱 文檔。建議開發(fā)者現(xiàn)在就使用起來，盡早享受到 Skyline 帶來的優(yōu)化和豐富的特性，如果開發(fā)中遇到問題，可在開發(fā)者社區(qū)發(fā)貼反饋，我們也會邀請加入溝通交流群。