JavaScript代码优化 | 青训营笔记

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

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

一、JavaScript代码优化引入

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

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

用户体验：性能优化可以改善用户的使用体验。快速的响应时间和流畅的界面交互会使用户感到更加愉悦，并增加用户对网站或应用的满意度。反之，如果应用响应缓慢或卡顿，用户可能会感到不满并转而使用其他竞争对手的产品。

用户留存和转化率：研究表明，网页加载速度影响着用户的留存率和转化率。如果网页加载时间过长，用户可能会放弃等待而离开网站。根据数据，每秒钟增加1秒的页面加载时间，将导致7%的用户转化率下降。通过优化JavaScript代码，可以减少加载时间，从而提高用户的留存率和转化率。

资源利用效率：JavaScript是在浏览器中执行的，它运行在主线程上，与页面渲染和用户交互共享资源。如果JavaScript代码过于复杂或运行效率低下，将占用过多的CPU时间和内存资源，导致其他任务的执行受阻，甚至造成页面的卡顿或崩溃。通过优化JavaScript代码，可以减少资源的使用，提高整体性能和稳定性。

搜索引擎优化（SEO）：搜索引擎对网页的加载速度有一定的考虑因素，较快的加载速度可以提高网页在搜索结果中的排名。通过优化JavaScript代码，减少不必要的请求和提高网页加载速度，可以增加搜索引擎对网站的索引和可访问性，提高网站的曝光度。

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

二、JavaScript代码优化举例

减少重绘和重排

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

ini 复制代码

 // 不佳的写法
 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进行频繁操作时，可以将这些操作放在离线文档中进行，最后再将其附加到文档中。这样可以避免多次重排和重绘。

ini 复制代码

 // 不佳的写法
 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动画来执行动画效果，以减少重排和重绘的次数。

less 复制代码

 // 不佳的写法（使用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节点容器，可以在其中进行批量插入和操作节点，最后再将其附加到文档中。这样可以减少重排和重绘的次数。

ini 复制代码

 // 不佳的写法
 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);

使用节流和防抖

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

javascript 复制代码

 // 不佳的写法（没有使用节流）
 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毫秒内只会被执行一次。

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

javascript 复制代码

 // 不佳的写法（没有使用防抖）
 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代码的性能。选择不同的优化策略需要依据具体情况和需求进行调整。