减少DOM操作：
频繁的DOM操作会导致重绘和重新布局，影响性能。建议将多个DOM操作合并为一个操作，或者使用DocumentFragment来批量插入DOM元素。
// 不推荐写法（频繁操作DOM） const container = document.getElementById('container'); for (let i = 0; i < 1000; i++) { const element = document.createElement('div'); element.textContent = 'Item ' + i; container.appendChild(element); } // 推荐写法（合并DOM操作） const container = document.getElementById('container'); const fragment = document.createDocumentFragment(); for (let i = 0; i < 1000; i++) { const element = document.createElement('div'); element.textContent = 'Item ' + i; fragment.appendChild(element); } container.appendChild(fragment);
避免不必要的重绘和回流：
重绘和回流会消耗大量的计算资源。尽量避免在循环中修改样式属性或获取布局信息。如果需要对多个样式进行修改，可以使用CSS的class切换。
// 不推荐写法（频繁触发重绘和回流） const element = document.getElementById('myElement'); for (let i = 0; i < 1000; i++) { element.style.left = i + 'px'; element.style.top = i + 'px'; } // 推荐写法（使用CSS class） const element = document.getElementById('myElement'); element.classList.add('move'); // CSS样式： // .move { // left: 1000px; // top: 1000px; // }
使用事件委托：
将事件监听器绑定到父元素，利用事件冒泡机制来处理子元素的事件，可以减少事件处理函数的数量，提高性能。
// 不推荐写法（为每个子元素添加事件监听器） const items = document.querySelectorAll('.item'); items.forEach((item) => { item.addEventListener('click', () => { // 处理点击事件 }); }); // 推荐写法（使用事件委托） const container = document.getElementById('container'); container.addEventListener('click', (event) => { if (event.target.classList.contains('item')) { // 处理点击事件 } });
使用节流与防抖：
在处理一些高频触发的事件（如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加速等。
这些是一些常见的JavaScript性能优化技巧和实践。根据实际情况，你可以选择适合你项目的优化策略来提高JavaScript代码的性能。记住，在编写优化代码之前，先进行性能测试和分析以确定哪些部分需要优化。
请注意，优化性能不仅仅限于JavaScript代码本身，也需要考虑其他因素，如网络延迟、服务器响应时间、缓存策略等。
当涉及到JavaScript性能优化时，还有几个关键的方面需要考虑。下面是一些常见的JavaScript性能优化技巧和实践：
使用Web Workers：
对于涉及大量计算或耗时操作的任务，可以将其放入Web Worker中，在后台线程中运行，避免阻塞主线程，提高页面响应性能。
// 主线程代码 const worker = new Worker('worker.js'); worker.postMessage('Hello from main thread!'); worker.onmessage = function (event) { const result = event.data; // 处理Worker返回的结果 }; // worker.js代码 self.onmessage = function (event) { const message = event.data; // 执行计算或耗时操作 const result = doSomeWork(message); self.postMessage(result); };
懒加载资源：
延迟加载非关键的资源（如图片、脚本等），在用户需要时再进行加载，减少页面初始加载时间，提高用户体验。
<!-- 图片懒加载 --> <img data-src="image.jpg" class="lazyload" alt="Lazy-loaded Image"> <script> // 使用Intersection Observer检测元素是否进入视口 const lazyloadImages = document.querySelectorAll('.lazyload'); const observer = new IntersectionObserver(function (entries, observer) { entries.forEach(function (entry) { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }); lazyloadImages.forEach(function (img) { observer.observe(img); }); </script>
使用缓存：
合理利用浏览器缓存机制，减少不必要的请求。设置正确的Cache-Control和Expires头信息，让浏览器缓存静态资源。
//设置缓存过期时间为1年（根据实际情况调整） <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 year" </IfModule>
压缩和合并JavaScript文件：
利用压缩工具（如UglifyJS）对JavaScript文件进行压缩，以减小文件大小。此外，将多个JavaScript文件合并成一个文件可以减少HTTP请求次数。
// 在主线程中创建Web Worker const worker = new Worker('worker.js'); // 向Web Worker发送消息 worker.postMessage({ data: 'some data' }); // 接收来自Web Worker的消息 worker.onmessage = function(event) { console.log(event.data); };
在Web Worker的代码文件worker.js中可以执行复杂的计算或耗时操作，并通过postMessage方法将结果发送回主线程。
使用事件缓存：
对于频繁触发的事件，可以使用事件缓存来减少事件处理函数的调用次数。下面是一个示例：
// 定义事件缓存标志位 let isProcessing = false; // 监听滚动事件 window.addEventListener('scroll', function() { // 如果正在处理中，则跳过本次事件 if (isProcessing) return; // 设置处理中标志位 isProcessing = true; // 执行滚动相关操作 // 在合适的时机重置处理中标志位 setTimeout(function() { isProcessing = false; }, 100); });
通过在处理事件前设置标志位，并在合适的时机重置标志位，可以防止事件处理函数被频繁调用。
