-
首屏数据请求提前，避免 JavaScript 文件加载后才请求数据
为了进一步提升页面加载速度，可以考虑将页面的数据请求尽可能提前，避免在 JavaScript 加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分，而且不能并行，所以如果能将数据请求提前，可以极大程度上缩短页面内容的渲染完成时间。
-
首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化
JavaScript 资源放到 HTML 文档底部可以防止 JavaScript 的加载和解析执行对页面渲染造成阻塞。由于 JavaScript 资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞 HTML DOM 解析和 CSS 渲染的过程。
-
模块化资源并行下载
在加载大量的图片元素时，尽量预先限定图片的尺寸大小，否则在图片加载过程中会更新图片的排版信息，产生大量的重排
-
inline 首屏必备的 CSS 和 JavaScript
在 HTML 中直接缩放图片会导致页面内容的重排重绘，此时可能会使页面中的其他操作产生卡顿，因此要尽量减少在页面中直接进行图片缩放。
-
meta dns prefetch 设置 DNS 预解析
设置文件资源的 DNS 预解析，让浏览器提前解析获取静态资源的主机 IP，避免等到请求时才发起 DNS 解析请求。通常在移动端 HTML 中可以采用如下方式完成。
<!--cdn域名预解析-->
<meta http-equiv="x-dns-prefetch-control" content="on" >
<link rel="dns-prefetch" href="//cdn.domain.com" >
-
资源预加载
对于移动端首屏加载后可能会被使用的资源，需要在首屏完成加载后尽快进行加载，保证在用户需要浏览时已经加载完成，这时候如果再去异步请求就显得很慢。
-
图片压缩处理
在移动端，通常要保证页面中一切用到的图片都是经过压缩优化处理的，而不是以原图的形式直接使用的，因为那样很消耗流量，而且加载时间更长。
-
使用较小的图片，合理使用 base64 内嵌图片
在页面使用的背景图片不多且较小的情况下，可以将图片转化成 base64 编码嵌入到 HTML 页面或 CSS 文件中，这样可以减少页面的 HTTP 请求数。需要注意的是，要保证图片较小，一般图片大小超过 2KB 就不推荐使用 base64 嵌入显示了。
-
使用更高压缩比格式的图片
使用具有较高压缩比格式的图片，如 webp（需要设计降级兼容方案）等。在同等图片画质的情况下，高压缩比格式的图片体积更小，能够更快完成文件传输，节省网络流量。
图片懒加载
<img data-src="//cdn.domain.com/path/photo.jpg" alt="懒加载图片" >
使用 MediaQuery 或 srcset 根据不同屏幕加载不同大小图片
使用 iconfont 代替图片图标
页面元素尽量使用事件代理，避免直接事件绑定
尽量使用 id, 合理缓存 DOM 对象
使用 touchstart 代替 click
避免使用 eval、with，使用 join 代替连接符＋，推荐使用 ECMAScript6 的字符串模板
尽量使用 ECMAScript6＋的特性来编程
使用 NativeView 代替 DOM 的性能劣势
加载优化
- 合并css、JavaScript
- 合并小图片，使用雪碧图
- 缓存一切可以缓存的资源
- 使用长cache
- 使用外联引用css、JavaScript
- 压缩html、css、JavaScript
- 启用GZip
- 使用首屏加载
- 使用按需加载
- 使用滚动加载
- 通过media query加载
- 增加loading进度条
- 减少cookie
- 避免重定向
- 异步加载第三方资源
css优化
- 避免图片和iframe等空的src
- 尽量避免重设图片大小
- 图片尽量避免使用dataUrl
- 避免html写style属性
- 避免css表达式
- 移除空的css规则
- 不滥用float
- 不滥用web字体
- 不声明过多的font-size
- 值为0时不需要任何单位
- 标准化各浏览器前缀
- 避免使用id选择器
- 尽量坚持class嵌套
图片优化
- 使用智图 七牛图片api
- 使用（css3、svg、iconfont）代替图片
脚本优化
- 减少重绘和回流
- 缓存dom选择与计算
- 缓存列表长度
- 使用事件代理，避免批量绑定事件
- 尽量使用id选择器
- 使用touchstart、touchend代替click
渲染优化
- html使用viewpoint
- 减少dom节点
- 尽量使用css3动画
- 合理使用requestAnimationFrame动画代替setTimeout
- 适当使用canvas动画
- 使用css3 transitions、css3 3d transfroms、opacity、Canvas、webgl、video来触发GPU渲染
