前端性能优化
寻光 2020-03-01
# 性能优化的总体思路
- 多用缓存。
- 算法层面多用空间换时间。
- 减少网络的加载时间
- 减少 IO 操作。
# 前端性能优化的上手点
# 1. 提高加载速度
# 减少资源体积,压缩代码
# 减少访问次数
- 合并代码
- SSR 服务端渲染 比如一个新闻列表,在后端就将新闻的请求数据从数据库拉到服务器上,在服务器上渲染完成后一块发送给前端。
- 减少不必要的文件更改,以便触发 304 缓存。
# 使用 CDN
# 2. 提高渲染速度
# 防抖 debounce
debounce
这个词很直观的表达了一种渲染优化的策略:去除抖动。
也就是一段时间的重复操作只会执行一次
主要应用在一些被频繁触发的重复事件中
为了减少重复且没有意义的事件触发,我们会在一定时间后才去触发事件。
如果在这个时间内有新的“重复事件”被触发,则以新事件后的时间为触发时间。
听起来很绕其实很好理解,看这幅图
我想你应该也明白节流是什么意思了吧~~
接下来我们针对一个场景手写防抖。
监听一个输入框,文字发生变化后触发相应事件。
/**
*
* @param {Function} 要触发的操作
* @param {number} 延迟多长时间执行
*/
function debounce(fn, delay = 500) {
let timer = null;
//最终返回一个闭包
return function() {
//这里是核心,如果定时器有值,就清空定时器,重新计时
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
}
let input = document.querySelector('#input1');
//接下来要进行的操作对其先进行防抖处理
input.addEventListener(
'keyup',
debounce(() => {
console.log(input.value);
}, 500)
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 节流 throttle
节流会降低事件触发的频率
拖拽一个元素时,要随时拿到该元素被拖拽的位置
const div = document.querySelector('#div1');
function throttle(fn, interval = 100) {
let timer = null;
return function() {
//如果定时器有值,就放弃操作
if (timer) return;
timer = setTimeout(() => {
//函数执行,把上层的this扔过去
fn.apply(this, arguments);
timer = null;
}, interval);
};
}
div.addEventListener(
'drag',
throttle((e) => {
console.log(e.offsetX, e.offsetY);
})
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 除此之外,一些其他的措施
- CSS 放到 head 中,JS 放到 body 的最下面
- 如果有
onload
类的事件,尽量使用DOMContentLoaded
来让 js 提前加载。 - 图片懒加载
- 对 DOM 查询进行缓存
- 如果有频繁的 DOM 操作,尽量先追加到文档片段中