前端性能優化總結（二）

CSS選擇符
在大多數人的觀念中，都覺得瀏覽器對 CSS選擇符的解析式從左往右進行的，例如#toc A { color: #444; }這樣一個選擇符，如果是從右往左解析則效率會很高，因爲第一個 ID選擇基本上就把查找的範圍限定了，但實際上瀏覽器對選擇符的解析是從右往左進行的。如上面的選擇符，瀏覽器必須遍歷查找每一個 A標籤的祖先節點，效率並不像之前想象的那樣高。根據瀏覽器的這一行爲特點，在寫選擇符的時候需要注意很多事項。

其它方面

1.避免頁面跳轉，也就是使用單頁面應用的開發。

每次頁面跳轉，就是一次html文件的下載過程。而這個過程，我們首先從服務端下載網頁，再進行渲染，網頁性能體驗會很差。而單頁面應用，它從一開始，就把完整的網頁給加載到本地。

2.延遲加載、懶加載技術
原理：先將img標籤中的src鏈接設爲同一張圖片（空白圖片），將其真正的圖片地址存儲在img標籤的自定義屬性中。當js監聽到該圖片元素進入可視窗口時，即將自定義屬性中的地址存儲到src屬性中，達到懶加載的效果。這樣做能防止頁面一次性向服務器響應大量請求導致服務器響應慢，頁面卡頓或崩潰等問題。

3.將css放在HEAD中
頁面通常先解析完css文件再進行渲染，如果放到後面，頁面渲染在前，則用戶體驗很差。有些瀏覽器會等css文件加載完再進行渲染，把css放後面會造成堵塞。

4.節流Throttle和防抖Debounce

節流：指定時間間隔內只能執行一次任務。如運用於懶加載，監聽滾動條滾動時，若操作函數耗費資源較多則會出現頁面卡頓。

//節流實現代碼
function throttle(fn, interval) {
    let can_do = true;
    return function () {
        if (!can_do) return;
        can_do = false;
        setTimeout(() => {
            fn();
            can_do = true
        }, interval)//使用定時器指定時間觸發
    }
}

防抖：任務頻繁觸發的情況下，只有任務觸發的間隔超過指定間隔的時候，任務纔會執行，它的計時有一個更新。如運用於用戶註冊名檢測問題。

//防抖代碼實現
function debounce(fn, interval) {
    let time = null;
    return function () {
        clearTimeout(time)//清除前一次觸發的時間
        time = setTimeout(() => {
            fn();
        }, interval)
    }
}

5.HTML Collection