提升混合應用頁面打開速度的新思路

我們都知道混合應用的流暢性不如原生應用,除了不能像原生一樣輕鬆駕馭各種狂拽酷炫的效果,混合應用還有一個難以消除的弱點在於頁面打開速度上,如果有機會在同一臺手機上直接對比的話,這種差距是肉眼都能直觀感受到的,這主要是由於web頁面每次打開前需要初始化,在那一瞬間需要完成DOM創建、資源下載、樣式渲染、js執行,這些時間消耗造成了按鍵按下與頁面進場之間短暫的停頓,也造成了混合應用整體“不流暢,不跟手”的印象。

爲了儘可能解決這個問題,最近想到了一種新的優化思路,優化後在測試機上空白頁面的打開速度較之前提升100ms左右,對於大量依賴js運行的頁面提速效果更明顯。思路並不複雜,就是先移除頁面中所有的js資源,加速頁面渲染速度,當頁面開始進場動畫後,再開始加載執行js,充分利用了進場動畫的時間,以縮短整個頁面展現的時間,核心代碼就是選擇時機動態插入js節點部分,該方案已經應用於HybridStart項目,詳細過程點此瞭解

應用該方案後同時還解決了混合應用的另一個問題,那就是打開不同APP頁面不再有速度差別了,之前產生的速度差別,主要是因爲js代碼可能產生異步請求或者生成DOM節點,這些耗時都不可預估,長的甚至以秒計算,優化後的頁面完全排除掉js資源的干擾,渲染速度的差別就僅在於DOM渲染量的差別,而這個基本上任何頁面都不會差太多,因此不同頁面的打開速度也就基本一致了。

最後安利一下HybridStart項目,如果你也在用apicloud做混合應用,這一定是你的不二之選,很難想象開發體驗能比這更好的了。另外HybridStart的開發原則之一是UI可剝離,我認爲框架的UI跟功能綁定就是耍流氓,沒錯我說的就是mui,沒法想象怎麼用mui做自定義風格的項目,這方面HybridStart是完勝的,使用HybridStart做項目完全不需要擔心UI好不好改,因爲你甚至可以一怒之下將自帶UI刪掉重寫,完全不影響核心功能,當然了即便UI不是重點,HybridStart的自帶UI也足夠滿足普通APP項目需求了,而且附帶less文件,只要是別太非主流的風格都能通過改變量實現。

最後,雖然目前HybridStart是基於apicloud平臺,但未來還會跟進dcloud平臺,因爲HybridStart的初衷就是跨平臺,最初一版是脫胎於古老的appcan平臺,在飽嘗appcan之坑後,決心將其打造成一款跨引擎的混合應用開發框架,目的就是抹平不同平臺的引擎api差別,減少平臺遷移成本,就目前來看,apicloud跟dcloud相比,還是稍遜一籌的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章