前端性能优化

一、性能优化的原则

  1. 多使用内存,缓存或其他方法
  2. 减少CPU计算量,减少网络加载耗时

二、从何入手

让加载更快

减少资源体积:压缩代码

前端常见的压缩代码的方式是使用webpackGulp等打包构建工具📦

减少访问次数:合并代码

使用的也是webpack

SSR服务器端渲染

服务器端渲染:将网页和数据一起加载,一起渲染

非SSR(前后端分离):先加载网页,再加载数据,再渲染数据

使用缓存

  • 静态资源使用hash后缀,根据文件内容计算hash
  • 文件内容不变,则hash不变,则url不变
  • url和文件不变,就会自动触发http缓存机制,返回304

webpackhttp的缓存机制

使用CDN服务

让渲染更快

CSS放在head中,JS放在body的最后

尽早开始执行JS,在DOMContentLoaded触发

懒加载

  • 图片懒加载 (react-lazyLoad)
  • 上滑加载更多

DOM查询进行缓存

1
2
3
4
5
6
7
8
9
10
11
// 不缓存DOM查询结果
for (let i = 0; i < document.getElementsByTagName('p').length; i++) {
// 每次循环都会重新计算length,频繁的对DOM的查询
}

// 缓存DOM查询结果
const p = document.getElementsByTagName('p');
const length = p.length;
for (let i = 0; i < length; i++) {
// 缓存length,只进行一次DOM缓存
}

频繁的DOM操作,合并到一起插入DOM结构

1
2
3
4
5
6
7
8
9
10
11
12
13
const listNode = document.getElementById('list');
// 创建一个文本片段,此时还没有插入到DOM树中
const fragment = document.createDocumentFragment();

// 插入执行
for (let i = 0; i < 10; i++){
const li = document.createElement('li');
li.innerText = `li item ${li}`
fragment.appendChild(li)
}

// 都完成之后,在插入到DOM树中
listNode.appendChild(fragment)

防抖

触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间

1
2
3
4
5
6
7
8
9
10
11
12
13
function debounce(fn, delay = 500) {
let timer = null;

return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay)
}
}

节流

高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率

1
2
3
4
5
6
7
8
9
10
11
12
function throttle(fn, delay = 100) {
let timer = null;
return function () {
if (timer) {
return;
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null;
}, delay)
}
}
Author: YangLeLe
Link: http://younglele.cn/front-end-performance-optimization/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.