前端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:關閉
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章