瀏覽器頁面性能優化

核心就是：減少HTTP的請求次數和大小

1、資源合併壓縮

2、圖片懶加載

3、音頻 走 流文件（加載一部分）

4、儘可能避免迴流和重繪

1. 放棄傳統操作dom的時代，基於vue / react開始數據影響視圖模式
2. 分離讀寫操作

一次迴流 (讀寫分離)

let box = document.getElementById('box');
box.style.width = '200px';   // 寫
box.style.height = '200px';  // 寫

console.log(box.clientHeight)  // 讀

兩次迴流

let box = document.getElementById('box');
box.style.width = '200px'; // 寫

console.log(box.clientHeight)// 讀

box.style.height = '200px'// 寫

3. 樣式集中改變

let box = document.getElementById('box');
box.className = 'active'

4. 緩存處理（原理就是分離讀寫）

// 一次迴流
let a = box.clientWidth;  // 讀
let b = box.clientHeight; // 讀

box.style.width = a + 10 + 'px';  // 寫
box.style.height = b + 10 + 'px'; // 寫

// 兩次迴流（寫裏面，有讀）
/*
box.style.width = box.clientWidth + 10 + 'px';
box.style.height = box.clientHeight + 10 + 'px';
*/

5. 元素批量修改

比如現在要插入5個li在ul裏

/* 一次迴流 */

// 文檔碎片
let frg = document.createDocumentFragment();
for(let i = 0; i < 5; i++){
	let newLi = document.createElement("li");
    newLi.innerHTML = i;
    // 創建的li放到文檔碎片中
    frg.appendChild(newLi);
}
// 統一放進 ul 裏
box.appendChild(frg);
frg = null;

// 或者字符串拼接 (也是一次迴流)
let str = ``;
for(let i = 0; i < 5; i++){
	str += `<li>${i}</li>`;
}
box.innerHTML = str;

/* 五次迴流 */
for(let i = 0; i < 5; i++){
	let newLi = document.createElement("li");
    newLi.innerHTML = i;
    // 創建的li放到文檔碎片中
    box.appendChild(newLi);
}

6. 動畫效果應用到position爲absolute或fixed的元素（脫離文檔流）
7. CSS3硬件加速（transform \ opacity \ filters）
8. 犧牲平滑度換取速度
9. 避免使用 table佈局 和 css的javascript表達式