JS預加載

需求：有時我們需要實現例如快速快速切換頁面、圖片之類的功能時，能盡快的加載出我們所需的圖片會極大提升用戶體驗，這時用預加載將圖片先緩存到瀏覽器，用戶使用需顯示圖片時無疑會順暢很多。

核心：當一個圖片在其它地方被加載過，那么它就會存在于瀏覽器緩存中，用到它時可直接從本地緩存中渲染。

特點：增強用戶的體驗，但會加載服務器的負擔。

實現方式：

1. CSS方式

通過css中設置background的方式將圖片加載進緩存，寫在任意標簽下，設置background-position使其不可見

background: url("img.jpg") no-repeat -9999px -9999px;

2. JS方式

實現圖片預加載

3. AJAX方式

實現CSS和JS預加載

window.onload = function() {

setTimeout(function() {

var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://domain.tld/preload.js');

xhr.send();

xhr = new XMLHttpRequest();

xhr.open('GET', 'http://domain.tld/preload.css');

xhr.send();

// preload image

new Image().src = "http://domain.tld/preload.png";

}, 1000);

};

JS懶加載

需求：試想當一個網頁有非常多的圖片時，那么加載整個頁面的時間就會大量增加，對用戶而言需要好幾秒的時間加載一個頁面無疑是不友好的。然而更多時候用戶并不會瀏覽到全部加載進來的圖片，所以當用戶瀏覽到當前視口時再去加載相應的圖片無疑是兩全其美的選擇。

核心：將當前可視區域的圖片加載進來，監聽滾動顯示圖片。

特點：頁面加載速度快、可以減輕服務器的壓力、節約了流量，用戶體驗好。

實現方式：

1. 動態設置img的src屬性

1) 首先，不要將圖片地址放到src屬性中，而是放到其它屬性(data-original)中。

2) 頁面加載完成后，根據scrollTop判斷圖片是否在用戶的視野內，如果在，則將data-original屬性中的值取出存放到src屬性中。

3) 在滾動事件中重復判斷圖片是否進入視野，如果進入，則將data-original屬性中的值取出存放到src屬性中。

這里有一個細節，當img的src為空時，仍然會對服務器發起一次請求，詳情可參看：http://youngae520.lofter.com/post/28e9e5_a67a8a，因此使用此種方式往往會默認在src中寫入一個小的圖片作為默認圖片。

頁面懶加載

emmm......有沒有發現這樣寫的問題......

好多代碼啊~用戶不一定會滾動到下面，而且JS中頻繁的DOM操作仍然會影響性能~

2. innerHtml

考慮到上述問題，我就去京東主頁上去偷學了一下他們咋實現的~

首先我們來看“頻道廣場”的下面有好多空的div(現在還沒有滾動到那里~)：

而當我滾動到對應的地方時，再查看源代碼：

發現不僅僅是這些顯示圖片的item里多了內容，其他的地方也多了很多東西，讓我們隨意看一個item：

多么熟悉的lazyimg出現了~~~~~~ 所以我懷疑這種做法是通過直接寫innerHtml實現的，相比于第一種設置src屬性的方法，首先剛開始加載的html就少了很多，那么頁面渲染就會更快~ 其次直接寫html也就避免了頻繁的DOM操作。

相關參考：

https://www.jianshu.com/p/5456a52e73e9

https://www.jianshu.com/p/c8a7c2019c09

https://www.cnblogs.com/leyan/p/6085148.html

總結

以上是生活随笔為你收集整理的ajax预加载html seo,前端性能优化 — JS预加载和懒加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。