加载优化（最耗时）
减少 HTTP 请求：浏览器一般同时响应请求为4个请求
- 减少 HTTP 请求：浏览器一般同时响应请求为4个请求
- 合并 CSS、 JavaScript；
- 合并小图片、 使用 CSS sprite，base-64
- 压缩 HTML、CSS、JavaScript：减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript 等进行代码压缩，并在服务端设置 GZip
- 使用首屏加载：首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化；
- 按需加载：将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量。但是这也会导致大量重绘，影响渲染性能
滚屏加载
LazyLoad
预加载：大型重资源页面（如游戏）可使用增加 Loading 的方法，资源加载完成后再显示页面。但 Loading 时间过长，会造成用户流失。
- 使用 智图 压缩；
- 使用其他方式代替图片（CSS3，SVG，IconFont）；
脚本执行优化
- CSS 写在头部（阻塞 DOM 渲染，不阻塞加载，内联会阻塞加载），JavaScript 写在尾部或异步（默认阻塞加载和渲染）
- 避免图片和 iFrame 等的空 Src：空 Src会重新加载当前页面，影响速度和效率
- 尽量避免重设图片大小：指通过 CSS、JavaScript 等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能
- 图片尽量避免使用 DataURL ，前面提到 DataURL可以减少加载时间，但是 DataURL 没有使用图片的压缩算法文件会变大，并且要解码后再渲染，耗时长，综上应尽量避免
CSS优化
- 尽量避免在 HTML 标签中写 Style 属性
- 避免 CSS 表达式：CSS 表达式的执行需跳出 CSS 的渲染，因此请避免 CSS 表达式
- 移除空的 CSS 规则：空的 CSS 规则增加了 CSS 文件的大小，且影响 CSS 树的执行，所以需移除空的 CSS
- 使用
flexbox代替传统的布局模型 - 正确使用
display属性： display:inline后边不应再使用width、height、margin、padding以及floatdisplay:inline-block后不应该使用floatdisplay:block后不应该再使用vertical-aligndisplay:table后不应该再使用margin或float- 不滥用
float：float在渲染时的计算量比较大，尽量减少使用 - 不滥用 Web 字体：Web字体需要下载，解析，重绘当前页面，尽量减少使用
- 不声明过多的
font-size： 尽量使用语义化标签的默认字体大小，提高 CSS 树的效率 - 值为 0 时不需要任何单位
- 标准化各种浏览器前缀
- 没前缀应放在最后
- CSS 动画只用（
-webkit-无前缀两种即可） - 其他前缀为
-webkit-、-moz-、-ms-、无前缀四种 - 避免让选择器看起来像正则表达式：高级选择器执行耗时长且不易读懂，避免使用
JavaScript执行优化
- 减少重绘和回流
- 避免不必要的 DOM 操作；
- 尽量改变 Class 而不是 Style ，使用 classList 代替 className ；
- 避免使用
document.write()； - 减少
drawImage； - 缓存 DOM 选择与计算：每次 DOM 选择都要计算，用一个变量保存这个值；
- 尽量使用事件代理，避免批量绑定事件；
- 尽量使用 ID 选择器：ID选择器是最快的；
Touch事件优化：使用touchstart、touchend代替click，但注意Touch响应过快，易引发误操作；
渲染优化
- 减少 DOM 节点：DOM 节点太多影响页面的渲染，应尽量减少 DOM 节点
- 动画优化：尽量使用 CSS3 动画
- 合理使用
requestAnimationFrame动画代替setTimeout（跑在主线程上，一般一秒刷新 60 次，提高动画帧的利用效率），参考文章 - 适当使用 Canvas 动画， 5 个元素以内使用 CSS 动画（IOS8可使用webGL）；
- 高频事件优化：
Touchmove和Scroll事件可导致多次渲染使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染； - 增加响应变化的时间间隔，减少重绘次数
- GPU 加速：CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、webGL、Video）来触发 GPU 渲染，但过度使用会引发手机耗电增加。
