核心就是:减少HTTP的请求次数和大小
1、资源合并压缩
2、图片懒加载
3、音频 走 流文件(加载一部分)
4、尽可能避免回流和重绘
- 放弃传统操作dom的时代,基于vue / react开始数据影响视图模式
- 分离读写操作
一次回流 (读写分离)
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'// 写
- 样式集中改变
let box = document.getElementById('box');
box.className = 'active'
- 缓存处理(原理就是分离读写)
// 一次回流
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个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);
}
- 动画效果应用到position为absolute或fixed的元素(脱离文档流)
- CSS3硬件加速(transform \ opacity \ filters)
- 牺牲平滑度换取速度
- 避免使用 table布局 和 css的javascript表达式