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

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

為什么要縮短“啟動耗時”？

說到小程序的性能表現(xiàn)，最直觀且最重要的，還得是啟動耗時，也就是用戶在涂鴉App里打開頁面的速度，快不快，一目了然。要是性能不行，渲染慢、響應(yīng)遲，用戶體驗那可就大打折扣，用戶流失也就成了必然。

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

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

用戶的這些感受背后，其實是有嚴謹?shù)男阅苤笜嗽谥蔚?。那我們是如何定義小程序的啟動速度呢？
主要從以下三個關(guān)鍵階段來衡量：

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

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

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

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

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

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

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

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

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

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

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

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

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

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