點開淘寶,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:關閉