基於cocos2dx -js h5項目優化記錄

在記錄優化內容前選搞清楚web渲染流程的四個主要步驟：

1. 解析HTML生成DOM樹 - 渲染引擎首先解析HTML文檔，生成DOM樹
2. 構建Render樹 - 接下來無論是內聯式，外聯式仍是嵌入式引入的CSS樣式會被解析生成CSSOM樹，根據DOM樹與CSSOM樹生成另一棵用於渲染的樹-渲染樹(Render tree)，
3. 佈局Render樹 - 而後對渲染樹的每一個節點進行佈局處理，肯定其在屏幕上的顯示位置
4. 繪製Render樹 - 最後遍歷渲染樹並用UI後端層將每個節點繪製出來

以上步驟是一個漸進的過程，爲了提升用戶體驗，渲染引擎試圖儘量快的把結果顯示給最終用戶。它不會等到全部HTML都被解析完才建立並佈局渲染樹。它會在從網絡層獲取文檔內容的同時把已經接收到的局部內容先展現出來。

 

優化思路：

　　爲了保障首屏內容的最快速顯示，就須要作資源的拆分，那麼以什麼粒度拆分、要不要拆分，不一樣頁面、不一樣場景策略不一樣。以達到漸進式頁面渲染

 

優化內容：

1.html文件內容整理：

　　1.html文件中剝離css代碼和非必要js代碼，儘可能不要融合到一塊兒，畢竟多種代碼混合會給你管理頁面代碼帶來極大的負擔。並且html文件內容復多少會影響html頁面加載速度。

 

　　2.html文件中加載css文件

　　　　只下載和首屏頁面佈局有關文件，其餘css文件等遊戲啓動後在空閒時間偷偷下載或者使用前夕再下載。由於渲染時DOM樹的生成過程當中可能會被CSS的加載執行阻塞

 

　　3.html文件中JavaScript 應儘可能少影響 DOM 的構建，若是是引用外部插件或者平臺sdk則遵循如下原則：

　　　　只下載和初始化所需有關文件（如vconsole插件），其餘js文件等遊戲啓動後偷偷下載或者使用前夕再下載。由於渲染時DOM樹的生成過程當中一樣可能會被JS的加載執行阻塞

　　　　若是服務器支持合併請求，就把js和css合併請求。來提升性能。由於同一域名下的請求有必定數量限制，瀏覽器下載靜態文件超過限制數目的請求會被阻塞

 2.壓縮js

　　webpack合併全部js文件

 

3.壓縮css

　　在線壓縮工具壓縮css

 

4.壓縮圖片

　　打包腳本集成pngquant和webp，壓縮紋理，安卓使用webp、ios不變（注：小圖不建議壓縮。圖片大小差別不大，還額外增長了解碼耗時。數量很少忽略）

 

5.sdk或插件（含對應css文件）集成

　　從主包分離外部sdk文件、插件文件。添加js插件管理文件，html初始化下載js文件(包含：遊戲主包js 文件、插件管理器js文件)。 初始化依賴插件或者SDK，插件管理器啓動時直接下載，非初始化依賴文件在主包下載完成後，適時按渠道所需下載。加速主包下載和首屏建立、

　　插件攜帶css文件同理。

 

6.邏輯簡化，使用異步，加強處理速度

　　獨立、規範遊戲流程邏輯。把能異步的同步流程改成異步執行，減小遊戲流程耗時（如鏈接登陸或者更新服務器的時間，異步下載和預覽登陸資源）

 

7.Ui渲染相關

　　部分須要同時渲染大量ui節點的界面改成分幀加載的方式，加速頁面呈現速度

 

文章都是學習過程當中的總結，若是發現錯誤，歡迎留言指出~