博主微信:jiayou321xiaoyu 加微信,备注:前端Tree

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

javascript admin 484℃ 0评论
参考链接 : 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)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址