基于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节点的界面改成分帧加载的方式，加速页面呈现速度

 

文章都是学习过程当中的总结，若是发现错误，欢迎留言指出~