Cocos Creator是一个优秀的游戏引擎开发工具,很多地方都针对H5游戏做了专门的优化,这是我比较喜欢Cocos Creator的一点原因。

其中一个优化点是首页的加载速度,开发组为了加快首页的渲染速度,减少白屏时间,把逻辑代码和首页加载代码做了彻底分离。首次页面加载的只是一个相当于加载器的初始化文件,文件体积特别小,不像某些引擎,一开始就需要加载主逻辑js文件,一开始就给我来个上百kb的文件加载,然后才能显示loading条,白屏时间当然会延长不少。

说到这里,不得不吐槽一下Cocos的开发文档,居然没有专门针对首页loading条做任何说明,害我研究了半天都不知道怎么定制自己的首页loading界面。这里如果有遇到不知道怎么定制首页loading界面的同学,可以看我另一篇的文章:《Cocos Creator—定制H5游戏首页loading界面》

话说回来,开发者虽然专门针对首页加载时间做了优化,但对于前端页面优化来说,还是不够彻底的,我们还有不少优化时间。首先,我们看一下用Cocos Creator构建发布后的mobile-web页面请求图:

WX20170728-210429@2x.png

在页面首次出现之前,需要发起4个请求,并且这4个请求都是小文件,其实是没有必要的,特别是在服务器端还有gzip压缩的情况,更理想的情况是一个请求就能完成所有的工作。

另外这4个文件都没有经过代码压缩,例如html文件:

cocos-creator-source.png

这里也有不少优化空间。

综上所述,我们有了压缩合并的方案,这里可以通过gulp实现。

有些同学会问:webpack更酷更流行为什么不用webpack?答:因为webpack本质上是模块化打包方案,我们这里只是简单对代码做一些构建处理,用gulp更轻量更合适。

gulp安装请访问:https://gulpjs.com/

nodejs安装请访问:http://nodejs.org/

另外需要安装gulp相关插件:gulp-file-inline gulp-htmlmin

思路如下:

  1. 通过gulp-file-inline把style-mobile.css,settings.js,main.js inline到html文件,减少请求
  2. 通过gulp-htmlmin把html文件压缩,减少空格,压缩代码量,减少文件体积

gulpfile文件代码:

var gulp = require('gulp');
var fileInline = require('gulp-file-inline');
var htmlmin = require('gulp-htmlmin'); gulp.task('htmlmin', function(cb) {
gulp.src('./build/web-mobile/*.html')
.pipe(fileInline())
.pipe(htmlmin({
collapseWhitespace:true,
removeComments: true
}))
.pipe(gulp.dest('./build/web-mobile/')
.on('end', cb));
});

在命令行里面执行gulp,大功告成!压缩后的请求如下图:

cocos-creator-min.png

大家可以看到,原来的4个请求只剩下build一个请求了,而且经过服务器的gizp压缩,还能缩小到2-3kb的大小,如果配合cdn策略,基本上能让你的H5游戏首页秒开。

完整代码可以访问:https://github.com/babyzone2004/cocosMd5,这个示例包含了Cocos Creator图片压缩优化,减少首次文件请求,html压缩,动态更新定制loading图等功能哦。

ps:

我们团队正在招聘优秀的H5游戏开发工程师,如果你符合以下条件:

  1. 白鹭引擎/Cocos2d-js/Layabox等H5相关的开发经验
  2. 希望快速成长,不甘平庸

请联系我吧:babyzone2004@qq.com

更多信息请戳:https://www.lagou.com/jobs/3083562.html?source=pl&i=pl-5

