JS代码性能优化 ｜青训营

用户7904317985031
68 阅读2分钟

引言

本质上来说，任何能提高运行效率，降低运行开销的行为，都可以算作性能优化的操作。对JS来说，我们可以从内存空间的使用、垃圾回收机制等方面进行优化。

一、减少重绘和回流

重绘和回流会消耗大量的计算资源。尽量避免在循环中修改样式属性或获取布局信息。

  1. 如果需要对多个样式进行修改，可以使用CSS的class切换

image.png 2. 减少Dom操作。频繁的DOM操作会导致重绘和重新布局，影响性能。建议将多个DOM操作合并为一个操作，或者使用DocumentFragment来批量操作

image.png

二、慎用全局变量

全局变量定义在全局执行上下文，是所有作用域链的顶端。每次查找的时候都从局部找到最顶端，在时间上会有所消耗。

全局执行上下文一直存在于上下文的执行栈，直到程序退出，才会被销毁，内存空间浪费

image.png

三、使用事件代理

将事件监听器绑定到父元素，利用事件冒泡机制来处理子元素的事件，可以减少事件处理函数的数量，提高性能。

四、使用节流与防抖

在处理一些高频触发的事件（如resize、scroll）时，使用节流（throttling）和防抖（debouncing）可以限制事件处理函数的执行频率，提高性能。

// 节流
function throttle(func, delay) {
  let timerId;
  return function (...args) {
    if (!timerId) {
      timerId = setTimeout(() => {
        func(...args);
        timerId = null;
      }, delay);
    }
  };
}


// 防抖
function debounce(func, delay) {
  let timerId;
  return function (...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      func(...args);
    }, delay);
  };
}

// 使用节流处理scroll事件
window.addEventListener('scroll', throttle(handleScroll, 200));

// 使用防抖处理输入事件
input.addEventListener('input', debounce(handleInput, 300));

五、减少网络请求

减少HTTP请求次数可以显著提高页面加载速度。可以将多个脚本或样式表合并为单个文件，使用CSS Sprites技术来减少图片请求，使用CDN加速等。

avatar
文章
阅读
粉丝