1. DOM优化
在JS中对DOM进行访问的代价很高,建议用变量缓存DOM属性和元素
1.1. 重排和重绘
重排:元素布局发生修改
重绘:元素的视觉表现属性的修改
不论是重排还是重绘,都会阻塞浏览器。要提高性能,就要降低重排和重绘的频率和成本,近可能少地触发重新渲染。
CSS Triggers List - What Kind of Changes You Can Make 列举了CSS属性在不同的渲染引擎中是否会触发重排或重绘
优化策略:
- CSS属性读写分离
- 通过切换class或者style.csstext属性去批量操作元素样式
- DOM元素离线更新:当对DOM进行相关操作时,例如innerHTML、appendChild,可以使用 DocumentFragment(文档片段接口)创建并组成一个 DOM 子树,再一次插入页面中,或者先将元素隐藏/脱离文档流,再进行操作。
1.2. 避免DOM过大、过深
影响DOM渲染、查找DOM节点的时间
2. 事件优化
2.1 防抖和节流
防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
使用场景:
- search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
- window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
使用场景:
- 鼠标不断点击触发,mousedown(单位时间内只触发一次)
- 监听滚动事件,比如是否滑到底部自动加载更多,用节流来判断
2.2 事件解绑
在单页应用的设计中,用户使用它时是不需要刷新浏览器的,所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效。
因此,我们在 v-if 从 DOM 中移除元素,或者路由到不同的组件时,需要考虑解绑事件和销毁实例。
export default {
mounted() {
// 函数消抖
this.__resizeHandler = debounce(() => {
this.chartInstance?.resize()
this.handleResize && this.handleResize()
}, 100)
window.addEventListener('resize', this.__resizeHandler)
},
beforeDestroy() {
window.removeEventListener('resize', this.__resizeHandler)
}
}
还没有评论,快来抢第一吧