内容摘要：凌晨三点，我盯着浏览器里那个转圈的loading图标，第无数次刷新页面。这不是什么大厂的产品，是我自己用JavaScript写的一个记账本。数据量就几千条，可每次筛选都要卡上两秒。我知道问题出在哪——

凌晨三点，网站我盯着浏览器里那个转圈的网站loading图标，第无数次刷新页面。网站这不是网站什么大厂的产品，是网站我自己用JavaScript写的一个记账本。数据量就几千条，网站可每次筛选都要卡上两秒。网站我知道问题出在哪——我把所有操作都绑在了DOM上，网站每次点击都重新遍历整个表格。网站这种写法，网站放在五年前或许还能忍，网站但现在的网站网页早就不是那个只能展示静态文本的文档了。

JavaScript的网站尴尬在于，它给了你极大的网站自由，也给了你极大的网站犯错空间。你可以像写流水账一样从上到下堆代码，也可以像搭积木一样用各种模式把逻辑拆得干干净净。我见过有人用jQuery写了三千行的插件，最后连自己都找不到事件绑定在哪；也见过用原生JS写的项目，模块化清晰到每个函数都能独立测试。同样的语言，写出来的东西能差出两个时代。

说个具体的。我去年接手过一个后台管理系统，接手时它已经跑了一年多。打开控制台，满屏的报错，最离谱的是有个定时器每三秒就请求一次接口，就为了刷新一个从不变化的数字。问写这代码的人，他说当时赶工期，图省事就setInterval了。后来我把它改成用WebSocket推送，只在数据真正变化时才更新DOM，服务器负载直接降了百分之七十。这不是什么高深的技术，就是多想了一步——你的代码到底在解决什么问题，还是在制造新的问题。

现在的JavaScript生态，框架多得让人眼花缭乱。React、Vue、Svelte，每个都有自己的拥趸。我身边有个老程序员，写了十年jQuery，去年被逼着学React，天天抱怨说这玩意儿怎么这么绕。可等他真的理解了虚拟DOM和单向数据流，回头再看自己以前写的那些手动操作DOM的代码，自己都笑了。工具本身没有好坏，关键是它逼你养成的思维方式。React逼着你把界面拆成组件，Vue逼着你考虑响应式依赖，Svelte干脆在编译期就把活干完了。这些约束，反而让代码更容易维护。

但别误会，我不是让你盲目追新。我见过有人为了用上某个新框架，把原来好好的项目重构了一遍，结果性能反而更差了。框架只是工具，核心还是你对问题的理解。有个很简单的判断标准：如果你能用原生JS写清楚一个待办事项列表，再去看框架的文档，你会发现很多东西都是相通的。事件、状态、渲染——万变不离其宗。

说到渲染，这里有个特别反直觉的事儿。很多人觉得JavaScript跑在浏览器里，性能瓶颈肯定在计算上。但实际上，大多数网页卡顿的根源是DOM操作。你每改一次DOM，浏览器都要重新计算布局、绘制样式。哪怕只是改一个数字，如果触发的是整个页面的重排，代价就大了。我做过一个测试，用innerHTML一次性插入一百条数据和分一百次插入，后者耗时是前者的十几倍。这不是什么黑魔法，就是浏览器的工作原理。所以好的JavaScript代码，往往是在想方设法减少对DOM的打扰。

我有个习惯，写代码之前先在纸上画出数据的流向。哪里是源头，哪里是分支，哪里会汇合，哪里会分叉。这个习惯帮我避开了很多坑。前阵子写一个实时协作的文档功能，用户的每一次输入都要同步到其他端。如果每个按键都触发一次全量保存，服务器肯定扛不住。后来我用了一个简单的防抖函数，再配合操作合并，把几十次输入合成一次批量提交。效果立竿见影，用户体验反而更流畅了。

JavaScript这东西，入门容易，精通难。难的不是语法，而是思维方式的转变。你得学会站在浏览器的角度思考问题，理解它怎么解析你的代码，怎么渲染页面，怎么回收内存。我见过很多写了几年JavaScript的人，还是习惯用alert调试，遇到问题就console.log一通乱打。不是说这样不行，但如果你能静下心来读一遍报错信息，跟着调用栈走一遍，很多问题其实自己就能解开。

网页已经从一个展示文档的地方，变成了一个完整的应用平台。JavaScript的边界也在不断扩展，从浏览器到服务器，从桌面到移动端。但不管工具怎么变，核心的东西没变：你得知道你的代码在做什么，为什么这么做，以及它会给用户带来什么。那些看起来酷炫的动画和交互，背后都是对细节的极致追求。写JavaScript就像做菜，调料再多，食材不新鲜也是白搭。而食材，就是你对自己业务的理解。