懶載入和預載入

2022-06-28 17:18:13 字數 632 閱讀 4709

預載入:預載入就是在網頁全部載入之前,提前載入。當使用者需要檢視時可直接從本地快取中渲染,以提供給使用者更好的體驗,減少等待的時間。否則,如果乙個頁面的內容過於龐大,沒有使用預載入技術的頁面就會長時間的展現為一片空白,這樣瀏覽者可能以為預覽慢而沒興趣瀏覽,把網頁關掉,這時,就需要預載入。當然這種做法實際上犧牲了伺服器的效能換取了更好的使用者體驗。

懶載入(緩載):延遲載入或符合某些條件時才載入某些。這樣做的好處是減少不必要的訪問資料庫或延遲訪問資料庫的次數,因為每次訪問資料庫都是比較耗時的即只有真正使用該物件的資料時才會建立。懶載入的主要目的是作為伺服器前端的優化,減少請求數或延遲請求數。

兩者的行為是相反的,乙個是提前載入,乙個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用,預載則會增加伺服器前端壓力。

2、懶載入實現:第一種:純粹的延遲載入,使用settimeout或setinterval進行載入延遲,如果使用者在載入前就離開了頁面,那麼就不會載入。 

第三種:可視區載入,即僅載入使用者可以看到的區域,這個主要由監控滾動條來實現,一般會在距使用者看到某前一定距離遍開始載入,這樣能保證使用者拉下時正好能看到。

懶載入和預載入

懶載入和預載入 懶載入的原理及實現 處理預載入時設定img 的src 屬性和img 的onload 事件的位置前後順序關係 關於的預載入,你所不知道的 載入的過程是非同步的 一 懶載入 介紹 目的 二 預載入 介紹 目的 這對畫廊及佔據很大比例的 來說十分有利,它保證了快速 無縫地發布,也可幫助使用...

預載入和懶載入

懶載入 通過監聽scroll事件,判斷進入可視區域之後請求資源 對於電商等很多,頁面很長的業務場景適用 減少無效資源的載入 併發載入的資源過多會阻塞js的載入,影響 的正常使用 可以使用原生js或者引用zepto.min.js var viewheight document.documentelem...

懶載入和預載入

懶載入和預載入 懶載入的原理及實現 處理預載入時設定img 的src 屬性和img 的onload 事件的位置前後順序關係 關於的預載入,你所不知道的 載入的過程是非同步的 一 懶載入 介紹 目的 二 預載入 介紹 目的 這對畫廊及佔據很大比例的 來說十分有利,它保證了快速 無縫地發布,也可幫助使用...