一、减少重绘和重排
重绘和回流会消耗大量的计算资源。尽量避免在循环中修改样式属性或获取布局信息。如果需要对多个样式进行修改，可以使用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; // }
二、使用事件委托
事件委托是一种JavaScript技术，它可以减少事件处理程序的数量，从而提高Web应用程序的性能。事件委托是将事件处理程序附加到父元素上，而不是将事件处理程序附加到每个子元素上。当事件在子元素上触发时，它们会冒泡到父元素，然后由父元素处理。这样，我们可以使用一个事件处理程序来处理多个子元素的事件。
例如，假设我们有一个ul元素，它包含多个li元素。如果我们想要在每个li元素被单击时执行一些代码，我们可以使用事件委托来实现：
const ul = document.querySelector('ul'); ul.addEventListener('click', (event) => { if (event.target.tagName === 'LI') { // 在这里处理li元素的单击事件 } });
在上面的代码中，我们将单击事件处理程序附加到ul元素上。当单击事件在li元素上触发时，它们会冒泡到ul元素，然后由ul元素处理。在事件处理程序中，我们可以检查事件的目标元素是否是li元素，并在必要时执行相应的代码。
使用事件委托可以减少事件处理程序的数量，从而提高Web应用程序的性能。此外，它还可以使代码更加简洁和易于维护。
三、减少网络请求
减少HTTP请求次数可以显著提高页面加载速度。可以将多个脚本或样式表合并为单个文件，使用CSS Sprites技术来减少图片请求，使用CDN加速等。 这些是一些常见的JavaScript性能优化技巧和实践。根据实际情况，你可以选择适合你项目的优化策略来提高JavaScript代码的性能。记住，在编写优化代码之前，先进行性能测试和分析以确定哪些部分需要优化。
请注意，优化性能不仅仅限于JavaScript代码本身，也需要考虑其他因素，如网络延迟、服务器响应时间、缓存策略等。
四、使用缓存
缓存是一种在Web应用程序中提高性能的重要技术。当浏览器首次访问Web应用程序时，它会从服务器下载HTML、CSS、JavaScript和其他文件。如果我们在服务器上启用了缓存，那么浏览器可以将这些文件存储在本地缓存中，并在下一次访问时使用本地缓存，而不是从服务器重新下载文件。这样可以减少HTTP请求次数，并提高Web应用程序的性能。
常用的缓存技术包括浏览器缓存、CDN缓存和服务端缓存等。例如，我们可以在服务器端配置HTTP缓存头，以指示浏览器将文件缓存在本地。常用的HTTP缓存头包括Expires、Cache-Control和ETag等。
