使用dns-prefetch做DNS预获取提高前端性能，dns-prefetch、prerender、prefetch、preload

参考链接 ： CDN预加速

问题：怎么提升网站性能？

dns域解析，是提升网站的一个办法。

DNS Prefetch，即DNS预获取，是前端优化的一部分。

一般来说，在前端优化中与 DNS 有关的有两点：

一.  是减少DNS的请求次数

二. 是进行DNS预获取

目前大多数浏览器已经支持此属性，支持版本如下：

• – Safari: 5+
• – Chrome: All
• – Firefox: 3.5+
• – Opera: Unknown
• – IE: 9+ (called “Pre-resolution” on blogs.msdn.com)

其中 Chrome 和 Firefox 3.5+ 内置了 DNS Prefetching 技术并对DNS预解析做了相应优化设置。所以 即使不设置此属性，Chrome 和 Firefox 3.5+ 也能自动在后台进行预解析 。

 

dns  Prefetch 应该尽量的放在网页的前面，推荐放在 <meta charset="UTF-8"> 后面。具体使用方法如下：

1	< meta  http-equiv="x-dns-prefetch-control" content="on">< br >< link  rel=”dns-prefetch” href=”//static.360buyimg.com”>　　< br >< link  rel=”dns-prefetch” href=”//img.360buyimg.com”>

 

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

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

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

dns-prefetch
DNS prefetch，即DNS预获取。前端优化中与DNS有关的两点：一个是减少DNS的请求次数，另一个是进行DNS预获取。

DNS预获取可以加快页面渲染速度，无需用户点击链接就能在后台解析，所以能减少用户的等待时间，提升用户体验；

默认情况下，浏览器会对当前页面中和当前域名（正在浏览网页的域名）不在同一个域的域名进行预获取，并且缓存结果，这就是隐式的DNS Prefetch。目前大多数浏览器已经支持此属性（IE9+）；例如：

<!– 开启DNS预获取 –>
<meta http-equiv=”x-dns-prefetch-control” content=”on”>
<!– 设置DNS预获取的域名 –>
<link rel=”dns-prefetch” href=”//g.alicdn.com” />
preload
浏览器会在遇到如下link标签时，立刻开始下载main.js(不阻塞 non-render-blocking )，并放在内存中，但不会执行其中的JS语句。只有当遇到script标签加载的也是main.js的时候，浏览器才会直接将预先加载的JS执行掉。

使用 as 来指定将要预加载的内容的类型，将使得浏览器能够：

更精确地优化资源加载优先级。
匹配未来的加载需求，在适当的情况下，重复利用同一资源。
为资源应用正确的内容安全策略。
为资源设置正确的 Accept 请求头。
as的取值如下：
audio: 音频文件。
document: 一个将要被嵌入到<frame>或<iframe>内部的HTML文档。
embed: 一个将要被嵌入到<embed>元素内部的资源。
fetch: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。
font: 字体文件。
image: 图片文件。
object: 一个将会被嵌入到<embed>元素内的文件。
script: JavaScript文件。
style: 样式表。
track: WebVTT文件。
worker: 一个JavaScript的web worker或shared worker。
video: 视频文件。
<!– 跨域请求文件需要设置crossorigin, 如果是字体文件即使不跨域也需要设置 –>
<link rel=”preload” href=”fonts/cicle_fina-webfont.eot” as=”font” type=”application/vnd.ms-fontobject” crossorigin=”anonymous”>
preconnect
浏览器要建立一个连接，需要经过DNS查找，TCP三次握手和TLS协商（https需要)，这些过程需要相当的耗时，所以preconnect，就是一项使浏览器预先建立一个连接（包含DNS查找，TCP三次握手和TLS协商)，等真正需要加载资源的时候能直接请求；

<link rel=”preconnect” href=”//example.com”>
<link rel=”preconnect” href=”//cdn.example.com” crossorigin>
浏览器会进行以下步骤：
* 解释href的属性值，如果是合法的URL，然后继续判断URL的协议是否是http或者https否则就结束处理
* 如果当前页面host不同于href属性中的host,crossorigin其实被设置为anonymous(就是不带cookie了)，如果希望带上cookie等信息可以加上crossorign属性,corssorign就等同于设置为use-credentials

prefetch
设置此值能让浏览器预加载一个资源（html，js，css或图片），可以让用户跳转到其他页面时，响应速度更快。例如：

<link rel=”prefetch” href=”//example.com/next-page.html” as=”html” crossorigin=”use-credentials”>
<link rel=”prefetch” href=”/library.js” as=”script”>
注意： 虽然是预加载了，但是页面不会解析或者JS是不会直接执行的。

prerender
而prerender不仅会加载资源，还会解执行页面，进行预渲染，但是这都是根据浏览器自身进行判断。
浏览器可能会

分配少量资源对页面进行预渲染
挂起部分请求直至页面可见时
可能会放弃预渲染，如果消耗资源过多等等情况。。。
<link rel=”prerender” href=”//example.com/next-page.html”>
prefretch 与 preload区别
Both prefetch and preload declare a resource and its fetch properties, but differ in how and when the resource is fetched by the user agent: prefetch is an optional and low-priority fetch for a resource that might be used by a subsequent navigation; preload is a mandatory and high-priority fetch for a resource that is necessary for the current navigation. Developers should use each one accordingly to minimize resource contention and optimize load performance.

 

转载请注明：前端Tree » 使用dns-prefetch做DNS预获取提高前端性能，dns-prefetch、prerender、prefetch、preload

喜欢 (0)