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

概述在记录优化内容前选搞清楚web渲染流程的四个主要步骤： 解析HTML生成DOM树 - 渲染引擎首先解析HTML文档，生成DOM树 构建Render树 - 接下来不管是内联式，外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树，根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree)， 布局Render树 - 然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示

在记录优化内容前选搞清楚web渲染流程的四个主要步骤：

解析HTML生成DOM树 - 渲染引擎首先解析HTML文档，生成DOM树 构建Render树 - 接下来不管是内联式，外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树，根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree)， 布局Render树 - 然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置 绘制Render树 - 最后遍历渲染树并用UI后端层将每一个节点绘制出来

以上步骤是一个渐进的过程，为了提高用户体验，渲染引擎试图尽可能快的把结果显示给最终用户。它不会等到所有HTML都被解析完才创建并布局渲染树。它会在从网络层获取文档内容的同时把已经接收到的局部内容先展示出来。

 

优化思路：

　　为了保障首屏内容的最快速显示，就需要做资源的拆分，那么以什么粒度拆分、要不要拆分，不同页面、不同场景策略不同。以达到渐进式页面渲染

 

优化内容：

1.HTML文件内容整理：

　　1.HTML文件中剥离CSS代码和非必要Js代码，尽量不要融合到一起，毕竟多种代码混合会给你管理页面代码带来极大的负担。而且HTML文件内容复多少会影响HTML页面加载速度。

 

　　2.HTML文件中加载CSS文件

　　　　只下载和首屏页面布局有关文件，其他CSS文件等游戏启动后偷偷下载或者使用前夕再下载。因为渲染时DOM树的生成过程中可能会被CSS的加载执行阻塞

 

　　3.HTML文件中下载Js文件

　　　　只下载和初始化所需有关文件（如vconsole插件），其他Js文件等游戏启动后偷偷下载或者使用前夕再下载。因为渲染时DOM树的生成过程中同样可能会被Js的加载执行阻塞

　　　　如果服务器支持合并请求，就把Js和CSS合并请求。来提高性能。因为同一域名下的请求有一定数量限制，浏览器下载静态文件超过限制数目的请求会被阻塞

 

压缩Js、CSS、图片 总结

以上是内存溢出为你收集整理的基于cocos2dx -js h5项目优化记录全部内容，希望文章能够帮你解决基于cocos2dx -js h5项目优化记录所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。