這兩種方式都是提高網(wǎng)頁性能的方式，兩者主要區(qū)別是一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。
懶加載也叫延遲加載，指的是在長(zhǎng)網(wǎng)頁中延遲加載圖片的時(shí)機(jī)，當(dāng)用戶需要訪問時(shí)，再去加載，這樣可以提高網(wǎng)站的首屏加載速度，提升用戶的體驗(yàn)，并且可以減少服務(wù)器的壓力。它適用于圖片很多，頁面很長(zhǎng)的電商網(wǎng)站的場(chǎng)景。懶加載的實(shí)現(xiàn)原理是，將頁面上的圖片的 src 屬性設(shè)置為空字符串，將圖片的真實(shí)路徑保存在一個(gè)自定義屬性中，當(dāng)頁面滾動(dòng)的時(shí)候，進(jìn)行判斷，如果圖片進(jìn)入頁面可視區(qū)域內(nèi)，則從自定義屬性中取出真實(shí)路徑賦值給圖片的 src 屬性，以此來實(shí)現(xiàn)圖片的延遲加載。
預(yù)加載指的是將所需的資源提前請(qǐng)求加載到本地，這樣后面在需要用到時(shí)就直接從緩存取資源。 通過預(yù)加載能夠減少用戶的等待時(shí)間，提高用戶的體驗(yàn)。我了解的預(yù)加載的最常用的方式是使用 js 中的 image 對(duì)象，通過為 image 對(duì)象來設(shè)置 scr 屬性，來實(shí)現(xiàn)圖片的預(yù)加載。
京公網(wǎng)安備 11010802030320號(hào)