IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

window resize和scroll事件的基本优化

WEB前端开发 2014-11-27 12:53:35 累计浏览 2,127 次
本机暂存

同事在项目中使用scroll事件去加载数据,结果IE下悲剧了。给了一个简单优化方法,效果明显。

只要用户改变窗口大小,会对内部一些元素大小重新计算,可能导致整个页面重新渲染,最终导致大量消耗 CPU。比如调用 resize 方法,用户改变窗口大小时会不停的被触发, 低版本的IE 会可能陷入假死状态。window的scroll事件也是如此,鼠标滚动或拖动滚动条,就会不停的触发scroll事件,如果处理的东西多,低版本的IE也会陷入假死状态。

基本的优化思路:在一定的时间之内,只执行一次resize事件函数。


var resizeTimer = null;
$(window).on('resize', function () {
        if (resizeTimer) {
            clearTimeout(resizeTimer)
        }
        resizeTimer = setTimeout(function(){
            console.log("window resize");
        }, 400);
    }
);

scroll事件优化同理。

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 如何成为Python高手 (累计阅读 54,992)
  2. Linux 性能监控、测试、优化工具 (累计阅读 13,009)
  3. include(“./file.php”)和include(“file.php”)区别 (累计阅读 12,788)
  4. Rolling cURL: PHP并发最佳实践 (累计阅读 11,485)
  5. 关于使用STL的红黑树map还是hashmap的问题 (累计阅读 8,871)
  6. jQuery性能优化指南 (累计阅读 8,818)
  7. 提升磁盘IO性能的几个技巧 (累计阅读 8,507)
  8. 关于PHP的编译和执行分离 (累计阅读 8,345)
  9. Mysql的随机读取 (累计阅读 7,860)
  10. redis 运维实际经验纪录之一 (累计阅读 7,709)