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