減小JS下載時間

核心:減小JS下載時間

預先解析DNS

很是簡單,效果立竿見影,加快頁面加載時間,多用於預解析CDN的地址的DNSjavascript

<!--在head標籤中,越早越好-->
<link rel="dns-prefetch" href="//example.com">

Preload

瀏覽器會在遇到以下link標籤時,馬上開始下載main.js(不阻塞parser),並放在內存中,但不會執行其中的JS語句。 只有當遇到script標籤加載的也是main.js的時候,瀏覽器纔會直接將預先加載的JS執行掉。html

<link rel="preload" href="/main.js" as="script">

Prefetch

瀏覽器會在空閒的時候,下載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>
相關文章
相關標籤/搜索