JavaScript 如何做性能优化

JavaScript 如何做性能优化

打开一个网页时，你有没有遇到过那种点了按钮半天没反应、滚动页面卡成PPT的情况？这背后很多时候和JavaScript的执行效率有关。作为网页里最常用的脚本语言，JS负责了动态交互、数据处理这些核心功能，但如果写得不好，就会把网页拖得“喘不过气”。今天我们就用生活化的例子，聊聊怎么给JS做性能优化，让网页跑起来更顺。

别让JS抢了“主线任务”的风头

你可以把网页的渲染过程想象成一家奶茶店：服务员（浏览器）要同时做“做奶茶”（渲染页面）和“接客人点单”（处理JS交互）两件事。如果一个店员（JS代码）一直埋头做珍珠，既不接新客人，也不把做好的奶茶递出去，后面的客人就会排成长队，整个店就乱套了。

JS默认是在浏览器的“主线程”上运行的，如果代码里有特别耗时的操作，比如循环处理几千条数据、反复修改DOM元素，就会占满主线程，让渲染和交互都卡壳。解决这个问题最简单的方法是“拆分任务”：把大的、耗时的操作拆成一个个小片段，让浏览器能在处理片段的间隙，抽空做渲染或者响应用户操作。

举个例子，你要把1000条用户数据渲染成表格，如果直接循环每条数据都插入DOM，就会触发1000次页面重绘，肯定卡。换成“分批插入”：每次处理50条数据，处理完后用setTimeout或者requestIdleCallback让浏览器歇0.01秒，再处理下一批，主线程就有时间响应点击、滚动这些操作了，用户不会觉得卡。

少碰“昂贵”的DOM操作

DOM操作就像奶茶店擦桌子、摆杯子，是最费时间的体力活。你要是擦一张桌子就摆一次杯子，再擦下一张，效率肯定低；但如果先把所有桌子擦完，再一次性摆好所有杯子，就快多了。

很多新手写JS的时候，喜欢循环里反复修改DOM，比如想给10个按钮加样式，直接写：

`javascript

// 不好的写法

for (let i = 0; i < 10; i++) {

document.getElementById(btn${i}).style.color = 'red';

}

`

这样每次循环都要去DOM里找元素、改样式，相当于擦一张桌子动一次杯子，慢得很。改成先把要改的元素都存到一个数组里，再统一操作，就高效很多：

`javascript

// 好的写法

const buttons = [];

for (let i = 0; i < 10; i++) {

buttons.push(document.getElementById(btn${i}));

}

buttons.forEach(btn => btn.style.color = 'red');

`

更聪明的办法是用“文档碎片”或者把元素先隐藏，改完所有样式再显示——就像先把所有杯子摆好，再一次性铺开，避免反复刷新页面。

别让事件监听器成“甩不掉的尾巴”

奶茶店里的门口挂着一个铃，客人一进门就响，要是这个铃一直响个不停，哪怕只是有人轻轻走过去也响，店员也会烦死。JS里的事件监听器（比如scroll、resize、mousemove事件）就像这个铃，要是绑定得不对，会频繁触发，消耗大量性能。

比如你想在用户滚动页面时显示一个“返回顶部”按钮，要是直接给window绑定scroll事件，用户滚动一次就会触发几十次函数，每次都去判断滚动距离，太浪费。可以用“节流”或者“防抖”来限制触发频率：

• 节流：规定每隔固定时间只执行一次函数，比如每隔200毫秒判断一次，哪怕用户滚动了1秒，也只执行5次，而不是几十次；
• 防抖：只有当用户停止操作后，过一段时间才执行，比如用户停止滚动100毫秒后，才判断是否显示按钮。

就像铃改成“客人停住3秒才响”，而不是客人一进门就响，大大减少了不必要的执行。

用好“工具人”Web Worker

如果你的JS任务是纯数据处理，比如批量处理图片、计算复杂的图表，这些操作不需要和DOM交互，就可以把它交给专门的“工具人”Web Worker。把耗时的计算放到Worker里做，主线程就只需要等结果，不会被占满，网页的交互依然流畅。

举个例子，你要计算10万条数据的统计值，要是在主线程里算，页面会卡住1-2秒，用户点什么都没反应。用Worker的话，把计算代码放到单独的JS文件里，主线程发送数据给Worker，Worker算完把结果发回来，主线程只需要更新结果，页面还是能正常滚动、点击，就像奶茶店专门请了人负责做复杂的配料，不影响前台接客。

当然，性能优化不是说要把代码写得特别复杂，而是要像奶茶店的店长一样，合理分配人手、安排流程，把最耗时的操作放在不影响用户体验的地方。多注意主线程的压力、DOM操作的次数、事件的触发频率，再适当用工具辅助，就能让JS跑起来又快又稳，给用户流畅的体验。