1. 懶加載是網(wǎng)站解決性能問題最常見的方法
2. 熟練 server-mock 工具的使用

題目1：如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)

function isVisible($node){
    var scrollTop = $(window).scrollTop();  // 滑動(dòng)高度
    var windowHeight = $(window).height();  // 可視高度
    var elementHeight = $node.offset().top   // 元素位置高度
    if((elementHeight < scrollTop + windowHeight) && (elementHeight > scrollTop)){
        return true;
    }
    return false;
}

題目2：當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 。用代碼實(shí)現(xiàn)

$(window).on('scroll', function(){   // 綁定一個(gè)滑動(dòng)事件
    var $node = document.getElementById('node');   // 節(jié)點(diǎn)位置
    if(isVisible($node)){     // 每次出現(xiàn)都在控制臺(tái)打印true;
        console.log('true');
    } 
});

// 判斷是否出現(xiàn)在窗口可視范圍的函數(shù)
function isVisible($node){
    var scrollTop = $(window).scrollTop();  // 滑動(dòng)高度
    var windowHeight = $(window).height();  // 可視高度
    var elementHeight = $node.offset().top   // 元素位置高度
    if((elementHeight < scrollTop + windowHeight) && (elementHeight > scrollTop)){
        return true;
    }
    return false;
}

題目3：當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true，以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)

$(window).on('scroll', function(){   // 綁定一個(gè)滑動(dòng)事件
    var $node = document.getElementById('node');   // 節(jié)點(diǎn)位置
    var switch = true; // 第一次出現(xiàn)的開關(guān)
    if(isVisible($node)){
        if( switch ){   // 判斷是否第一次
            console.log('true');
            switch = false;  // 關(guān)閉第一次
        }
    }    
});

// 判斷是否出現(xiàn)在窗口可視范圍的函數(shù)
function isVisible($node){
    var scrollTop = $(window).scrollTop();  // 滑動(dòng)高度
    var windowHeight = $(window).height();  // 可視高度
    var elementHeight = $node.offset().top   // 元素位置高度
    if((elementHeight < scrollTop + windowHeight) && (elementHeight > scrollTop)){
        return true;
        console.log('true');
    }
    return false;
}

題目4： 圖片懶加載的原理是什么？

• 什么時(shí)圖片懶加載？

  • 當(dāng)訪問一個(gè)頁(yè)面的時(shí)候，先把 img 元素或者其他元素的背景圖片路徑替換成一張1*1px的白色圖片路徑（這樣的話就只需要請(qǐng)求一次），只有當(dāng)頁(yè)面出現(xiàn)在瀏覽起的可視范圍以內(nèi)時(shí)，才設(shè)置圖片真正的路徑，讓圖片顯示出來(lái)。這就時(shí)懶加載。

• 為什么要使用這個(gè)技術(shù)？

  • 比如購(gòu)物網(wǎng)站圖片特別多，如果一訪問頁(yè)面就發(fā)這么多請(qǐng)求，頁(yè)面加載會(huì)很慢，更有可能服務(wù)器吃不消。
  • 優(yōu)點(diǎn)：減輕服務(wù)器壓力，可以讓頁(yè)面加載更快的呈現(xiàn)在用戶面前(用戶體驗(yàn)比較好)。

• 如何實(shí)現(xiàn)？

  • 先把img元素的路徑設(shè)置為一張1*1px（白色）圖片路徑，把真實(shí)路徑地址放置在自定義屬性 data-src 中。
  • 當(dāng)頁(yè)面滑動(dòng)的時(shí)候檢查所有的img元素，看看是否在可視窗口以內(nèi)，如果在視野內(nèi)在看看是否加載過，沒有的加載的話就加載圖片

可視窗口以內(nèi)：要知道 滑動(dòng)高度（垂直滾動(dòng)條滾動(dòng)的距離）/窗口高度（可視區(qū)高度）/元素位置高度（元素離文檔頂部的高度）
- 滑動(dòng)高度：
    - 原生JS: window.pagaYOffset
    - jQuery: $(window).scrollTop()
- 窗口高度:
    - 原生JS: window.innerHeight
    - jQuery: $(window).height();
- 元素位置高度:
    - 原生JS: element.scrollHeight
    - jQuery: $(this).offset().top

題目5： 實(shí)現(xiàn)視頻中的圖片懶加載效果

code