记一次cocos项目的加载速度优化

半个月前,我们用cosos creator做了一个简单的小游戏,也许算不上小游戏吧。。一边学cocos,一边做,几经波折后终于上线了。然鹅,功能是实现了,但是加载速度十分感人(毕竟没经验嘛,无辜脸)。1.8M的资源需要10秒钟左右才能全部加载完。于是被老大一有机会就拿出同类产品跟我们的比较,然后一顿吐槽。痛定思痛,决定把能优化的地方全都优化一下。

分析加载瀑布图

首先肯定要找出问题出在那里,下面是加载的network截图:

分享图片

从图中可以看出cocos.js有600多K大小,加载完成需要4s左右的时间,之后由cocos来控制游戏所需资源(图片,音频等)的加载。有部分图片素材过大,占用加载时间过长,我们服务器是腾讯云,没有cdn。所以首要任务是优化cocos.js的加载速度。

优化cocos.js加载速度

  1. min,去掉没有的模块

    这个功能是cocos creator来帮助完成的,可以在设置中去掉你项目中没用到的模块,如camera等,最终js大小还在600多K

    优化效果:对加载速度的提升不明显★★

  2. 静态文件合并

    参考博友的Cocos Creator—优化首页打开速度这篇文章,提到了使用gulp压缩静态文件,内联脚本以减少请求的方法,进行优化

    优化效果: 减少了加载游戏资源前的请求次数,提升了速度,但对cocos.js的加载速度提升不明显★★★

  3. preload

    通过link标签使cocos.js提前于其他js文件加载,代码如下:
    html <link rel="preload" href="cocos2d-js-min.07114.js" as="script">
    由于我们这个项目引用的js本身较少,所以效果★

  4. Gzip

    所以当前端有性能问题时,锅不一定在前端。经过跟cocos官方demo比较发现,我们的服务器居然没有开gzip。。而后端的同学表示还不太会弄。。。一番搜索之后,在我们的nginx上开启了gzip,cocos.js文件大小变成了172k,加载耗时898ms左右。缩短了4s,总耗时在6s,上一个优化后的瀑布图

    分享图片

    优化效果★★★★★

优化图片加载速度

这又是一门学问了,可以通过texturepacker合并雪碧图,可以通过tinypng.com压缩图片,使用canvas绘图避免不必要的图片等。等我经验丰富了再写篇专门讲这个的吧。(完)

相关文章

    本文实践自 RayWenderlich、Ali Hafizji 的文章《...
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@1...
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从C...
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《...
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试...