最近在了解服務(wù)端渲染和客戶端渲染的時(shí)候妓盲,會(huì)打開我們熟知的某寶和某東,右鍵
查看源代碼
作對(duì)比专普,發(fā)現(xiàn)他們都有用dns-prefetch這個(gè)在頭部的link
的資源鏈接悯衬,??還記得只要是帶這種pre-
(預(yù))的似乎都是跟性能優(yōu)化相關(guān)的
??它是什么
dns-prefetch
直譯就是dns預(yù)獲取,是嘗試在請(qǐng)求資源之前檀夹,解析域名筋粗;作為后面可能會(huì)訪問到的資源鏈接。
這里放一下dns解析的過程圖
??為什么用它
當(dāng)瀏覽器從第三方服務(wù)器拿資源時(shí)炸渡,必須將域名解析為IP地址(也就是DNS解析尋址的過程)娜亿。當(dāng)一個(gè)網(wǎng)站,打開了許多第三方鏈接蚌堵,dns解析可能會(huì)造成一定程度的延遲买决,dns-prefetch
可以掩蓋dns解析的延遲
??使用
1.dns-prefetch
html入口處添加
//入口html手動(dòng)添加相關(guān)代碼
<link rel="dns-prefetch" >
每次引用跨域站點(diǎn)的資源時(shí),都應(yīng)該在head頭部放置dns-prefetch
提示需要預(yù)解析
-
prefetch
吼畏、preload
結(jié)合webpack配置
當(dāng)結(jié)合框架使用的時(shí)候督赤,一般是在webpack打包配置項(xiàng)里,結(jié)合插件preload-webpack-plugin
泻蚊,做對(duì)應(yīng)的配置躲舌,vue項(xiàng)目可參考這里
// pre
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
as(entry) {
if (/\.css$/.test(entry)) return 'style';
if (/\.woff$/.test(entry)) return 'font';
if (/\.png$/.test(entry)) return 'image';
return 'script';
}
})
]
??兼容性
??rel屬性
rel
屬性命名鏈接文檔與當(dāng)前文檔的關(guān)系,常見的是性雄,
- 鏈接一個(gè)外部的樣式表
- 或者用于表示没卸,不同移動(dòng)平臺(tái)上特殊的圖標(biāo)類型
// 某寶網(wǎng)站圖標(biāo)
<link
href="[//img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png]
(https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png)"
rel="apple-touch-icon-precomposed"
/>
-
pre-*
等關(guān)于性能和安全特性的屬性
?拓展:preload & prefetch
- 除了介紹的這里介紹的dns-prefetch羹奉,還有兩種:將
rel
設(shè)定為preload
,表示瀏覽器應(yīng)該預(yù)加載該資源 (用rel="preload"預(yù)加載內(nèi)容) 约计。以及prefetch
他倆其實(shí)都是表示一種預(yù)加載的行為诀拭,兩者大致的區(qū)別是:
- preload是對(duì)應(yīng)一定會(huì)加載的資源,并強(qiáng)制將它的請(qǐng)求優(yōu)先級(jí)提到前面病蛉,可用于網(wǎng)頁字體文件的加載(避免font文件在其他文件后加載完炫加,可能會(huì)影響用戶體驗(yàn))瑰煎;
也就是大部分場(chǎng)景下無需特意使用preload铺然,而是類似字體文件這種隱藏在腳本、樣式中的首屏關(guān)鍵資源 - prefetch是對(duì)應(yīng)后面可能會(huì)加載的資源酒甸,比如在首頁加載的時(shí)候魄健,會(huì)把首頁的某個(gè)彈窗里的圖片資源請(qǐng)求到,然后打開彈窗的時(shí)候插勤,會(huì)直接從prefetch緩存里面去拿沽瘦;
異步加載的模塊(典型的如單頁系統(tǒng)中的非首頁),或者农尖,大概率即將被訪問到的資源可以使用prefetch