内容摘要：打开浏览器按下F12，切到Console面板，敲一行 document.title，回车。页面的标题就打印出来了。这是很多人第一次接触JS脚本代码的场景——不需要装任何东西，浏览器自带运行环境，写完就

打开浏览器按下F12，脚本切到Console面板，代码敲一行 document.title，脚本回车。代码页面的脚本标题就打印出来了。这是代码很多人第一次接触JS脚本代码的场景——不需要装任何东西，浏览器自带运行环境，脚本写完就能跑。代码

JS脚本代码的脚本本质，是代码嵌入网页或独立运行的一段程序，用来操控页面元素、脚本处理数据、代码发起网络请求。脚本它不像C++或Java那样需要编译成二进制，代码写完直接由JavaScript引擎解释执行。脚本V8、SpiderMonkey、JavaScriptCore，这些引擎藏在Chrome、Firefox、Safari背后，把文本形式的代码一行行翻译成机器能懂的指令。

一段脚本从写下到生效，中间发生了什么

假设你在HTML里写了这么一段：

<script> const btn = document.querySelector('#submit'); btn.addEventListener('click', () => {  alert('提交成功'); }); </script>

浏览器解析HTML时遇到 <script> 标签，会暂停DOM构建，把这段代码交给JS引擎。引擎先做词法分析，把代码拆成一个个token，再做语法分析生成抽象语法树。V8在这个阶段还会用Ignition解释器把AST转成字节码，热点代码再由TurboFan编译成优化后的机器码。

整个过程在毫秒级完成。用户点击按钮时，事件触发，回调函数执行，弹窗出现。代码不多，但背后是一条完整的编译执行链路。

脚本写在哪，差别很大

行内脚本、内部脚本、外部脚本，三种写法各有各的坑。

行内脚本直接写在HTML标签的 onclick 属性里，比如 <button onclick="doSomething()">。写起来快，但HTML和JS混在一起，改一处要翻好几个文件。项目稍微大一点就没法维护。

内部脚本放在 <script> 标签里，比行内好一些，但代码量上去之后HTML文件会变得臃肿。而且每次页面加载都要重新解析这段代码，浏览器没法单独缓存它。

外部脚本用 <script src="app.js"></script> 引入。浏览器可以缓存这个文件，多个页面共用同一份代码时优势明显。另外，外部脚本还能配合 defer 和 async 属性控制加载时机。defer 表示等DOM解析完再执行，async 表示下载完立刻执行、不保证顺序。用错了会导致脚本拿不到DOM节点，报 Cannot read property of null。

脚本能干什么，边界在哪

JS脚本代码跑在沙箱里。它能操作当前页面的DOM，能读写Cookie和localStorage，能发fetch请求，但拿不到用户硬盘上的文件，也不能直接调用操作系统API。这是浏览器的安全策略，同源策略限制了跨域请求，CSP（内容安全策略）进一步约束了脚本能加载哪些外部资源。

Node.js把JS从浏览器里解放出来之后，脚本能做的事扩展到了服务端。读写文件、起HTTP服务、操作数据库，这些在浏览器里想都别想。但Node环境没有DOM，document 对象不存在，写代码时得区分清楚运行环境。

有个细节值得注意：<script> 标签里的代码执行时，浏览器会阻塞页面渲染。如果脚本里有耗时操作，比如同步Ajax或者大循环，用户会看到白屏。把脚本放到 <body> 末尾，或者用 defer，能避免这个问题。这不是什么高级技巧，但实际项目里经常被忽略。

写JS脚本代码，归根结底是在跟浏览器的执行模型打交道。知道代码什么时候执行、在哪个环境执行、能访问什么、不能访问什么，比记住多少API都管用。