网络加载类
1. 减少HTTP资源请求次数
在前端页面中，通常建议尽可能合并静态资源图片、JavaScript和CSS代码，减少页面请求数和资源请求消耗，这样可以缩短页面首次访问的用户等待时间。通过构建工具合并雪碧图、CSS、JavaScript文件等都是为了减少HTTP资源请求次数。另外也要尽量避免重复的资源，防止增加多余请求。
2. 减小HTTP请求大小
除了减少HTTP资源请求次数，也要尽量减小每个HTTP请求的大小。如减少没必要的图片、JavaScript、CSS及HTML代码，对文件进行压缩优化，或者使用gzip压缩传输内容等都可以用来减小文件大小，缩短网络传输等待时延。
3. 将CSS或JavaScript放到外部文件中，避免使用
18. meta dns prefetch设置DNS预解析
meta dns prefetch设置DNS预解析设置文件资源的DNS预解析，让浏览器提前解析获取静态资源的主机IP，避免等到请求时才发起DNS解析请求。通常在移动端HTML中可以采用如下方式完成。
19. 资源预加载
对于移动端首屏加载后可能会被使用的资源，需要在首屏完成加载后尽快进行加载，保证在用户需要浏览时已经加载完成，这时候如果再去异步请求就显得很慢。
20. 首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化
由于移动端网络速度相对较慢，网络资源有限，因此为了尽快完成页面内容的加载，需要保证首屏加载资源最小化，非首屏内容使用滚动的方式异步加载。一般推荐移动端页面首屏数据展示延时最长不超过3秒。推荐首屏所有资源大小不超过 1014KB，即大约不超过 1MB。
页面渲染类
1. 把CSS资源引用放到HTML文件顶部
一般推荐将所有CSS资源尽早指定在HTML文档中，这样浏览器可以优先下载CSS并尽早完成页面渲染。
2. JavaScript资源引用放到HTML文件底部
JavaScript资源放到HTML文档底部可以防止JavaScript的加载和解析执行对页面渲染造成阻塞。由于JavaScript资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞HTML DOM解析和CSS渲染的过程。
3. 尽量预先设定图片等大小
在加载大量的图片元素时，尽量预先限定图片的尺寸大小，否则在图片加载过程中会更新图片的排版信息，产生大量的重排
4. 不要在HTML中直接缩放图片
在HTML中直接缩放图片会导致页面内容的重排重绘，此时可能会使页面中的其他操作产生卡顿，因此要尽量减少在页面中直接进行图片缩放。
5. 减少DOM元素数量和深度
HTML中标签元素越多，标签的层级越深，浏览器解析DOM并绘制到浏览器中所花的时间就越长，所以应尽可能保持DOM元素简洁和层级较少。
6. 尽量避免在选择器末尾添加通配符
CSS解析匹配到渲染树的过程是从右到左的逆向匹配，在选择器末尾添加通配符至少会增加一倍多计算量。
7. 减少使用关系型样式表的写法
直接使用唯一的类名即可最大限度的提升渲染引擎绘制渲染树等效率
8. 尽量减少使用JS动画
JS直接操作DOM极容易引起页面的重排
9. CSS 动画使用translate、scale代替top、height
尽量使用CSS3的translate、scale属性代替top、left和height、width，避免大量的重排计算