1.DNS預(yù)解析
通過 DNS 預(yù)解析來告訴瀏覽器未來我們可能從某個特定的 URL 獲取資源,圖片或音頻資源等
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href=" http://www.example.com 填入預(yù)解析的網(wǎng)址">
2.預(yù)加載靜態(tài)資源prefetch
<link rel="prefetch prerender" ><!--加載靜態(tài)的資源-->
3.預(yù)連接 Preconnect
使用 preconnect 告訴瀏覽器我們需要進(jìn)行哪些網(wǎng)站的預(yù)連接乳幸,減少DNS開銷飞袋,預(yù)先建立socket連接
<link rel="preconnect" >
4.預(yù)獲取 Prefetching?
如果我們確定某個資源將來一定會被使用到蔗包,我們可以讓瀏覽器預(yù)先請求該資源并放入瀏覽器緩存中魂挂。例如甫题,一個圖片和腳本或任何可以被瀏覽器緩存的資源:
<link rel="prefetch" href="image.png"> 低優(yōu)先級的資源預(yù)加載
Subresources
這是另一個預(yù)獲取方式,這種方式指定的預(yù)獲取資源具有最高的優(yōu)先級涂召,在所有 prefetch 項之前進(jìn)行:例如字體文件
<link rel="subresource" href="styles.css">
如果資源是當(dāng)前頁面必須的坠非,或者資源需要盡快可用,那么最好使用?subresource?而不是?prefetch
5.預(yù)渲染 Prerender
這是一個核武器果正,因為 prerender 可以預(yù)先加載文檔的所有資源:
<link rel="prerender" >
關(guān)于性能優(yōu)化
1炎码、http://www.w3cdream.com/content-sort-21-article-578.html
2盟迟、http://ddtalk.github.io/blog/2015/09/07/dingding-first/
3、https://csspod.com/frontend-performance-best-practices/
4辅肾、http://dev.cmcm.com/archives/312