前端性能优化

1.域名发散与域名收敛

域名收敛：将静态资源只放在一个域名下面，减少域名数量可以降低 DNS 解析的成本。
域名发散：而非发散情况下的多个域名下，由于浏览器的限制，每个浏览器，允许对每个域名的连接数一般是有上限的，浏览器不同，允许并行连接数一般为6个，通常将静态资源分布在几个不同域，保证资源最完美地分域名存储，以提供最大并行度，让客户端加载静态资源更为迅速。
DNS 解析其实是一个很复杂的过程，在 PC 上，常采用域名发散策略，是因为在 PC 端上，DNS 解析通常而言只需要几十 ms ，可以接受。而移动端，2G 网络，3G网络，4G网络/wifi 强网，而且移动 4G 容易在信号不理想的地段降级成 2G ，通过大量的数据采集和真实网络抓包分析（存在DNS解析的请求），DNS的消耗相当可观，2G网络大量5-10s，3G网络平均也要3-5s（数据来源于淘宝）

2.meta dns prefetch设置DNS预解析

设置文件资源的DNS预解析，能让浏览器提前解析获取静态资源的主机IP，避免等到请求的时候才发起DNS解析。

<!-- cdn域名预解析 -->
<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel="dns-prefetch" href="//x.autoimg.cn">

3.首屏加载保证首屏内容最小化

由于移动端网络相对较慢，网络资源有限，因此为了保证尽快完成页面内容的加载，需要保证首屏加载资源的最小化，一般推荐移动端页面首屏数据展示延迟不超过3秒。

4.资源预加载

首屏加载完成后可能会使用的资源，我们可以用 link标签声明特定文件的预加载(缓存的资源才进行预加载)

<link rel='subresource' href='a.css'>
<link rel='prefetch' href='a.js'>

5.预渲染

预渲染意味着我们提前加载好用户即将访问的下一个页面，否则进行预渲染这个页面将浪费资源，慎用！

<link rel='prerender' href='http://www.pagetoprerender.com'> >

rel='prerender' 表示浏览器会帮我们渲染但隐藏指定的页面，一旦我们访问这个页面，则秒开了！

6.合理利用浏览器缓存

保存ajax返回的数据、CSS或JS等静态资源，实现移动端的离线应用，尽可能的减少网络请求，保证静态资源内容的快速加载。

7.图片处理

把图片转成base64编码嵌入到html页面或者CSS文件中，这样可以减少页面的HTTP请求数，图片懒加载，iconfont代替图片图标

8.减少HTTP请求次数，减少HTTP请求大小

建议尽可能的根据需要去合并静态资源图片、JavaScript代码和CSS文件，减少页面请求数，这样可以缩短页面首次访问的等待时间，另外也要尽量的避免重复资源，防止增加多余的请求，把CSS和JS文件module形式引入，对文件进行压缩优化，开启GZIP压缩传输内容

9.CDN

10.spa页面按需加载

11.把CSS资源引用放到HTML文件顶部

12.JavaScript文件引用放到HTML文件底部

异步加载资源，防止JavaScript的加载和解析执行对页面渲染造成阻塞，阻塞HTML DOM解析和CSS渲染过程

13.减少DOM元素数量和深度

不滥用float，在DOM渲染树生成后的布局渲染阶段，使用float的元素布局计算比较耗性能，所以尽量减少float的使用，推荐使用固定布局或者flex布局的方式来实现页面的元素布局，

14.其他

避免使用CSS表达式和CSS滤镜，requestAnimationFrame等更高效的动画实现方式，避免使用settimeout、setInterval等方式直接处理连续动画