网页脚本

浏览器地址栏里敲下那串字符，网页脚本回车。网页脚本页面加载出来，网页脚本布局乱了，网页脚本按钮点不动，网页脚本图片全裂。网页脚本你打开控制台，网页脚本红色报错一行接一行。网页脚本十有八九，网页脚本问题出在网页脚本上。网页脚本

网页脚本，网页脚本说白了就是网页脚本跑在浏览器里的代码。它不像后端程序那样待在服务器上，网页脚本而是网页脚本被下载到你的电脑、手机里，网页脚本由浏览器现场执行。JavaScript 是绝对主力，偶尔也有 VBScript 这类老古董的影子，但基本可以忽略。脚本能干什么？你滑动页面时导航栏变色，点击购物车图标弹出侧边栏，表单填错时输入框变红——全是脚本在干活。

我见过一个最典型的例子。某电商网站的商品详情页，价格显示区域用了脚本动态渲染。用户网络稍慢，脚本还没执行完，页面上先显示一个占位符“--”。结果有用户截图发到社交媒体，说这家店价格都不敢标。其实脚本一跑完价格就出来了，但那几百毫秒的空窗期足够造成误会。脚本的时序问题，比很多人想象的更影响体验。

脚本怎么加进网页？三种方式。内联，直接写在 HTML 标签的 onclick 属性里，比如 <button onclick="alert('hi')">。这种写法现在不推荐，结构和行为搅在一起，改起来头疼。第二种是内部脚本，把代码包在 <script> 标签里，放在 <head> 或 <body> 末尾。放 head 里可能阻塞页面渲染，放 body 末尾能让 HTML 先呈现出来。第三种是外部文件，<script src="main.js"></script>，浏览器单独发请求去拿。外部文件能缓存，多个页面共用，是正经项目的首选。

脚本加载顺序是个坑。默认情况下，浏览器遇到 <script> 标签就停下解析 HTML，先去下载并执行脚本。如果脚本放在 head 里而且文件很大，用户会盯着白屏等好久。解决办法有两个：defer 和 async。defer 告诉浏览器“你先继续解析 HTML，脚本下载完等 DOM 构建好了再按顺序执行”。async 更激进，“下载完立刻执行，不管 HTML 解析到哪了”。用 defer 的场景多，比如操作 DOM 的脚本。async 适合独立无依赖的统计代码。

写脚本的人常犯一个错：假设 DOM 已经就绪。代码里直接 document.getElementById('app')，结果返回 null。因为脚本执行时那个元素还没被解析出来。老手会把脚本放 body 末尾，或者用 DOMContentLoaded 事件包起来。我见过一个实习生写的轮播图，本地测试正常，上线后偶尔白屏。查了半天，就是脚本在 head 里同步加载，网速快时 DOM 没就绪，网速慢时反而正常。这种间歇性 bug 最折磨人。

脚本还能操作样式。比如 element.style.display = 'none' 直接改内联样式，或者 element.classList.add('active') 切换类名。后者更干净，样式归 CSS 管，脚本只负责切换状态。但有人图省事，用脚本拼一大串 style 字符串，后期改个颜色要翻半天代码。这不是技术问题，是习惯问题。

事件处理是脚本的另一大块。点击、滚动、键盘输入、窗口大小变化，都靠事件监听。早些年流行 onclick="doSomething()" 写在 HTML 里，现在推荐 addEventListener。区别在哪？addEventListener 能给同一个事件绑多个处理函数，能控制捕获还是冒泡阶段触发，还能用 removeEventListener 解绑。内联写法这些全做不到，而且污染全局作用域。

脚本安全不能不提。用户输入的任何内容都不能直接塞进 innerHTML，否则就是 XSS 漏洞。有人觉得“我这是内部系统，没人攻击”。去年某公司内部工单系统被员工恶作剧，就是在备注框里写了段脚本，所有查看工单的管理员都弹窗。脚本注入不分内外网，只要有人能输入，就得防。

调试脚本，浏览器开发者工具是主力。Sources 面板能打断点，一步步看变量怎么变。Console 里能直接跑代码片段，测个函数返回值很方便。Network 面板看脚本文件加载耗时，有时候页面卡不是脚本写得烂，是某个第三方统计脚本请求超时了。

脚本文件大小直接影响加载速度。一个没压缩的 jQuery 将近 300KB，gzip 后 90KB 左右。如果只为了操作几个 DOM 元素，引入整个库就浪费。现在原生 API 足够强，querySelector、fetch、classList 这些，十年前得靠库补，现在浏览器都支持。小项目直接写原生，大项目再考虑框架。

最后说个观察。很多人学脚本是从复制粘贴开始的，这没问题。但复制完得知道每行在干什么。我见过一个页面里同时加载了三个版本的 jQuery，因为不同功能从不同教程里抄的。脚本冲突，$ 符号被覆盖，一半功能失灵。网页脚本不神秘，它就是让页面动起来的逻辑。写的时候多想想浏览器怎么解析、怎么执行、用户等多久。这些想清楚了，报错就少一半。

很赞哦!（4954）