性能优化这个话题老生常谈，h5游戏也不例外。可能大家耳熟能详的方案是古老的“雅虎军规35条”，该方案确实有不少可取之处，但还是要根据实际应用场景做不同的改变。我将为大家详细讲解我司h5游戏具体采用了哪些优化方式，并结合性能优化这个话题，谈谈我个人对它的看法。
0、最核心的是优化关键渲染路径。
什么是关键渲染路径？浏览器接收到服务器返回的HTML、CSS和JavaScript等字节数据并对其进行解析和转变成像素的渲染过程被称为关键渲染路径。浏览器在渲染页面前需要先构建出DOM树与CSSOM树，然后合并成渲染树（render tree），进入布局阶段（Layout），结束之后浏览器会立即发出Paint Setup与Paint事件，最终将每个节点绘制到屏幕。因此，我们需要从关键渲染路径入手，具体是关键资源、关键路径长度和关键字节三个方面进行优化。
1、尽可能减少HTTP请求。
合并css和JS文件，使用base64表示简单的图片（图片的编码是使用base64的)。h5游戏打包后图片全是base4，既是平台的要求，也是优化的方法之一。
2、减小资源体积。
js混淆、css压缩、图片压缩。我司h5游戏经过打包之后所有的文件合为一体，全部混淆。
3、使用CDN(内容分发网络)和缓存。
我司h5游戏的base.js、easel.min.js、tween.min.js等既是体现，在自定义的index.js中也会根据create.js用法设置对应的缓存。
4、预加载。
常见的预加载是prefetch，比如的使用，也可以使用dns-prefetch提前进行DNS解析，以便之后可以快速地访问另一个主机名（浏览器会在加载网页时对网页中的域名进行解析缓存）。而在create.js中，官方本身就有preload.js的使用，可对图片、音频、视频等数据进行预加载。所以我司对preload.js进行了二次封装，在函数表达式里传入了参数data，还传了callback。而在实际游戏项目开发中，我们统一将图片、音频资源放入source.js，然后在index.js中调取自定义的Crt.preLoad方法，然后在回调里进行初始化。示例代码:
Crt.preLoad(window.IMGRESOURCES,function() {
utils.init();
});5、从DOM上的操作优化入手。
具体表现为使用className代替大量的内联样式修改；对于复杂的UI元素，设置position为absolute（前两个操作的目的是减少回流和重绘）； 尽量使用css3动画；使用requestAnimationFrame代替setInterval操作，对应的是window.cancalAnimationFrame；使用事件代理。
6、移动端本身的优化也有不少。
函数防抖和函数节流、使用使用touchstart、touchend等代替click、开启GPU渲染加速等。我司使用以下代码兼容PC端:
if ("ontouchend" in document) {
var eventStartName = "touchstart";
var eventEndName = "touchend";
} else {
var eventStartName = "mousedown";
var eventEndName = "mouseup";
};7、图片懒加载
在最初给图片的src设置一个比较简单的图片，然后将图片的真实地址设置给自定义的属性，做一个占位，然后给图片设置监听事件，一旦图片到达视口范围，从图片的自定义属性中获取出真实地址，然后赋值给src，让其进行加载。
8、进度条loading的显示
h5游戏初始化和在横竖屏切换时都会显示，也是提高用户体验的方式之一。
9、异步加载js或第三方资源(async)。
我司自定义了data-load="true"。
10、尽量使用ID选择器
所以在我司的游戏代码中都是在init里，先尽可能全部document.getElementById("xxx")。
11、不滥用float。
我司的h5游戏布局大部分是flex第三代布局。
12、标准化各种浏览器前缀。
我司leader(主程)使用node配合run.js，在打包时会一键自动填充所有的浏览器前缀。
13、使用CSS3 transform、transitions等来触发GPU渲染，开启硬件加速
h5游戏会涉及不少动画，我司几乎每个游戏都会在index.css写入。
14、createjs.Touch.enable(stage)。
easeljs事件默认是不支持touch设备的，需要该代码才支持。
以上，是我司前端小组大概的优化方案。过于常规的比如css的文件放在头部（CSS外链或内联会阻塞整个DOM的渲染，然而DOM解析会正常进行），js文件放在尾部、尽量避免內联样式等我就不一一多谈了，网上对于性能优化的文章和方法还有很多，适合自己业务的才是最好的。希望我司的前端性能优化能对大家有所帮助、有所启发。