Web性能優化：prefetch, prerender

jopen 9年前發布 | 32K 次閱讀 Web性能 前端技術

本文從預加載的角度介紹如何優化頁面載入和渲染的性能，在展開內容之前先了解一下瀏覽器顯示頁面的過程：首先是DNS解析，然后建立TCP連接，接著下載HTML內容以及資源文件，最后才是整個頁面的渲染。如圖：

圖片來源：https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present?slide=id.gc03305a_0106

預加載和緩存是兩個概念，緩存通常使用304響應狀態碼來標識，參考文章：怎樣理解HTTP狀態碼？。

</blockquote>

這四個階段必須是串行的，任何一步的延遲都會最終影響到頁面加載時間。但瀏覽器在這方面已經做了很多優化，例如它會猜測你將要打開的頁面，并預先解析DNS甚至直接下載它們。但瀏覽器猜測的能力是有限的，作為Web開發者我們可以通過dns-prefetch,subresource,prefetch,prerender等指令來幫助瀏覽器優化性能。

dns-prefetch

dns-prefetch可以指示瀏覽器去預先解析DNS域名。這樣可以減少將要打開頁面的延遲， 

<head>
  <link rel='dns-prefetch' href='example.com'>
  ...
</head>

對于重定向也是有用的，比如對于：host1.com/resource > 301 > host2.com/resource 也可以設置dns-prefetch: host2.com來省去最后一個頁面訪問的DNS延遲。

prefetch

prefetch用來初始化對后續導航中資源的獲取。prefetch指定的資源獲取優先級是最低的。 

<head>
  <link rel="prefetch" href="checkout.html">
  ...
</head>

subresource

subresource用來標識出重要的資源，瀏覽器會在當前訪問頁面時立即下載它們。 

<head>
  <link rel="subresource" href="critical/app.js">
  ...
</head>

subresource的語義是當前頁面的子資源，瀏覽器會立即下載它們。 subresource的優先級高于prefetch。參見： http://stackoverflow.com/questions/29475854/what-is-link-rel-subresource-used-for

prerender

合適的適合，你甚至可以用prerender來讓瀏覽器在后臺事先渲染好整個頁面，這樣它的打開速度將會是0秒！ 

<head>
  <link rel="prerender" href="checkout.html">
  ...
</head>

因為要渲染整個頁面，所以它需要的所有資源也會被全部下載。如果里面的JS需要在頁面顯示時運行，可以通過頁面可見性API來實現。當然只有GET才是可以預先渲染的，預渲染POST當然是不安全的。

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！