# 簡(jiǎn)介

小程序一直以來采用的都是 AppService 和 WebView 的雙線程模型，基于 WebView 和原生控件混合渲染的方式，小程序優(yōu)化擴(kuò)展了 Web 的基礎(chǔ)能力，保證了在移動(dòng)端上有良好的性能和用戶體驗(yàn)。Web 技術(shù)至今已有 30 多年歷史，作為一款強(qiáng)大的渲染引擎，它有著良好的兼容性和豐富的特性。 盡管各大廠商在不斷優(yōu)化 Web 性能，但由于其繁重的歷史包袱和復(fù)雜的渲染流程，使得 Web 在移動(dòng)端的表現(xiàn)與原生應(yīng)用仍有一定差距。

為了進(jìn)一步優(yōu)化小程序性能，提供更為接近原生的用戶體驗(yàn)，我們?cè)?WebView 渲染之外新增了一個(gè)渲染引擎 Skyline，其使用更精簡(jiǎn)高效的渲染管線，并帶來諸多增強(qiáng)特性，讓 Skyline 擁有更接近原生渲染的性能體驗(yàn)。

# 架構(gòu)

當(dāng)小程序基于 WebView 環(huán)境下時(shí)，WebView 的 JS 邏輯、DOM 樹創(chuàng)建、CSS 解析、樣式計(jì)算、Layout、Paint (Composite) 都發(fā)生在同一線程，在 WebView 上執(zhí)行過多的 JS 邏輯可能阻塞渲染，導(dǎo)致界面卡頓。以此為前提，小程序同時(shí)考慮了性能與安全，采用了目前稱為「雙線程模型」的架構(gòu)。

在 Skyline 環(huán)境下，我們嘗試改變這一情況：Skyline 創(chuàng)建了一條渲染線程來負(fù)責(zé) Layout, Composite 和 Paint 等渲染任務(wù)，并在 AppService 中劃出一個(gè)獨(dú)立的上下文，來運(yùn)行之前 WebView 承擔(dān)的 JS 邏輯、DOM 樹創(chuàng)建等邏輯。這種新的架構(gòu)相比原有的 WebView 架構(gòu)，有以下特點(diǎn)：

• 界面更不容易被邏輯阻塞，進(jìn)一步減少卡頓
• 無需為每個(gè)頁面新建一個(gè) JS 引擎實(shí)例（WebView），減少了內(nèi)存、時(shí)間開銷
• 框架可以在頁面之間共享更多的資源，進(jìn)一步減少運(yùn)行時(shí)內(nèi)存、時(shí)間開銷
• 框架的代碼之間無需再通過 JSBridge 進(jìn)行數(shù)據(jù)交換，減少了大量通信時(shí)間開銷

而與此同時(shí)，這個(gè)新的架構(gòu)能很好地保持和原有架構(gòu)的兼容性，基于 WebView 環(huán)境的小程序代碼基本上無需任何改動(dòng)即可直接在新的架構(gòu)下運(yùn)行。WXS 由于被移到 AppService 中，雖然邏輯本身無需改動(dòng)，但詢問頁面信息等接口會(huì)變?yōu)楫惒?，效率也可能有所下降；為此，我們同時(shí)推出了新的 Worklet 機(jī)制，它比原有的 WXS 更靠近渲染流程，用以高性能地構(gòu)建各種復(fù)雜的動(dòng)畫效果。

新的渲染流程如下圖所示：

# 需要幫助

如果在使用過程中遇到任何問題，可以前往「Skyline 渲染引擎」專區(qū)查看說明。