百度智能小程序 智能小程序性能優(yōu)化概述

智能小程序在開發(fā)模式上基于 Web 前端開發(fā)的技能和生態(tài)，在運行時則采用了類客戶端的方案，旨在使用體驗上超越傳統(tǒng)的 Web 前端技術(shù)，在開發(fā)效率上超過傳統(tǒng)的客戶端技術(shù)。因此，在小程序的性能優(yōu)化工作方面，可以借鑒 Web 前端開發(fā)的已有經(jīng)驗，但同時也存在一些區(qū)別。

智能小程序架構(gòu)

小程序使用了雙線程模型，包括邏輯層和渲染層。邏輯層作為一個單獨的線程執(zhí)行 js 代碼，控制小程序數(shù)據(jù)的生成和處理；渲染層使用了 WebView 線程，處理頁面的渲染和用戶的事件交互行為。采用雙線程模型主要考慮到兩點：

1. 小程序需要一個物理上的沙箱（Sandboxie 虛擬系統(tǒng)程序）環(huán)境隔離：為了避免小程序使用某些動態(tài)能力（如 iframe ），繞過其審核機制，造成不可控的影響；
2. 雙線程模型提供了一個性能更好的邏輯線程，渲染層只處理渲染和事件行為，邏輯層只處理數(shù)據(jù)。

具體設(shè)計可以參考以下結(jié)構(gòu)：

性能優(yōu)化

基于以上架構(gòu)設(shè)計，智能小程序的性能優(yōu)化可以從以下幾個方面入手：

1. 小程序向數(shù)據(jù)服務(wù)器請求數(shù)據(jù)；
2. 數(shù)據(jù)返回后在邏輯層進(jìn)行處理，發(fā)送給渲染層（發(fā)送的行為即 setData ）；
3. 渲染層獲取到 data 后進(jìn)行渲染展示可交互頁面；
4. 用戶進(jìn)行交互操作觸發(fā)事件（ event ）渲染層將事件發(fā)送給邏輯層；
5. 邏輯層觸發(fā)小程序?qū)?yīng)的邏輯行為，如果事件修改了數(shù)據(jù)就會觸發(fā)以上的第二步。

數(shù)據(jù)瓶頸優(yōu)化

在雙線程模型下，小程序容易在以下兩個場景產(chǎn)生數(shù)據(jù)瓶頸：

1. 數(shù)據(jù)的獲?。河捎跀?shù)據(jù)的獲取依賴數(shù)據(jù)服務(wù)器的反饋，所以我們希望數(shù)據(jù)的獲取盡可能早，同時數(shù)據(jù)返回盡可能快；
2. 頁面的渲染：由于小程序的渲染層使用的是 WebView ，所以大部分傳統(tǒng) Web 渲染的優(yōu)化手段對小程序優(yōu)化同樣有效；針對小程序的架構(gòu)特性，智能小程序框架也提供了多種組件能力和優(yōu)化建議，從而優(yōu)化渲染性能。

因為小程序提供了雙線程模式以及底層是由 Native 支撐的，所以小程序可以利用 Native 的能力提供更多性能優(yōu)化手段。

我們將在性能優(yōu)化的原理和手段具體介紹性能優(yōu)化方案。