DNS预获取dns-prefetch提升网页加载速度

2019-04-1169次阅读

DNS请求需要的带宽非常小,但是延迟却有点高,这点在手机网络上特别明显。预读取DNS能让延迟明显减少一些,例如页面中的图片、静态资源等。 

在某些浏览器中这个预读取的行为将会与页面实际内容并行发生(而不是串行),这样可以极大的加速(尤其是移动网络环境下)页面的加载。

在某些图片较多的页面中,在发起图片加载请求之前预先把域名解析好将会有至少5%的图片加载速度提升。所以在HTML里面加入DNS Prefetch 则会让浏览器提前进行DNS的解析并且缓存到系统中,这样就可以提升网页的加载速度,这种DNS预获取方式能减少用户的等待时间,提升用户体验 。

可以通过使用<link>标签的rel属性值来对特定域名进行预读取,推荐尽量放在网页的前面,例如放在<meta charset="UTF-8">后面。

<link rel="dns-prefetch" href="https://static.xinran001.com/">

<link>元素也可以使用不完整的URL的主机名来标记预解析,但这些主机名前必需要有双斜线:

<link rel="dns-prefetch" href="//static.xinran001.com">

当然你也可以通过<meta>标签X-DNS-Prefetch-Control 报头来关闭DNS预解析:

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

 

上一篇: Document.scrollingElement获取设置网页窗体滚动高度  下一篇: 深入理解浏览器的缓存机制(转载)  

DNS预获取dns-prefetch提升网页加载速度相关文章