Cocos Creator—优化首页打开速度的更多相关文章

  1. Angular4--提速--提升Angular项目的首页打开速度(包含微信登录优化)

    Angular项目的首页打开速度很慢,有时候会有几秒的加载时间.如果在手机端访问的话,怕是要等待十多秒,这对用户体验很差.下面参考http://www.cnblogs.com/feiyu159/p/8 ...

  2. Cocos Creator—定制H5游戏首页loading界面

    Cocos Creator从1.0版本发布到现在也有一年多了,按理说一些常见的问题网上都有解决方案,例如"如何自定义首页加载进度条界面"这种普遍需求,应该所有人都会遇到的,因此也有 ...

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

    半个月前,我们用cosos creator做了一个简单的小游戏,也许算不上小游戏吧..一边学cocos,一边做,几经波折后终于上线了.然鹅,功能是实现了,但是加载速度十分感人(毕竟没经验嘛,无辜脸). ...

  4. 进一步优化SPA的首屏打开速度(模块化与懒载入) by 嗡

    前言 单页应用的优点在于一次载入全部页面资源,利用本地计算能力渲染页面.提高页面切换速度与用户体验.但缺点在于全部页面资源将被一次性下载完,此时封装出来的静态资源包体积较大,使得第一次打开SPA页面时 ...

  5. <1>Cocos Creator安装和启动

    学习之间需要了解JavaScritp基本语法和面向对象,详情参考https://blog.csdn.net/jadeshu/article/category/7476938 1.下载Cocos Cre ...

  6. Cocos Creator 性能优化:DrawCall

    前言 在游戏开发中,DrawCall 作为一个非常重要的性能指标,直接影响游戏的整体性能表现. 无论是 Cocos Creator.Unity.Unreal 还是其他游戏引擎,只要说到游戏性能优化,D ...

  7. 优化Laravel网站打开速度

    Laravel是一个功能强大的框架,组件很多,代码也很庞大,它的易用方便是牺牲了性能的,即便如此它仍然是一个优秀的框架,但在正式环境下要做好优化提升网站的打开速度. 1.关闭debug 打开.env文 ...

  8. Cocos Creator 通用框架设计 —— 资源管理优化

    接着<Cocos Creator 通用框架设计 -- 资源管理>聊聊资源管理框架后续的一些优化: 通过论坛和github的issue,收到了很多优化或bug的反馈,基本上抽空全部处理了,大 ...

  9. 提高网站打开速度的7大秘籍---依据Yslow工具的优化【转】

    很多站长使用虚拟主机来做网站,网页内容一旦很多,网站打开速度就会特别慢,如果说服务器.带宽.CDN这类硬指标我们没有经济实力去做,不妨通过网页代码优化的方式来提高速度,卢松松总结了一些可行性的方法. ...

随机推荐

  1. 在Mac OS X中配置Apache + PHP + MySQL 很详细

    这是一篇超级详细的配置mac os下面php+mysql+apache的文章.非常详细我的大部分配置就是参考上面的内容的,比如,PHP不能连接数据库,就是改一下默认的php.ini中pdo_mysql ...

  2. Java公开课-06.单例

    一. 什么是单例模式 因程序需要,有时我们只需要某个类同时保留一个对象,不希望有更多对象,此时,我们则应考虑单例模式的设计. 二. 单例模式的特点 1. 单例模式只能有一个实例. 2. 单例类必须创建 ...

  3. 关于springboot的定时器配置

    关于springboot的定时器: 比较重要的两个注解: @EnableScheduling:标注启动定时任务. @Scheduled(fixedRate = 1000 * 30)  定义某个定时任务 ...

  4. Reactor模式的.net版本简单实现--DEMO

    近期在学习DotNetty,遇到不少的问题.由于dotnetty是次netty的.net版本的实现.导致在网上叙述dotnetty的原理,以及实现技巧方面的东西较少,这还是十分恼人的.在此建议学习和使 ...

  5. safari浏览器模拟ipone,ipad以及其他浏览器版本

    1.打开safari浏览器中的偏好设置 2.在偏好设置中,选择高级,勾选在菜单栏中显示开发菜单 3.打开开发,进入响应式设计模式 4.可以选择iphone 或ipad.浏览器等不同模式,进行模拟 5. ...

  6. Python字符串的操作

    字符串常用操作 name = "my name is alex" # 注: python中方法名前后带下划线的是供内部使用的方法, 如方法__dir__(). 这种方法是不对外提供 ...

  7. Guava新增集合类型-Multiset

    Guava新增集合类型-Multiset Guava引进了JDK里没有的,但是非常有用的一些新的集合类型.所有这些新集合类型都能和JDK里的集合平滑集成.Guava集合非常精准地实现了JDK定义的接口 ...

  8. 【bzoj 2303】【Apio2011】方格染色

    题目: http://www.lydsy.com/JudgeOnline/problem.php?id=2303 题解: 很神奇的思路,膜一发大佬http://www.cnblogs.com/HHsh ...

  9. BZOJ_3343_教主的魔法_分块+二分查找

    BZOJ_3343_教主的魔法_分块+二分查找 题意:教主最近学会了一种神奇的魔法,能够使人长高.于是他准备演示给XMYZ信息组每个英雄看.于是N个英雄们又一次聚集在了一起,这次他们排成了一列被编号为 ...

  10. BZOJ_3477_[Usaco2014 Mar]Sabotage_二分答案

    BZOJ_3477_[Usaco2014 Mar]Sabotage_二分答案 题意: 约翰的牧场里有 N 台机器,第 i 台机器的工作能力为 Ai.保罗阴谋破坏一些机器,使得约翰的工作效率变低.保罗可 ...