當(dāng)用戶打開一個(gè)智能家居小程序時(shí)，第一印象往往決定了后續(xù)的互動(dòng)體驗(yàn)。“打開有點(diǎn)慢”和“應(yīng)用秒開”之間，不僅隔著技術(shù)鴻溝，更關(guān)系著用戶是否愿意繼續(xù)使用。作為涂鴉智能App體系中承擔(dān)了面板、智能小程序、卡片等等核心業(yè)務(wù)的主要?jiǎng)討B(tài)跨端框架，涂鴉小程序在保證它的基礎(chǔ)體驗(yàn)性能上顯得尤為重要。
隨著智能設(shè)備越連越多、業(yè)務(wù)能力不斷擴(kuò)張，“快”已經(jīng)不是加分項(xiàng)，而是硬指標(biāo)。

涂鴉小程序技術(shù)團(tuán)隊(duì)深知這一點(diǎn)，因此對(duì)小程序性能進(jìn)行了重大升級(jí)，讓用戶打開更快、操作更順、體驗(yàn)更出色。

為什么要縮短“啟動(dòng)耗時(shí)”？

說到小程序的性能表現(xiàn)，最直觀且最重要的，還得是啟動(dòng)耗時(shí)，也就是用戶在涂鴉App里打開頁面的速度，快不快，一目了然。要是性能不行，渲染慢、響應(yīng)遲，用戶體驗(yàn)?zāi)强删痛蟠蛘劭郏脩袅魇б簿统闪吮厝弧?/p>

自從涂鴉把主要跨端框架從 React Native 換成了自家研發(fā)的涂鴉小程序，性能方面也是遇到了不少挑戰(zhàn)。不過別擔(dān)心，咱們的技術(shù)團(tuán)隊(duì)已經(jīng)對(duì)小程序的體驗(yàn)性能，特別是啟動(dòng)耗時(shí)，進(jìn)行了大刀闊斧的優(yōu)化升級(jí)。
下面一起來看看有哪些突破性進(jìn)展吧！
重新定義“秒開”如何衡量啟動(dòng)耗時(shí)？

一般情況下，用戶在打開一個(gè)小程序的時(shí)候，心里會(huì)產(chǎn)生一個(gè)主觀感受，如“這個(gè)應(yīng)用打開有點(diǎn)慢”或者“哇塞，這小程序秒開，太爽了”！

用戶的這些感受背后，其實(shí)是有嚴(yán)謹(jǐn)?shù)男阅苤笜?biāo)在支撐的。那我們是如何定義小程序的啟動(dòng)速度呢？
主要從以下三個(gè)關(guān)鍵階段來衡量：

1、加載代碼包（Loading）：這是啟動(dòng)的第一步。在這個(gè)階段，小程序需要先從服務(wù)器下載代碼包，才能執(zhí)行后續(xù)操作。代碼包的大小和下載速度，都會(huì)直接影響到小程序的啟動(dòng)性能。

2、首屏渲染（FirstPaint，F(xiàn)P）：頁面首次繪制，即頁面開始在屏幕上呈現(xiàn)內(nèi)容的時(shí)間點(diǎn)。此時(shí)用戶雖然可能還無法與頁面交互，但至少屏幕上已經(jīng)有了可見元素。

3、首次有意義渲染（First Meaningful Paint，F(xiàn)MP）：這是能夠更準(zhǔn)確反映用戶感知加載速度的指標(biāo)，它指的是用戶認(rèn)為頁面上的核心有用內(nèi)容被展示出來的時(shí)間點(diǎn)。FMP 越快，用戶體驗(yàn)到的“秒開”感就越強(qiáng)。

我們的優(yōu)化目標(biāo)，就是奔著縮短 FMP 耗時(shí)，讓用戶在使用涂鴉小程序時(shí)，真正感受到“快人一步”的極致體驗(yàn)。

新版本提升效果如何？用數(shù)據(jù)說話

技術(shù)改造的效果如何？數(shù)據(jù)最有說服力！針對(duì)FMP指標(biāo)，我們使用iOS 和 Android的各種設(shè)備進(jìn)行了測(cè)試，全面涵蓋高、中、低各檔位性能機(jī)型。

并在多個(gè)核心業(yè)務(wù)場(chǎng)景（包括節(jié)能低碳、舒適空間、電話短信、門鎖、照明、掃地機(jī)、IPC面板等）中進(jìn)行了嚴(yán)苛的測(cè)試。

測(cè)試結(jié)果顯示：iOS 與 Android 均有大幅提升！綜合來看，F(xiàn)MP指標(biāo)有30%以上的提升。

尤其在 Android 平臺(tái)，通過重構(gòu) JS 引擎預(yù)加載和多任務(wù)管理等核心優(yōu)化，新版本在面板小程序場(chǎng)景下實(shí)現(xiàn)了FMP 耗時(shí)平均縮短約 49%的顯著提升。這意味著，在主流 Android 設(shè)備上，用戶感知到的啟動(dòng)速度幾乎提升了一倍。
對(duì)標(biāo)行業(yè)標(biāo)桿超越React Native！

性能比對(duì)，我們從不回避！我們選取了十余款功能一致的核心面板（包括門鎖、照明、掃地機(jī)、光源、插座、網(wǎng)關(guān)、開關(guān)、血壓計(jì)等），將涂鴉小程序的版本（Ray框架）與原有的 React Native 版本進(jìn)行了 FMP 性能比對(duì)。

對(duì)比結(jié)果令人振奮：

綜合啟動(dòng)耗時(shí)，涂鴉小程序框架已與 RN 框架達(dá)到基本持平，并且在部分面板場(chǎng)景，性能表現(xiàn)已經(jīng)超越了RN 框架！

這不僅僅是技術(shù)上的一個(gè)里程碑，更是涂鴉對(duì)用戶體驗(yàn)承諾的一次有力兌現(xiàn)。這意味著，涂鴉自研的跨端框架，在啟動(dòng)性能這一硬指標(biāo)上，已經(jīng)完全具備了與主流成熟框架相抗衡，甚至超越的能力。

未來，涂鴉將繼續(xù)深耕底層技術(shù)，不斷挑戰(zhàn)性能極限，確保涂鴉小程序在承載更多復(fù)雜業(yè)務(wù)的同時(shí)，持續(xù)為全球用戶提供一流的智能交互體驗(yàn)。本次性能優(yōu)化已在版本 v7.1.0中正式發(fā)布，歡迎合作伙伴持續(xù)關(guān)注并體驗(yàn)。