前端效能優化 預載入

2021-09-25 05:35:01 字數 1467 閱讀 8142

1.什麼是預載入

資源預載入是另乙個效能優化技術,我們可以使用該技術來預先告知瀏覽器某些資源可能在將來會被使用到。預載入簡單來說就是將所有所需的資源提前請求載入到本地,這樣後面在需要用到時就直接從快取取資源

2.為什麼要用預載入

在網頁全部載入之前,對一些主要內容進行載入,以提供給使用者更好的體驗,減少等待的時間。否則,如果乙個頁面的內容過於龐大,沒有使用預載入技術的頁面就會長時間的展現為一片空白,直到所有內容載入完畢。

3.實現預載入的幾種辦法

檔案

preloadjs提供了一種預載入內容的一致方式,以便在html應用程式中使用。預載入可以使用html標籤以及xhr來完成。預設情況下,preloadjs會嘗試使用xhr載入內容,因為它提供了對進度和完成事件的更好支援,但是由於跨域問題,使用基於標記的載入可能更好。

//使用preload.js

var queue=new createjs.loadqueue();//預設是xhr物件,如果是new createjs.loadqueue(false)是指使用html標籤,可以跨域

queue.on("complete",handlecomplete,this);

queue.loadmanifest([

,]);

function

handlecomplete

()

兩者都是提高頁面效能有效的辦法,兩者主要區別是乙個是提前載入,乙個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用,預載入則會增加伺服器前端壓力

詳解懶載入和預載入(js)

懶載入和預載入

前端效能優化 資源預載入

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

前端效能優化 資源預載入

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

前端效能優化之預載入

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