記一次cocos專案的載入速度優化

2022-01-14 00:33:16 字數 1660 閱讀 4666

半個月前,我們用cosos creator做了乙個簡單的小遊戲,也許算不上小遊戲吧。。一邊學cocos,一邊做,幾經波折後終於上線了。然鵝,功能是實現了,但是載入速度十分感人(畢竟沒經驗嘛,無辜臉)。1.8m的資源需要10秒鐘左右才能全部載入完。於是被老大一有機會就拿出同類產品跟我們的比較,然後一頓吐槽。痛定思痛,決定把能優化的地方全都優化一下。

首先肯定要找出問題出在那裡,下面是載入的network截圖:

從圖中可以看出,整個載入過程被紅線分割為兩部分,前面為html載入,後面為遊戲資源載入,紅線為onload事件。在html載入的過程中,由於cocos.js有600多k大小,載入完成需要4s左右的時間(紅線前的部分),是影響前者的主要因素。之後由cocos來控制遊戲所需資源(,音訊等)的載入。在遊戲資源載入的過程中,有部分素材過大,占用載入時間過長,是影響遊戲資源載入時間的主要因素。所以首要任務是優化cocos.js的載入速度來提公升html載入的速度。

js壓縮,去掉沒有的模組

這個功能是cocos creator來幫助完成的,可以在設定中去掉你專案中沒用到的模組,如camera等,最終js大小還在600多k

優化效果:對載入速度的提公升不明顯★★

靜態檔案合併

參考博友的cocos creator—優化首頁開啟速度這篇文章,提到了使用gulp壓縮靜態檔案,內聯指令碼以減少請求的方法,進行優化。

優化效果: 減少了載入遊戲資源前的請求次數,提公升了速度,但對cocos.js的載入速度提公升不明顯★★★

preload

通過link標籤使cocos.js提前於其他js檔案載入,mdn對rel=preload的描述:

元素的 rel 屬性的屬性值preload能夠讓你在你的html頁面中 元素內部書寫一些宣告式的資源獲取請求,可以指明哪些資源是在頁面載入完成後即刻需要的。對於這種即刻需要的資源,你可能希望在頁面載入的生命週期的早期階段就開始獲取,在瀏覽器的主渲染機制介入前就進行預載入。這一機制使得資源可以更早的得到載入並可用,且更不易阻塞頁面的初步渲染,進而提公升效能。
**如下:

由於我們這個專案引用的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繪圖避免不必要的等。等我經驗豐富了再寫篇專門講這個的吧。(完)

記一次專案的死鎖分析

公司專案使用多執行緒開發,因此使用gdb exec c corefile執行core檔案後,使用bt列印堆疊資訊 看不出問題,需要進入到執行緒內部分析。1.info threads 列印執行緒資訊 可以看到有多個 lll lock wait 看到這裡,我們推測可能是鎖出現問題了。那麼繼續往,進入到執...

mvc 記一次「專案」的歷程

大二上半學期因為選修課的原因,答應幫老師完善學院的選課系統。在這之前沒有做過乙個可以成為 專案 的專案,本著挑戰自己的原則和可以不上選修課的福利,斷斷續續用了一學期的時間來完善這個選課系統。接受這個專案的時候,專案已經被乙個學姐做的差不多了,基本框架模型都有了。值得一提的是,學姐是現學現做,用的是我...

記一次現場部署專案的經歷

給伺服器分盤 右擊計算機 管理 儲存 磁碟管理,按需求分配合適的磁碟空間 根據公司建立文件,命名規範,分別建立資料庫資料夾,應用資料夾等等 搭建環境,jdk1.8,tomcat7,oracle11,plsql等 匯入備份資料庫檔案到資料庫伺服器.匯入語句 impdp userid 物件名稱 物件密碼...