所謂 File Prefetching 就是在一個頁面加載成功後,默默去預加載後續可能會被訪問到的頁面的資源。
前端資源預加載其實沒啥新鮮的,我們倒騰這個事情的過程卻是很有有意思也很有啓發性。
第一個版本,簡單粗暴有點痛
1、建一個獨立的頁面,裏面索引了各種需要預加載的css、js,代碼類似下面這樣。
html
head
link rel="stylesheet" hre
發現
很多人都知道現代瀏覽器都支持 DNS 的預解析,學名:DNS Prefetching。用法也很簡單,就是在html代碼里加入這樣的 link 標籤
link rel="dns-prefetch" href="//delai.me"
我們之前的用法是在 Head 為2個 靜態資源服務器的域名 和 日誌圖片的域名 建了3條 dns-prefetch link。
link rel="dns-pre