前端DNS预读取

点开淘宝，F12看到淘宝head 元素里有这么一个代码
在这里插入图片描述

<link rel="dns-prefetch" href="//res.mmstat.com">

dns-prefetch 字面理解就是 dns预取或者预解析，解析后存储在缓存里，一次dns查询一次的时间大概能在60-120ms，对于复杂的网页，分秒必争，也算时间长了。
如此通过rel="dns-prefetch"可以将当前网页中超链接涉及到域名提前解析，当user去点击时，就能节省时间快速打开。

chrome 查看dns缓存

chrome://net-internals/#dns

在这里插入图片描述
这里清除缓存

具体查看
在这里插入图片描述
通过 chrome://net-export
保存文件

保存log文件打开如下
在这里插入图片描述
然后刷新淘宝网页

停止日志输入，打开日志如下

文件末尾有轮询数据

格式化polledData，查看缓存记录

比如

"hostname":"dfhs.tanx.com"

全局搜索文件如下
在这里插入图片描述
这种查看方法的确麻烦
用https://netlog-viewer.appspot.com 这个解析日志文件

在这里插入图片描述

单独写一个html

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="format-detection" content="telephone=no,address=no">
  <meta name="apple-mobile-web-app-status-bar-style" content="white">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
  <title></title>
  <link rel="dns-prefetch" href="//dfhs.tanx.com">
</head>
<body>
  <div id="app"></div>
</body>
</html>

在这里插入图片描述
ps:
预取并没有使用到浏览器的网络解析，利用系统dns解析，并行处理，这样对当前网页网络解析就不会造成阻。

通过meta控制预读取功能

<meta http-equiv="x-dns-prefetch-control" content="off">
on: 启用
off：关闭

西游不取经

原创文章 60 获赞 17 访问量 21万+

关注私信

猜你喜欢