【web性能】dns-prefetch、prefetch暴心、preload

最近在了解服務(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解析的過程圖

dns解析過程.png

??為什么用它

當(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ù)解析

  1. 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';
    }
  })
]

??兼容性

dns-prefetch兼容性

??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

??參考

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末析恋,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子盛卡,更是在濱河造成了極大的恐慌助隧,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件滑沧,死亡現(xiàn)場(chǎng)離奇詭異并村,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)滓技,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門哩牍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人令漂,你說我怎么就攤上這事膝昆。” “怎么了叠必?”我有些...
    開封第一講書人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵外潜,是天一觀的道長。 經(jīng)常有香客問我挠唆,道長处窥,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任玄组,我火速辦了婚禮滔驾,結(jié)果婚禮上谒麦,老公的妹妹穿的比我還像新娘。我一直安慰自己哆致,他們只是感情好绕德,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著摊阀,像睡著了一般耻蛇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上胞此,一...
    開封第一講書人閱讀 49,166評(píng)論 1 284
  • 那天臣咖,我揣著相機(jī)與錄音,去河邊找鬼漱牵。 笑死夺蛇,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的酣胀。 我是一名探鬼主播刁赦,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼闻镶!你這毒婦竟也來了甚脉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬榮一對(duì)情侶失蹤铆农,失蹤者是張志新(化名)和其女友劉穎牺氨,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體顿涣,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡波闹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了涛碑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片精堕。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖蒲障,靈堂內(nèi)的尸體忽然破棺而出歹篓,到底是詐尸還是另有隱情,我是刑警寧澤揉阎,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布庄撮,位于F島的核電站,受9級(jí)特大地震影響毙籽,放射性物質(zhì)發(fā)生泄漏洞斯。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一坑赡、第九天 我趴在偏房一處隱蔽的房頂上張望烙如。 院中可真熱鬧么抗,春花似錦、人聲如沸亚铁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽徘溢。三九已至吞琐,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間然爆,已是汗流浹背站粟。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留施蜜,地道東北人卒蘸。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓雌隅,卻偏偏與公主長得像翻默,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子恰起,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容