性能优化与调试技巧|青训营

一. 减少重绘和重排

1. 修改样式：避免频繁修改单个元素的样式属性，尽量将多个样式的修改集中到一次操作中。例如，使用 element.style 对象一次性设置多个样式属性，而不是逐个设置。

// 不推荐的方式，会触发多次重排和重绘
element.style.width = '100px';
element.style.height = '50px';

// 推荐的方式，将多个样式属性一次性设置
element.style.cssText = 'width: 100px; height: 50px;';

2. 隐藏元素：如果需要隐藏一个元素，可以使用 display: none; 或者 visibility: hidden; 而不是通过修改 width 或 height 这样的样式属性来实现。

// 不推荐的方式，会触发重绘和重排
element.style.visibility = 'hidden';

// 推荐的方式，只触发重排
element.style.display = 'none';

3. 批量操作：尽量将对 DOM 的多次操作集中到一次处理，以减少多次重排和重绘的开销。例如，在插入大量元素时，可以使用文档片段（DocumentFragment）进行批量插入。

// 不推荐的方式，会多次触发重排和重绘
for (let i = 0; i < 1000; i++) {
  const element = document.createElement('div');
  // 插入元素
  document.body.appendChild(element);
}

// 推荐的方式，使用文档片段批量插入
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const element = document.createElement('div');
  // 插入元素到文档片段
  fragment.appendChild(element);
}
// 一次性将文档片段插入到 DOM 树中
document.body.appendChild(fragment);

这些是一些常见的示例，通过减少重绘和重排的次数，可以提高 JavaScript 代码的性能。在实际开发中，可以结合具体场景和需求，采用适当的优化策略。

二. 节流与防抖 节流代码如下:

function throttle(fn,t) {
    let timer = null
    return function() {
      if (!timer) {
      timer = setTimeout(() => {
        fn()
        timer = null
      },t)
    }
    }
   }

防抖代码如下:

 function debounce(fn,t) {
      let timer;
      return function() {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn()
        },t)
      }
  }

三. 原生网页调试技巧 进入浏览器 F12...大家自行探索哇