很是簡單,效果立竿見影,加快頁面加載時間,多用於預解析CDN的地址的DNSjavascript
<!--在head標籤中,越早越好--> <link rel="dns-prefetch" href="//example.com">
瀏覽器會在遇到以下link標籤時,馬上開始下載main.js(不阻塞parser),並放在內存中,但不會執行其中的JS語句。 只有當遇到script標籤加載的也是main.js的時候,瀏覽器纔會直接將預先加載的JS執行掉。html
<link rel="preload" href="/main.js" as="script">
瀏覽器會在空閒的時候,下載main.js, 並緩存到disk。當有頁面使用的時候,直接從disk緩存中讀取。其實就是把決定是否和什麼時間加載這個資源的決定權交給瀏覽器。java
若是prefetch還沒下載完以前,瀏覽器發現script標籤也引用了一樣的資源,瀏覽器會再次發起請求,這樣會嚴重影響性能的,加載了兩次,,因此不要在當前頁面立刻就要用的資源上用prefetch,要用preload。瀏覽器
<link href="main.js" rel="prefetch">
前面兩節幫咱們弄懂了JS的下載和執行時機,那什麼樣的頁面纔是完美符合現代瀏覽器的那?其實關鍵在於的preload和prefetch!提早告知瀏覽器,咱們的網站立刻要用的是什麼,之後可能要用的是什麼,瀏覽器才能更快的渲染頁面。下面是一段實例代碼緩存
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Faster</title> <link rel="dns-prefetch" href="//cdn.com/"> <link rel="preload" href="//js.cdn.com/currentPage-part1.js" as="script"> <link rel="preload" href="//js.cdn.com/currentPage-part2.js" as="script"> <link rel="preload" href="//js.cdn.com/currentPage-part3.js" as="script"> <link rel="prefetch" href="//js.cdn.com/prefetch.js"> </head> <body> <script type="text/javascript" src="//js.cdn.com/currentPage-part1.js" defer></script> <script type="text/javascript" src="//js.cdn.com/currentPage-part2.js" defer></script> <script type="text/javascript" src="//js.cdn.com/currentPage-part3.js" defer></script> </body> </html>