预加载系列一：DNS Prefetching 的正确使用姿势
发现
很多人都知道现代浏览器都支持 DNS 的预解析，学名：DNS Prefetching。用法也很简单，就是在html代码里加入这样的 link 标签
<link rel="dns-prefetch" href="//delai.me">我们之前的用法是在 Head 为2个 静态资源服务器的域名 和 日志图片的域名 建了3条 dns-prefetch link。
<link rel="dns-prefetch" href="//tj.koudaitong.com/" />
<link rel="dns-prefetch" href="//imgqn.koudaitong.com/" />
<link rel="dns-prefetch" href="//kdt-static.qiniudn.com/" />我最近给移动web 关键静态资源做 File Prefetching，顺手看了下Chromium 和 Firefox 关于 DNS Prefetching 的官方文档 看到这么一句：
Manual Prefetch
Chromium uses the "href" attribute of hyperlinks to find host names to prefetch. However, some of those hyperlinks may be redirects, for example if the site is trying to count how many times the link is clicked. In those situations, the "true" targeted domain is not necessarily discernible by examining the content of a web page, and so Chromium not able to prefetch the final targeted domain.
上面这段文字包含两个信息：
chrome 会自动把当前页面的所有带href的link的dns都prefetch一遍
需要手动添加link标签的场景是：你预计用户在后面的访问中需要用到当前页面的所有链接都不包含的域名
看来，我们原先的姿势是不对的~
验证
我写了一个测试页面，代码是这样的：
<html>
<head></head>
<body><a href="http://a.youzan.com">a</a><a href="http://b.youzan.com">b</a><a href="http://c.youzan.com">c</a><a href="http://d.youzan.com">d</a>
</body>
</html>在chrome里打开他，然后访问 chrome://histograms/DNS.PrefetchQueue ，看到如下统计结果
当然，上图并不能说明什么问题，只能看出：从启动chrome到访问刚刚这个测试页面，一共有88次dns prefetching，其中67次直接命中耗时0ms，有4次耗时5ms。不过，如果把测试页面改成下面这个样子再跑一次就有点意思了：
<html>
<head></head>
<body><a href="http://a.youzan.com">a</a><a href="http://b.youzan.com">b</a><a href="http://c.youzan.com">c</a><a href="http://d.youzan.com">d</a><a href="http://a1.youzan.com">a1</a><a href="http://b1.youzan.com">b1</a><a href="http://c1.youzan.com">c1</a><a href="http://d1.youzan.com">d1</a><a href="http://a2.youzan.com">a2</a><a href="http://b2.youzan.com">b2</a><a href="http://c2.youzan.com">c2</a><a href="http://d2.youzan.com">d2</a><a href="http://a3.youzan.com">a3</a><a href="http://b3.youzan.com">b3</a><a href="http://c3.youzan.com">c3</a><a href="http://d3.youzan.com">d3</a><a href="http://a4.youzan.com">a4</a><a href="http://b4.youzan.com">b4</a><a href="http://c4.youzan.com">c4</a><a href="http://d4.youzan.com">d4</a>
</body>
</html>统计结果变成了：
可以看出：因为页面里有20个a标签带href属性，chrome做了20次dns prefetching，其中耗时为0的次数比之前加了4，那是因为头4个域名在上一次跑测试页面的时候已经被prefetch过了本地已经有记录，直接命中。其余的16个dns prefetching 耗时基本上离散分布不甚相同。
结论
实际情况如文档所说，我的理解也是对，我们之前的使用姿势确实有点问题。
正确的使用姿势是
1.对静态资源域名做手动dns prefetching。
2.对js里会发起的跳转、请求做手动dns prefetching。
3.不用对超链接做手动dns prefetching，因为chrome会自动做dns prefetching。
4.对重定向跳转的新域名做手动dns prefetching，比如：页面上有个A域名的链接，但访问A会重定向到B域名的链接，这么在当前页对B域名做手动dns prefetching是有意义的。
其他
1.假设页面Head里面有个css链接, 在当前页的Head里加上对应的手动dns prefetching的link标签，实际上并没有好处。
2.普遍来说合理的dns prefetching能对页面性能带来50ms ~ 300ms的提升，有人做了这方面的统计。
3.如chromium的官方文档所说，dns prefetching的网络消耗是极低极低的：
Each request typically involves sending a single UDP packet that is under 100 bytes out, and getting back a response that is around 100 bytes. This minimal impact on network usage is compensated by a significant improvement in user experience.
4.如chromium的官方文档所说，chrome使用8个线程专门做dns prefetching 而且chrome本身不做dns记录的cache，是直接从操作系统读dns —— 也就是说，直接修改系统的dns记录或者host是可以直接影响chrome的。
5.手动 dns prefetching 的代码实际上还是会增加html的代码量的，特别是域名多的情况下。
所以，最优的方案应该是：通过js初始化一个iframe异步加载一个页面，而这个页面里包含本站所有的需要手动dns prefetching的域名。事实上，我们已经这么做了，具体可以看这篇文章：《预加载系列二：让File Prefetching丝丝润滑无痛无痒》。
本文首发于我的
SegmentFault专栏：http://segmentfault.com/a/1190000004336839
个人技术博客：http://delai.me/code/file-frefetching/
转载请注明出处
预加载系列一：DNS Prefetching 的正确使用姿势相关推荐
- 5首页加载慢_UIViewController 预加载方案浅谈
作者 | hite,目前在网易严选iOS 组,主要工作内容 webview 相关,业余时间会写一些胡思乱想产品策划稿,各类游戏云玩家. 一. 引子 预加载作为常规性能优化手段,在所有性能敏感的场景都有 ...
- 前端性能优化之预加载
网络连接的快慢,是前端性能的瓶颈之一,在这里我们能做些什么呢,下面介绍几个通过浏览器特性来很容易提高资源加载速度的方法: DNS prefetching DNS解析的速度可用通过下面的标签来进行预解析 ...
- 前端性能优化－－预加载技术
当我们谈到前端的性能时,总是会提到比如合并.压缩.缓存或者在服务器上开启gzip之类的,目的都是为了让页面加载的更快. 资源预拉取(prefetch)则是另一种性能优化的技术.通过预拉取可以告诉浏览器 ...
- 2020-08-23 html的标签预加载 + css的新知识 + JS的json的标准格式 + 软技能的能说会道vs安静做事
2020-08-23 题目来源:http://www.h-camel.com/index.html [html] html的哪个标签可以预加载? 通过浏览器特性来提高资源加载速度的方法: 1.DNS ...
- 黄聪：WordPress实现HTML5预加载
WordPress实现HTML5预加载方法很简单,把下面代码: <?php if (is_archive() && ($paged > 1) && ($pa ...
- 如何通过预加载器提升网页加载速度
预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措.Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了 Alexa 排名前2000名网站,性能 ...
- 详解HTML5中rel属性的prefetch预加载功能使用
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效 ...
- 提升网页加载速度—预加载VS预读取
预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措.Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了 Alexa 排名前2000名网站,性能 ...
- 【Laravel笔记】12. 模型的预加载
关于 拾年之璐 微信公众号:知行校园汇,点击查看,欢迎关注 其他平台(点击蓝字可访问): GitHub | Gitee | 哔哩哔哩 | 语雀 | 简书 | 微信小程序 | 知行达摩院 本文专栏:La ...
最新文章
- IIS配置跨服务器迁移
- 2018-3-25论文(Grey Wolf Optimizer)自然界狼群的生活等级
- 未来社会是什么样子的？您猜对了吗？
- java匿名内部类的使用场景_java匿名内部类的使用场景
- linux .o文件 复制,Linux I/O实现文件复制
- java-设计模式（结构型）-【代理模式】
- java高级反射_反射---Java高级开发必须懂的
- javascript--函数（一）
- swagger隐藏实体类字段_你还在用 Swagger？试试这个神器！
- win10双显卡怎么切换amd和英特尔_win10双显卡怎么切换
- gps导航计算机毕业设计开题报告,GPS导航计算机毕业设计开题报告.doc
- 20191117每日一句 EVERYBODY DIES, BUT NOT EVERYBODY LIVES
- WordPress目录解析
- Android长截屏(滚动截屏)实现原理
- docker 之镜像制作dockerfile
- YY淘宝商品数据库设计
- linux 内核kenel优化方案一 -O3编译 Makefile
- 笔记：AVS2背景建模
- 说下类加载器与类加载？加载的信息放在哪个区域？
- 【技术邻】Icepak前处理 功能速览 | 技巧+应用