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

我們知道，小程序一直用 WebView 來(lái)渲染界面，因其有不錯(cuò)的兼容性和豐富的特性，且各大廠商也在不斷優(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)不同，使其渲染流水線更加冗長(zhǎng)復(fù)雜，而 Skyline 則更為精簡(jiǎn)，同時(shí)只保留更現(xiàn)代的 CSS 特性。在此基礎(chǔ)上，我們還進(jìn)一步實(shí)現(xiàn)了很多優(yōu)化點(diǎn)：

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

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

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

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

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

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

全新的交互動(dòng)畫體系

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

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

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

釋放更多高級(jí)能力

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

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

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

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

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-620133.html

到了這里，關(guān)于小程序新渲染引擎 Skyline 發(fā)布正式版的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！