windows.resize监听事件导致浏览器cpu占用高

最新推荐文章于 2024-07-14 11:54:09 发布

ronger1019

最新推荐文章于 2024-07-14 11:54:09 发布

阅读量2.5k

点赞数 2

文章标签： javascript vue

本文链接：https://blog.csdn.net/qq_33159000/article/details/115344835

版权

在开发一个包含多个echarts图表的dashboard页面时，发现使用window.resize监听窗口变化导致浏览器卡顿且CPU占用率高。通过排查发现，resize事件需要手动销毁，并且在多个组件中使用时需要注意函数命名的唯一性，以防止错误销毁。此外，使用lodash的_.debounce防抖动函数可以避免频繁执行导致的性能问题。

摘要由CSDN通过智能技术生成

1.场景：最近在实现一个监控系统的dashboard页面，这个页面上有很多的echarts图表，当浏览器窗口大小变化时，页面的所有数据要重新计算宽高值，于是使用了window.addEventListener("resize") 来解决这个问题。

2. 结果：在使用过程中，发现当浏览器窗口多次改变大小之后，页面卡顿的很厉害，查看浏览器的cpu占用率也很高，迟迟降不下来。郁闷中～，因为在之前的项目中也使用过监听事件，但没有发现过这个问题，就很自信～，罪过呀

3.排查了很长时间，各种百度，无意中看到windows.resize的正确使用方法，才知道，这个事件是需要手动销毁的。oh~,知道原因后，立即到浏览器里运行了getEventListeners(window)，查看window的监听事件方法，结果可想而至，好几百个监听事件。。。

4.言归正传，来讲讲解决方法～

4.1 销毁windows.resize事件，需要实名函数，所以在添加windows.resize事件时也要使用实名函数，添加和销毁的参数要一样一样的，举个栗子：

mounted() {
    window.addEventListener("resize", this.resizeHandler, false);
  }

 beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler, false);
 }

4.2 使用swiper 滚动，每个子组