大家好，我是第八哥，做互联网开发这行有10来年了。这些年里，最常被问到的问题就是：“为啥我这网页加载这么慢？明明 JS 代码也不多啊。”
其实啊，JavaScript性能优化可不是看代码行数这么简单。用户刷网页时，多等0.5秒就可能关掉页面，这背后藏着不少容易被忽略的细节。
今天就掏心窝子给大家分享5个实战技巧，都是我这些年踩坑总结出来的，亲测能明显提升网页加载速度，尤其适合移动端场景。
一、延迟加载非关键JS：让首屏先跑起来
很多同学喜欢把所有JS一股脑儿全塞在head里，当浏览器加载时会停下来等待JS解析，首屏能不慢吗？
我的做法是：区分关键JS和非关键JS。首屏渲染必须的JS留着，像统计、广告这些可以晚点加载。
具体怎么操作？给script标签加个async或defer属性就行。看示例：
<!-- 非关键JS用async，加载完就执行 -->
<script src="analytics.js" async></script>
<!-- 依赖顺序的非关键JS用defer，按顺序加载执行 -->
<script src="ad.js" defer></script>加了这两个属性，浏览器会在后台加载JS，不耽误解析HTML，首屏加载速度能快30%以上。
这两者的区别如下：
async：下载完成后立即执行，执行顺序不确定，先下载完成的先执行。
defer：HTML解析完成后执行，按文档顺序执行。
实践建议：
- 1. 独立脚本优先使用 async：如分析工具、广告 SDK 等无依赖脚本。
- 2. 依赖脚本使用 defer：如需要操作 DOM 或依赖其他脚本的初始化代码。
- 3. 避免混合使用：在同一页面中避免同时使用 async 和 defer 属性，除非明确了解其交互行为。
二、精简JS体积：给代码“瘦个身”
JS文件越大，下载时间越长，这是常识。但很多人不知道，就算代码量少，没处理好也会变“胖”。
我常用两个办法来给代码瘦身：Tree-shaking和代码分割。
Tree-shaking能删掉没用到的代码，比如你引入了整个库，实际上只用到了一个函数，那么其他的就会被全部干掉。在webpack配置里加几行代码就行，示例如下：
// webpack.config.js
module.exports = {
mode: 'production', // 生产环境自动开启Tree-shaking
optimization: {
usedExports: true
}
}代码分割更狠，把大JS拆成小chunk，用到哪个加载哪个。用户首次加载时，负担一下就轻了。
三、事件委托：少给DOM绑监听，减轻负担
做列表页时，很多人会给每个列表项都绑个点击事件，这样100条数据就有100个监听器，DOM能不卡吗？
如果换成事件委托就不一样了，把监听器绑在父元素上，通过事件冒泡来判断目标元素。来看代码：
// 别这么写（低效）
document.querySelectorAll('.list-item').forEach(item => {
item.addEventListener('click', handleClick);
});
// 这么写（高效）
document.querySelector('.list-container').addEventListener('click', (e) => {
if (e.target.classList.contains('list-item')) {
handleClick.call(e.target);
}
});我之前接手一个项目，用事件委托后，列表页的点击响应速度提升了近50%，亲测有效！
四、避免全局变量污染：内存占用少了，速度自然快了
全局变量这东西，用着方便但坑不少。它会一直占着内存不释放，多了还会引发变量冲突。
我的习惯是：能用局部变量就不用全局的，复杂逻辑用模块化封装。比如用ES6的模块：
// 不好的写法
window.userInfo = { name: '张三', age: 25 };
// 推荐写法
export const userInfo = { name: '张三', age: 25 };
// 用的时候按需引入
import { userInfo } from './user.js';之前有个项目，全局变量堆了几十个，清理后页面切换时的卡顿感直接消失了，内存占用降了30%。
五、用Web Workers处理复杂计算：UI线程不“堵车”
JS是单线程的，要是有个复杂计算（比如大数据排序），那么整个页面就会卡住，用户点啥都没反应。
这时候Web Workers就派上用场了，它能把计算任务丢到后台线程，不耽误UI渲染。示例如下：
// 主线程
const worker = new Worker('data-processor.js');
worker.postMessage(largeData); // 发送数据给worker
worker.onmessage = (e) => {
console.log('计算结果：', e.data); // 接收结果
};
// data-processor.js（worker线程）
self.onmessage = (e) => {
const result = heavyCalculation(e.data); // 复杂计算
self.postMessage(result); // 发送结果回去
};我做过一个数据可视化项目，用了Web Workers后，图表渲染时的卡顿完全消失，用户体验直接上了一个档次。
最后再啰嗦一句，JavaScript性能优化没有银弹，得结合实际场景调。但这5个技巧，基本上是通用的“特效药”。
平时多打开浏览器的Performance面板看看，哪里耗时高就针对性优化。坚持一段时间，你会发现自己的网页加载速度越来越快，用户也更愿意留下来了。
如果还有其他性能优化的问题，欢迎评论区交流，我看到都会回~
评论