前端性能优化

dalalalaa

已于 2023-05-12 16:20:29 修改

阅读量636

点赞数 1

分类专栏：前端文章标签：前端性能优化 javascript

于 2023-01-17 16:17:14 首次发布

本文链接：https://blog.csdn.net/qq_42552455/article/details/128717526

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前端性能优化(考虑方向)

一、资源优化

1、Echarts按需加载
2、UI库按需加载
3、图片压缩（https://tinypng.com/）
4、较大的json和图片存放到服务器的静态资源文件夹
5、Url-loader的limit值不要过大（默认4kb）

二、渲染优化

引起回流：

1、页面首次渲染
2、浏览器窗口大小发生改变
3、元素尺寸或位置发生改变
4、元素内容变化（文字数量或图片大小等等）
5、元素字体大小变化
6、添加或者删除可见的DOM元素
7、激活CSS伪类（例如：:hover）
8、查询某些属性或调用某些方法
9、引起回流的属性和方法：

clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
scrollIntoView()、scrollIntoViewIffNeeded()
getComputedStyle()
getBoundingClientRect()
scrollTo()

CSS:

1、避免使用table布局;
2、尽可能在DOM树的最末端改变class，减少回流影响的节点;
3、避免设置多层内联样式;
4、将动画效果应用到position属性为absolute或fixed的元素上;
5、避免使用CSS表达式（例如：calc()）。
6、使用 transform 和 opacity 属性更改来实现动画

JS:

1、避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
2、避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
3、也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
4、避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
5、对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

三、其它优化

1、Webpack分块懒加载，根据webpackChunkName划分对应的业务模块，使用prefetch可以实现预加载
2、使用window.addEventListener(‘resize’, this.reload); 要做防抖处理
3、列表点击时考虑使用事件委托，添加target的判断，减少dom的事件绑定
4、Axios封装，自动取消重复接口