當(dāng)用戶(hù)打開(kāi)一個(gè)智能家居小程序時(shí)，第一印象往往決定了后續(xù)的互動(dòng)體驗(yàn)?！按蜷_(kāi)有點(diǎn)慢”和“應(yīng)用秒開(kāi)”之間，不僅隔著技術(shù)鴻溝，更關(guān)系著用戶(hù)是否愿意繼續(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í)，讓用戶(hù)打開(kāi)更快、操作更順、體驗(yàn)更出色。

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

說(shuō)到小程序的性能表現(xiàn)，最直觀(guān)且最重要的，還得是啟動(dòng)耗時(shí)，也就是用戶(hù)在涂鴉App里打開(kāi)頁(yè)面的速度，快不快，一目了然。要是性能不行，渲染慢、響應(yīng)遲，用戶(hù)體驗(yàn)?zāi)强删痛蟠蛘劭?，用?hù)流失也就成了必然。

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

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

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

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

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

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

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

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

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

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

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

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

性能比對(duì)，我們從不回避！我們選取了十余款功能一致的核心面板（包括門(mén)鎖、照明、掃地機(jī)、光源、插座、網(wǎng)關(guān)、開(kāi)關(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ì)用戶(hù)體驗(yàn)承諾的一次有力兌現(xiàn)。這意味著，涂鴉自研的跨端框架，在啟動(dòng)性能這一硬指標(biāo)上，已經(jīng)完全具備了與主流成熟框架相抗衡，甚至超越的能力。

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