浏览器页面性能优化

核心就是：减少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表达式