前端性能优化

1. X-DNS-Prefetch-Control

使用 <meta http-equiv="x-dns-prefetch-control" content="on">

根据官方解释：X-DNS-Prefetch-ControlHTTP 响应头控制 DNS 预取功能通过对用户可以选择跟随，以及通过在文档，包括图片，CSS，JavaScript 和等参考项的 URL 都链接浏览器主动进行域名解析。

该预取在后台执行，以便在需要引用项目时 DNS 可能已经解决。这可以减少用户点击链接时的等待时间。

当浏览器请求一个URL的时候，大概有以下几个过程：阻挡、域名解析、建立连接、发送请求、等待响应、接收数据。后面四个跟用户的网络情况和你的服务器处理速度有关

阻挡：解决方案——提高浏览器并发连接数
不同的浏览器对单个域名的最大并发连接数有一定的限制，HTTP/1.0和HTTP/1.1也不相同。比如HTTP/1.1协议下，IE6的并发连接数限制是2个；而在HTTP/1.0下，IE6的并发连接数可以达到4个。在其它浏览器也有类似的限制，一般是4~8个。这个时候，如果浏览器同时对某一域名发起多个请求，超过了限制就会出现等待，也就是阻挡。

　　那么为了解决阻挡这一问题，我们可以对某些URL的域名分散处理，比如我们的图片域名，一般用类似img.guoweiwei.com的域名，当一个页面包含20多张图片的时候，那至少有10几个请求会被阻挡，而如果我们分散到img0.guoweiwei.com/img1.guoweiwei.com/img2.guoweiwei.com/…等不同域名的时候，至少这20个图片请求会并发进行，网站打开速度会明显提升很多。类似的，可以对一些css/js的域名同样处理

比如 小米pc官网 https://www.mi.com/ 有如下配置就可以解决阻挡问题
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//s01.mifile.cn" />
<link rel="dns-prefetch" href="//c1.mifile.cn" />
<link rel="dns-prefetch" href="//i3.mifile.cn" />
<link rel="dns-prefetch" href="//i2.mifile.cn" />
<link rel="dns-prefetch" href="//i1.mifile.cn" />
<link rel="dns-prefetch" href="//i8.mifile.cn" />
<link rel="dns-prefetch" href="//v.mifile.cn" />
<link rel="dns-prefetch" href="//a.huodong.mi.cn" />

（1）、用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" content="on" />

(2)、在页面header中使用link标签来强制对DNS预解析: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

注：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数。

需要注意的是，虽然使用 DNS Prefetch 能够加快页面的解析速度，但是也不能滥用，因为有开发者指出 禁用DNS 预读取能节省每月100亿的DNS查询 。

如果需要禁止隐式的 DNS Prefetch，可以使用以下的标签：

<meta http-equiv="x-dns-prefetch-control" content="off">