前端優化 預載入篇

2022-08-02 05:48:11 字數 1427 閱讀 1660

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)

懶載入和預載入

前端優化 檔案預載入

xhr和動態插入節點 使用動態插入節點方法載入的檔案都會在載入後立即執行。ie中使用 new image src 去預載入檔案,而其他瀏覽器使用動態插入的 標籤來完成載入。window.onload function o document.createelement object o.data pr...

前端效能優化 預載入

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

前端效能優化 資源預載入

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