1.减少DOM操作
频繁的DOM操作会导致重绘和重新布局，影响性能。建议将多个DOM操作合并为一个操作，或者使用DocumentFragment来批量插入DOM元素。
合并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);
2.避免不必要的重绘和回流
重绘和回流会消耗大量的计算资源。尽量避免在循环中修改样式属性或获取布局信息。如果需要对多个样式进行修改，可以使用CSS的class切换。
使用CSS class代码：
const element = document.getElementById('myElement'); element.classList.add('move'); // CSS样式： .move { left: 100px; top: 150px; }
使用事件委托
将事件监听器绑定到父元素，利用事件冒泡机制来处理子元素的事件，可以减少事件处理函数的数量，提高性能。 使用事件委托代码：
const container = document.getElementById('container'); container.addEventListener('click', (event) => { if (event.target.classList.contains('item')) { // 处理点击事件 } });
使用节流与防抖
在处理一些高频触发的事件（如resize、scroll）时，使用节流（throttling）和防抖（debouncing）可以限制事件处理函数的执行频率，提高性能。
减少网络请求
减少HTTP请求次数可以显著提高页面加载速度。可以将多个脚本或样式表合并为单个文件，使用CSS Sprites技术来减少图片请求，使用CDN加速等。 些是一些常见的JavaScript性能优化技巧和实践。根据实际情况，你可以选择适合你项目的优化策略来提高JavaScript代码的性能。记住，在编写优化代码之前，先进行性能测试和分析以确定哪些部分需要优化。 请注意，优化性能不仅仅限于JavaScript代码本身，也需要考虑其他因素，如网络延迟、服务器响应时间、缓存策略等。
使用Web Workers
对于涉及大量计算或耗时操作的任务，可以将其放入Web Worker中，在后台线程中运行，避免阻塞主线程，提高页面响应性能。
worker.js代码：
self.onmessage = function (event) { const message = event.data; // 执行计算或耗时操作 const result = doSomeWork(message); self.postMessage(result); };
压缩和合并JavaScript文件：
利用压缩工具（如UglifyJS）对JavaScript文件进行压缩，以减小文件大小。此外，将多个JavaScript文件合并成一个文件可以减少HTTP请求次数。
