JavaScript代码优化 | 青训营笔记

参加「第六届青训营」笔记创作活动第3天

主题：性能优化与调试技巧

一、JavaScript代码优化引入

以下引用一篇文章的部分内容

优化JavaScript代码以提高性能是非常重要的：

0. 用户体验：性能优化可以改善用户的使用体验。快速的响应时间和流畅的界面交互会使用户感到更加愉悦，并增加用户对网站或应用的满意度。反之，如果应用响应缓慢或卡顿，用户可能会感到不满并转而使用其他竞争对手的产品。
1. 用户留存和转化率：研究表明，网页加载速度影响着用户的留存率和转化率。如果网页加载时间过长，用户可能会放弃等待而离开网站。根据数据，每秒钟增加1秒的页面加载时间，将导致7%的用户转化率下降。通过优化JavaScript代码，可以减少加载时间，从而提高用户的留存率和转化率。
2. 资源利用效率：JavaScript是在浏览器中执行的，它运行在主线程上，与页面渲染和用户交互共享资源。如果JavaScript代码过于复杂或运行效率低下，将占用过多的CPU时间和内存资源，导致其他任务的执行受阻，甚至造成页面的卡顿或崩溃。通过优化JavaScript代码，可以减少资源的使用，提高整体性能和稳定性。
3. 搜索引擎优化（SEO）：搜索引擎对网页的加载速度有一定的考虑因素，较快的加载速度可以提高网页在搜索结果中的排名。通过优化JavaScript代码，减少不必要的请求和提高网页加载速度，可以增加搜索引擎对网站的索引和可访问性，提高网站的曝光度。

优化JavaScript代码以提高性能对于用户体验、用户留存和转化率、资源利用效率以及搜索引擎优化都具有重要的影响。开发人员应该持续关注和改进代码的性能，以确保应用在各个方面都能提供最佳的表现。

二、JavaScript代码优化举例

• 减少重绘和重排

  • 批量修改样式：避免频繁修改元素的样式，最好一次性进行修改。例如，在修改多个元素的样式时，可以使用CSS类来一次性地应用所需的样式，而不是逐个修改样式。

   // 不佳的写法
  
  
   element1.style.color = "red";
   element2.style.backgroundColor = "blue";
   element3.style.fontSize = "16px";
   ​
   // 优化的写法
   element1.classList.add("styled-element1");
   element2.classList.add("styled-element2");
   element3.classList.add("styled-element3");
  

  • 离线修改DOM：在对DOM进行频繁操作时，可以将这些操作放在离线文档中进行，最后再将其附加到文档中。这样可以避免多次重排和重绘。

   // 不佳的写法
  
  
   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);
  
   }
  
   document.body.appendChild(fragment);
  
  

  • 使用CSS动画代替JavaScript动画：CSS动画可以利用GPU加速，比JavaScript动画更高效。尽可能使用CSS动画来执行动画效果，以减少重排和重绘的次数。

   // 不佳的写法（使用JavaScript动画）
   function animate(element) {
     let position = 0;
     setInterval(() => {
       position += 10;
       element.style.left = position + "px";
     }, 16);
   }
   ​
   // 优化的写法（使用CSS动画）
   .element {
     animation: slide 1s infinite;
   }
  
   ​
  
   @keyframes slide {
     0% { left: 0; }
     100% { left: 100px; }
   }
  

  • 使用文档片段：文档片段是一个轻量级的DOM节点容器，可以在其中进行批量插入和操作节点，最后再将其附加到文档中。这样可以减少重排和重绘的次数。

   // 不佳的写法
  
  
   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);
  
   }
  
   document.body.appendChild(fragment);
  
  

• 使用节流和防抖

  • 节流：节流技术可以控制函数在一定时间间隔内执行一次，以减少函数的执行频率。

   // 不佳的写法（没有使用节流）
   window.addEventListener("scroll", handleScroll);
   ​
  
   // 优化的写法（使用节流）
   function throttle(fn, delay) {
     let lastTime = 0;
     return function() {
  
       const now = Date.now();
       if (now - lastTime >= delay) {
         fn.apply(this, arguments);
  
         lastTime = now;
       }
     };
   }
   ​
   const throttledHandleScroll = throttle(handleScroll, 200);
   window.addEventListener("scroll", throttledHandleScroll);
  

  在上述示例中，通过使用throttle函数包装handleScroll函数，确保handleScroll函数在200毫秒内只会被执行一次。

  • 防抖：防抖技术可以延迟函数的执行，在一系列连续触发事件后等待一段时间后才执行函数。

   // 不佳的写法（没有使用防抖）
   input.addEventListener("input", handleInput);
   ​
  
   // 优化的写法（使用防抖）
   function debounce(fn, delay) {
     let timer = null;
     return function() {
  
       clearTimeout(timer);
       timer = setTimeout(() => {
         fn.apply(this, arguments);
  
       }, delay);
     };
   }
  
   ​
  
   const debouncedHandleInput = debounce(handleInput, 300);
   input.addEventListener("input", debouncedHandleInput);
  

  在上述示例中，通过使用debounce函数包装handleInput函数，确保handleInput函数在用户输入后等待300毫秒后才会执行，从而避免频繁触发handleInput函数。

三、总结

当优化JavaScript代码以提高性能时，以下是一些常用的技术和方法：

• 减少重绘和重排：重绘和重排是浏览器重新计算和渲染页面元素的过程，其开销较大。为了减少重绘和重排的次数，可以使用以下方法：

  • 使用CSS动画代替JavaScript动画，因为CSS动画可以利用GPU加速。
  • 避免频繁地修改DOM，最好是一次性进行修改，或者将DOM操作放在离线文档中进行，最后再将其附加到文档中。
  • 使用文档片段来批量插入DOM元素，而不是逐个插入。

• 使用节流和防抖技术：节流和防抖是控制事件触发频率的技术，可以有效减少重复的函数调用，从而提高性能。

  • 节流：在一定时间间隔内只执行一次函数调用。这可以通过使用setTimeout或requestAnimationFrame来实现。
  • 防抖：等待一段时间后，如果没有其他调用，则执行函数调用。这可以使用setTimeout来实现。

• 使用性能分析工具：性能分析工具可以帮助你找出代码中的性能瓶颈，并提供优化建议。

  • Chrome DevTools：使用Chrome浏览器的开发者工具，你可以在Performance和Timeline选项卡下进行性能分析。
  • Lighthouse：这是一个由Google开发的开源工具，可以评估网页的性能，并提供改进建议。
  • WebPageTest：它可以测试你的网页在不同网络条件下的加载性能。

• 其他优化技术：

  • 使用局部变量存储重复访问的DOM元素，以避免频繁查询。
  • 使用事件委托来减少事件处理程序的数量。
  • 使用惰性加载或无限滚动等技术来延迟加载大量数据或图片。
  • 对于复杂的计算或循环操作，可以将其移至Web Worker线程中，以防止阻塞主线程。

  通过减少重绘和重排、使用节流和防抖技术、使用性能分析工具等方法，可以有效地优化JavaScript代码的性能。选择不同的优化策略需要依据具体情况和需求进行调整。