Hybrid中的頁面載入優化
阿新 • • 發佈：2019-02-05
流行的AJAX架構都是由Browser下載一個模板，然後發起AJAX請求JSON資料，資料回來後填充模板並展現給使用者。可以有這麼幾種優化方式
1、把AJAX請求完全放在後端完成，Browser直接載入一個靜態頁面。雖然很極端、很暴力，但在2G/3G環境下使用者的體驗可以得到很大提升。2、合併AJAX請求。通常一個頁面不同部分的資料可能來源於不同的介面，如果把這些介面的請求進行合併，既節省了流量又加快了速度。
3、把AJAX請求發起的JS程式碼放到<body>標籤的底部。由於Browser是邊解析邊展示的，這樣就可以把整個頁面展示給使用者之後再去請求資料。如果放到Header中，Browser會等待AJAX請求完成後才會進行DOM樹的解析和渲染。
4、非同步發起JS請求。不影響Browser主執行緒對DOM樹的解析和渲染。
補充於2014.11.30
在Ａndroid中載入一個Ｈ5頁面時，會等到所有的文字資源以及圖片資源全部載入完畢之後，才會得到pageFinished事件。如果在這之前一直顯示Ｌoading的話，這樣會導致Ｈ5頁面的顯示速度變慢，導致體驗變差，可以監聽loadResource事件，並在該事件發生時，去掉Ｌoading介面，這時靜態的頁面其實已經渲染完成，可以看到了。