半個月前，我們用cosos creator做了一個簡單的小游戲，也許算不上小游戲吧。。一邊學cocos,一邊做，幾經波折后終於上線了。然鵝，功能是實現了，但是加載速度十分感人（畢竟沒經驗嘛，無辜臉）。1.8M的資源需要10秒鍾左右才能全部加載完。於是被老大一有機會就拿出同類產品跟我們的比較，然后一頓吐槽。痛定思痛，決定把能優化的地方全都優化一下。
分析加載瀑布圖
首先肯定要找出問題出在那里，下面是加載的network截圖：
從圖中可以看出，整個加載過程被紅線分割為兩部分，前面為HTML加載，后面為游戲資源加載，紅線為onload事件。在HTML加載的過程中，由於cocos.js有600多K大小，加載完成需要4s左右的時間(紅線前的部分)，是影響前者的主要因素。之后由cocos來控制游戲所需資源(圖片，音頻等)的加載。在游戲資源加載的過程中，有部分圖片素材過大，占用加載時間過長，是影響游戲資源加載時間的主要因素。所以首要任務是優化cocos.js的加載速度來提升HTML加載的速度。
優化cocos.js加載速度
-
js壓縮,去掉沒有的模塊
這個功能是cocos creator來幫助完成的，可以在設置中去掉你項目中沒用到的模塊，如camera等，最終js大小還在600多K
優化效果：對加載速度的提升不明顯★★
-
靜態文件合並
參考博友的Cocos Creator—優化首頁打開速度這篇文章，提到了使用gulp壓縮靜態文件，內聯腳本以減少請求的方法，進行優化。
優化效果: 減少了加載游戲資源前的請求次數，提升了速度，但對cocos.js的加載速度提升不明顯★★★
-
preload
通過link標簽使cocos.js提前於其他js文件加載，MDN對
rel=preload的描述：元素的 rel 屬性的屬性值preload能夠讓你在你的HTML頁面中 元素內部書寫一些聲明式的資源獲取請求，可以指明哪些資源是在頁面加載完成后即刻需要的。對於這種即刻需要的資源，你可能希望在頁面加載的生命周期的早期階段就開始獲取，在瀏覽器的主渲染機制介入前就進行預加載。這一機制使得資源可以更早的得到加載並可用，且更不易阻塞頁面的初步渲染，進而提升性能。
代碼如下:
<link rel="preload" href="cocos2d-js-min.07114.js" as="script">由於我們這個項目引用的js本身較少，所以效果★
-
Gzip
所以當前端有加載慢的問題時，鍋不一定在前端。經過跟cocos官方demo比較發現，我們的服務器居然沒有開gzip。。而且后端的同學表示還不太會弄。。。一番搜索之后，在我們的nginx上開啟了gzip，cocos.js文件大小變成了172k，響應頭中會有一個
Content-Encoding: gzip的標志。加載耗時898ms左右。縮短了4s，總耗時在6s，上一個優化后的瀑布圖
優化效果★★★★★
到這里，HTML加載速度優化完成，解決了cocos.js這個大難題之后，onload事件在1s左右就會觸發，然后進行游戲資源加載。總之，學會看瀑布圖，才能不給后端造成的速度慢的問題背鍋，哈哈
優化圖片加載速度
這又是一門學問了，可以通過texturepacker合並雪碧圖，可以通過tinypng.com壓縮圖片，使用canvas繪圖避免不必要的圖片等。等我經驗豐富了再寫篇專門講這個的吧。（完）