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