前端效能優化 資源預載入

2021-09-13 11:22:39 字數 1515 閱讀 5542

預載入是瀏覽器對將來可能被使用資源的一種暗示，一些資源可以在當前頁面使用到，


一些可能在將來的某些頁面中被使用。作為開發人員，我們比瀏覽器更加了解我們的


應用，所以我們可以對我們核心資源使用該技術。
當提到前端效能優化時，我們首先會聯想到檔案的合併，壓縮，檔案快取和開啟服務端的gzip壓縮等，這使得頁面載入更快，使用者可以盡快使用我們的web應用來達到他們的目標。

資源預載入是另乙個效能優化技術，我們可以使用該技術來預先告知瀏覽器某些資源可能在將來會被使用。

以前這種實踐被稱為prebrowsing。但這並不是一種單一的技術，實際上可以拆分成很多小點：dns-prefetch, subresource, prefetch, preconnect和prerender

dns-prefetch通過指定具體的url來告知客戶端未來會用到的相關資源，這樣瀏覽器可以盡早的解析dns.
例如，我們將來可能從example.com獲取或者音訊資源，那麼可以在文件頂部的標籤加入以下內容：

通過簡單的一行**就可以告知那些相容的瀏覽器進行dns預解析，這意味著瀏覽器真正請求該域中的某個資源時，dns的解析就已經完成了。 專案中有用到第三方的**時這麼做尤其有益，其他的使用場景，比如當靜態資源和html不在乙個域上，而在cdn上，又比如在重定向前加以加上dns prefetch

與dns預解析類似，preconnect不僅完成dns預解析，同時還將進行tcp握手和建立傳輸層協議。
用法如下：

現在瀏覽器都試著****將來需要哪些 連線，然後預先建立socket連線，從而消除昂貴的dns查詢，tcp握手和tls往返開銷。然而，瀏覽器還不夠聰明，並不能準確準確**每個**的所有預鏈結目標。好在，在firefox 39 和chrome 46 中我們可以使用preconect告訴瀏覽器我們需要進行哪些預鏈結。

subresources是另乙個預獲取的方式，這種方式指定的預獲取資源具有最高的優先順序，在所有prefetch項之前進行
rel=prefetch 為將來的頁面提供了一種低優先順序的資源預載入方式

rel=subresource 為當前頁面提供了一種高優先順序的資源預載入

所在，如果資源是當前頁面必須的，或者資源需要盡快可用，那麼最好使用subresource而不是prefetch

用法如下：

這是乙個核**，因為prerender 可以預先載入文件的所有資源。google 搜尋在其即時搜尋頁面中已經應用該技術多年了，微軟也宣稱將在 ie11 中支援該特性。

preload 是乙個新規範，該規範還沒有被所有瀏覽器相容。

preload 建議允許始終預載入某些資源，不像prefetch有可能被瀏覽器忽略，瀏覽器必須請求preload標記的資源。

用法如下：

前端效能優化 資源預載入

預載入是瀏覽器對將來可能被使用資源的一種暗示，一些資源可以在當前頁面使用到，一些可能在將來的某些頁面中被使用。作為開發人員，我們比瀏覽器更加了解我們的應用，所以我們可以對我們的核心資源使用該技術。預載入可以拆分成很多小點 dns prefetch,subresource,prefetch,preco...

前端效能優化 預載入

1.什麼是預載入 資源預載入是另乙個效能優化技術，我們可以使用該技術來預先告知瀏覽器某些資源可能在將來會被使用到。預載入簡單來說就是將所有所需的資源提前請求載入到本地，這樣後面在需要用到時就直接從快取取資源。2.為什麼要用預載入 在網頁全部載入之前，對一些主要內容進行載入，以提供給使用者更好的體驗，...

前端效能優化之預載入

網路連線的快慢，是前端效能的瓶頸之一，在這裡我們能做些什麼呢，下面介紹幾個通過瀏覽器特性來很容易提高資源載入速度的方法 dns prefetching dns解析的速度可用通過下面的標籤來進行預解析 1 linkrel dns prefetch href preconnect 和dns預解析差不多，...