各位好，今天咱们聊聊JavaScript代码的性能优化，保证你的代码像火箭一样飞起来！准备好，咱们要开车了！
一、加载优化：让你的网页快人一步
加载优化是性能优化的第一道关卡，直接影响用户的第一印象。想象一下，如果你的网页加载速度慢得像蜗牛，用户早就跑去竞争对手那里了。
-
减少 HTTP 请求：把多个小文件合并成一个大文件
HTTP 请求可是性能杀手。每次请求都要建立连接、发送数据，浪费时间。所以，能少发就少发。
-
代码合并： 将多个 CSS、JavaScript 文件合并成一个，减少请求次数。
<!-- 优化前 --> <link rel="stylesheet" href="style1.css"> <link rel="stylesheet" href="style2.css"> <script src="script1.js"></script> <script src="script2.js"></script> <!-- 优化后 --> <link rel="stylesheet" href="bundle.css"> <script src="bundle.js"></script>工具： 你可以使用 Webpack、Parcel、Rollup 等打包工具进行代码合并。
-
CSS Sprites： 将多个小图标合并成一张大图，用 CSS
background-position定位。/* 优化前：每个图标一个请求 */ .icon1 { background-image: url(icon1.png); } .icon2 { background-image: url(icon2.png); } /* 优化后：一张图包含所有图标 */ .icon { background-image: url(sprite.png); } .icon1 { width: 20px; height: 20px; background-position: 0 0; } .icon2 { width: 20px; height: 20px; background-position: -20px 0; }
-
-
压缩代码：让你的代码瘦身
压缩代码可以减小文件体积，加快下载速度。
- 移除注释和空格： 这些对浏览器来说没用，只会增加文件大小。
-
缩短变量名： 将
veryLongVariableName变成a，节省空间。工具： 你可以使用 UglifyJS、Terser、CSSNano 等工具进行代码压缩。
// 优化前 function calculateSum(num1, num2) { // This function calculates the sum of two numbers. return num1 + num2; } // 优化后（压缩后） function calculateSum(n,t){return n+t}
-
使用 CDN：让你的代码离用户更近
CDN (Content Delivery Network) 将你的静态资源缓存到全球各地的服务器上，用户可以从离自己最近的服务器下载资源，加快加载速度。
<!-- 使用 CDN --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> -
延迟加载：让你的网页先显示核心内容
有些代码不是页面首次渲染必需的，可以延迟加载。
-
懒加载图片： 当图片进入可视区域时再加载。
// 懒加载图片示例 (需要配合 Intersection Observer API) const images = document.querySelectorAll('img[data-src]'); const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.removeAttribute('data-src'); observer.unobserve(img); } }); }); images.forEach(img => { observer.observe(img); }); -
异步加载 JavaScript： 使用
async或defer属性。async: 异步加载，加载完成后立即执行，不保证执行顺序。defer: 异步加载，在 HTML 解析完成后，按照 script 标签的顺序执行。
<script src="script.js" async></script> <script src="script.js" defer></script>
-
-
利用浏览器缓存：让你的资源缓存起来
浏览器缓存可以减少重复请求，加快加载速度。
-
设置 HTTP 缓存头： 使用
Cache-Control、Expires等 HTTP 头部来控制缓存行为。Cache-Control: max-age=3600 // 缓存 1 小时 -
利用 Service Worker： Service Worker 可以拦截网络请求，提供离线访问和更精细的缓存控制。
-
-
优化首屏加载:
- 减少首屏资源: 优先加载用户能立即看到的内容，其余内容延迟加载。
- 内联关键 CSS: 将首屏所需的 CSS 直接写在 HTML 中，避免额外的 HTTP 请求。
- 服务端渲染 (SSR): 在服务器端生成 HTML，减少客户端渲染时间，提高首屏加载速度。
二、执行优化：让你的代码跑得更快
加载优化只是第一步，执行优化才是让你的代码真正飞起来的关键。
-
减少 DOM 操作：DOM 操作是性能瓶颈
DOM 操作很耗时，尽量减少 DOM 操作。
-
批量更新 DOM： 不要频繁地修改 DOM，一次性更新。
// 优化前 for (let i = 0; i < 1000; i++) { const element = document.createElement('div'); element.textContent = i; document.body.appendChild(element); } // 优化后 const fragment = document.createDocumentFragment(); for (let i = 0; i < 1000; i++) { const element = document.createElement('div'); element.textContent = i; fragment.appendChild(element); } document.body.appendChild(fragment); -
使用
innerHTML或textContent： 比appendChild更快。// 优化前 const element = document.getElementById('myElement'); element.appendChild(document.createTextNode('Hello')); element.appendChild(document.createTextNode(' World')); // 优化后 const element = document.getElementById('myElement'); element.textContent = 'Hello World'; // 或者 element.innerHTML = 'Hello World'; -
缓存 DOM 元素： 避免重复查询 DOM 元素。
// 优化前 for (let i = 0; i < 1000; i++) { document.getElementById('myElement').textContent = i; } // 优化后 const element = document.getElementById('myElement'); for (let i = 0; i < 1000; i++) { element.textContent = i; }
-
-
优化循环：循环是性能大户
循环是代码中常见的结构，优化循环可以显著提高性能。
-
减少循环体内的计算： 将循环体内的不变计算移到循环外部。
// 优化前 for (let i = 0; i < array.length; i++) { const element = array[i]; const width = document.getElementById('myElement').offsetWidth; // 每次循环都获取 offsetWidth element.style.width = width + 'px'; } // 优化后 const width = document.getElementById('myElement').offsetWidth; // 只获取一次 offsetWidth for (let i = 0; i < array.length; i++) { const element = array[i]; element.style.width = width + 'px'; } -
使用
for循环： 比forEach、map等迭代方法更快。// 优化前 array.forEach(element => { // ... }); // 优化后 for (let i = 0; i < array.length; i++) { const element = array[i]; // ... } -
倒序循环： 理论上比正序循环更快 (在某些情况下)。
// 倒序循环 for (let i = array.length - 1; i >= 0; i--) { const element = array[i]; // ... }
-
-
避免内存泄漏：让你的程序保持健康
内存泄漏会导致程序运行越来越慢，最终崩溃。
-
及时清理不再使用的变量： 将变量设置为
null。 -
移除事件监听器： 在不需要时移除事件监听器。
// 移除事件监听器 const element = document.getElementById('myElement'); function handleClick() { // ... } element.addEventListener('click', handleClick); // 移除监听器 element.removeEventListener('click', handleClick); -
注意闭包： 闭包可能导致内存泄漏。
-
-
使用 Web Workers：让你的代码在后台运行
Web Workers 可以在后台线程运行 JavaScript 代码，避免阻塞主线程，提高用户体验。
// 主线程 const worker = new Worker('worker.js'); worker.addEventListener('message', event => { console.log('Worker 传回的数据：', event.data); }); worker.postMessage('Hello from main thread!'); // worker.js (后台线程) self.addEventListener('message', event => { const data = event.data; console.log('主线程传来的数据：', data); self.postMessage('Hello from worker thread!'); }); -
优化算法：选择合适的算法
选择合适的算法可以显著提高代码的执行效率。
- 使用哈希表 (Map, Set)： 在需要快速查找元素时，哈希表比数组更快。
- 排序算法： 根据数据量选择合适的排序算法 (快速排序、归并排序等)。
- 减少递归： 递归容易导致栈溢出，尽量使用循环代替递归。
-
代码风格:
- 避免全局变量: 减少命名冲突和内存占用。
- 使用严格模式 (‘use strict’): 帮助你编写更安全和更高效的代码。
- 编写可维护的代码: 使用有意义的变量名、注释和模块化代码。
三、渲染优化：让你的页面流畅如丝
渲染优化是让你的页面看起来更流畅的关键。
-
减少重绘 (Repaint) 和回流 (Reflow)：
- 重绘： 元素样式的改变，但不影响布局。
- 回流： 元素的大小、位置等布局的改变。回流一定会导致重绘，重绘不一定导致回流。
回流比重绘更耗时，尽量避免回流。
-
避免频繁修改 DOM 样式： 可以先将元素隐藏，修改样式后再显示。
// 优化前 const element = document.getElementById('myElement'); element.style.width = '100px'; // 回流 element.style.height = '200px'; // 回流 element.style.backgroundColor = 'red'; // 重绘 // 优化后 const element = document.getElementById('myElement'); element.style.cssText = 'width: 100px; height: 200px; background-color: red;'; // 只回流一次 -
使用
transform和opacity： 这两个属性不会触发回流。/* 使用 transform 和 opacity */ .element { transform: translateX(10px); /* 不会触发回流 */ opacity: 0.5; /* 不会触发回流 */ } -
使用
requestAnimationFrame： 在浏览器下一次重绘之前执行动画。// 使用 requestAnimationFrame function animate() { // ... requestAnimationFrame(animate); } requestAnimationFrame(animate);
-
避免使用复杂的 CSS 选择器：
复杂的 CSS 选择器会增加浏览器的渲染负担。
- 尽量使用 ID 选择器和类选择器： 比属性选择器和伪类选择器更快。
- 避免过度嵌套的选择器： 例如
#container > div > p > span。
-
减少 DOM 树的深度：
DOM 树越深，浏览器渲染的负担越重。
- 尽量减少不必要的 DOM 节点。
- 使用扁平化的 DOM 结构。
-
使用 CSS Containment：
CSS Containment 可以将页面的部分区域隔离，减少重绘和回流的影响范围。
contain: none;(默认值)contain: layout;contain: paint;contain: content;contain: strict;
-
使用 will-change 属性：
will-change属性可以提前告诉浏览器元素将要发生的变化，让浏览器提前优化。/* 告诉浏览器元素将要进行 transform 动画 */ .element { will-change: transform; }注意： 不要滥用
will-change属性，否则可能导致性能下降。 -
硬件加速：
- 利用GPU进行渲染，可以提高渲染效率。
四、性能测试与工具
优化不能靠感觉，要用数据说话。
-
Chrome DevTools：
Chrome DevTools 是一个强大的性能分析工具。
- Performance 面板： 可以记录页面加载和运行时的性能数据。
- Memory 面板： 可以检测内存泄漏。
- Coverage 面板： 可以查看代码的覆盖率，找出未使用的代码。
-
Lighthouse：
Lighthouse 是一个自动化的网站性能评估工具。
- 可以分析页面的加载速度、可访问性、SEO 等指标。
- 提供优化建议。
-
WebPageTest：
WebPageTest 是一个在线网站性能测试工具。
- 可以模拟不同的网络环境和浏览器。
- 提供详细的性能报告。
五、总结
性能优化是一个持续的过程，需要不断地学习和实践。记住以下几点：
- 关注用户体验： 性能优化是为了让用户用得更爽。
- 数据驱动： 用数据说话，不要靠感觉。
- 持续学习： 性能优化的技术在不断发展。
| 优化方向 | 优化策略 | 工具/方法 |
|---|---|---|
| 加载优化 | 减少 HTTP 请求、压缩代码、使用 CDN、延迟加载、利用浏览器缓存 | 代码合并 (Webpack, Parcel, Rollup)、CSS Sprites、UglifyJS, Terser, CSSNano、CDN、懒加载、async/defer、Cache-Control, Expires, Service Worker |
| 执行优化 | 减少 DOM 操作、优化循环、避免内存泄漏、使用 Web Workers、优化算法 | 批量更新 DOM、innerHTML/textContent、缓存 DOM 元素、减少循环体内的计算、for 循环、倒序循环、清理变量、移除事件监听器、闭包注意、哈希表 (Map, Set)、requestAnimationFrame |
| 渲染优化 | 减少重绘和回流、避免使用复杂的 CSS 选择器、减少 DOM 树的深度、使用 CSS Containment、使用 will-change 属性、硬件加速 | 避免频繁修改 DOM 样式、使用 transform 和 opacity、requestAnimationFrame、ID 选择器和类选择器、扁平化的 DOM 结构、contain 属性、will-change 属性 |
| 测试工具 | 性能分析和测试 | Chrome DevTools (Performance, Memory, Coverage)、Lighthouse、WebPageTest |
希望今天的分享对你有所帮助。记住，代码优化没有终点，只有不断追求卓越的程序员！
现在，拿起你的键盘，去优化你的代码吧！ 让你的代码跑得更快，飞得更高！