1.懶載入
懶載入的要點如下：
1.進入可視區域之後請求資源；
2.對於電商等較多，頁面很長的業務場景很適用；
3.可以減少無效資源的載入；
4.併發載入的資源過多會阻塞js的載入，影響**的正常使用；
如何實現懶載入呢？要點就是html中img標籤src屬性為空，或者可以設定乙個載入中的友好提示，給乙個data屬性，裡面存放真實位址，在需要的時候，動態的將這個位址賦予src屬性。例如可以使用lazyload.js做到在距離xxpx的時候進行替換真實位址。
如下所示：
var viewheight = document.documentelement.clientheight // 可視區域的高度
function lazyload () {
// 獲取所有要進行懶載入的
var eles = document.queryselectorall('img[data-original][lazyload]')
array.prototype.foreach.call(eles, function (item, index) {
var rect
if (item.dataset.original === '')
return
rect = item.getboundingclientrect()
// 一進入可視區，動態載入
if (rect.bottom >= 0 && rect.top < viewheight) {
!function () {
var img = new image()
img.src = item.dataset.original
img.onload = function () {
item.src = img.src
item.removeattribute('data-original')
item.removeattribute('lazyload')
// 首屏要人為的呼叫，否則剛進入頁面不顯示
lazyload()
document.addeventlistener('scroll', lazyload)
2.預載入
預載入的核心要點如下：
1.等靜態資源在使用之前的提前請求；
2.資源後續使用時可以從快取中載入，提公升使用者體驗；
3.頁面展示的依賴關係維護(必需的資源載入完才可以展示頁面，防止白屏等)；
實現預載入主要有三個方法：
1.html中img標籤最初設定為display:none；
2.js指令碼中使用image物件動態建立好；
3.使用xmlhttprequest物件可以更加精細的控制預載入過程，缺點是無法跨域：
懶載入和預載入
懶載入和預載入 懶載入的原理及實現 處理預載入時設定img 的src 屬性和img 的onload 事件的位置前後順序關係 關於的預載入,你所不知道的 載入的過程是非同步的 一 懶載入 介紹 目的 二 預載入 介紹 目的 這對畫廊及佔據很大比例的 來說十分有利，它保證了快速 無縫地發布，也可幫助使用...
預載入和懶載入
懶載入 通過監聽scroll事件，判斷進入可視區域之後請求資源 對於電商等很多，頁面很長的業務場景適用 減少無效資源的載入 併發載入的資源過多會阻塞js的載入，影響 的正常使用 可以使用原生js或者引用zepto.min.js var viewheight document.documentelem...
懶載入和預載入
懶載入和預載入 懶載入的原理及實現 處理預載入時設定img 的src 屬性和img 的onload 事件的位置前後順序關係 關於的預載入,你所不知道的 載入的過程是非同步的 一 懶載入 介紹 目的 二 預載入 介紹 目的 這對畫廊及佔據很大比例的 來說十分有利，它保證了快速 無縫地發布，也可幫助使用...