前端效能優化 資源預載入

2021-09-11 10:22:33 字數 885 閱讀 4228

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

預載入可以拆分成很多小點:dns-prefetch, subresource, prefetch, preconnect和 prerender

dns預解析通過指定具體的url來告知客戶端未來會用到相關的資源,這樣瀏覽器可以盡早的解析dns。

1

預連線與 dns 預解析類似,preconnect 不僅完成 dns 預解析,同時還將進行 tcp 握手和建立傳輸層協議。

探測乙個網頁是否正在被prerender

1)開啟chrome task manager(chrome瀏覽器右上角三個點工具欄—>工具—>任務管理器)

2)載入乙個包含prerender的頁面

3)在chrome task manager中如果看到prerender打頭的任務,說明你的頁面正在被prerender。

科學上網點我:

前端效能優化 資源預載入

預載入是瀏覽器對將來可能被使用資源的一種暗示,一些資源可以在當前頁面使用到,一些可能在將來的某些頁面中被使用。作為開發人員,我們比瀏覽器更加了解我們的 應用,所以我們可以對我們核心資源使用該技術。當提到前端效能優化時,我們首先會聯想到檔案的合併,壓縮,檔案快取和開啟服務端的gzip壓縮等,這使得頁面...

前端效能優化 預載入

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

前端效能優化之預載入

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