基于cocos2dx -js h5项目优化记录

Posted 2021-03-25 小鱼2015

在记录优化内容前选搞清楚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节点的界面改为分帧加载的方式，加速页面呈现速度

 

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