# 让页面动起来的第一步：脚本放在哪、什么时候跑，以及怎么找到并改掉一个元素不带 defer 的脚本会暂停 HTML 解析，defer 与 async 各改掉哪一段时机，以及如何用 CSS 选择器找到元素、改掉它的文字和样式 > DOM · 浏览器工作原理 · CSS 基础 · 约 7 分钟 · 10 月 08 日 ## 本篇要点 1. ` ``` 外链写法更常用，因为代码可以独立编辑、被多个页面共用，浏览器也能缓存这个文件。有一点容易踩：写了 `src` 之后，标签之间的内容会被完全忽略，不会执行。 ## 不带 defer 的脚本会让解析停下来等它要理解“什么时候执行”，得先回想第 1 篇里的那条主线：浏览器拿到 HTML 后是**一边下载、一边解析**的，解析器从上往下依次处理标签，遇到元素就建一个节点，逐步搭出那棵文档树。当解析器走到一个不带 `async`、也不带 `defer` 的 ` ``` `defer` 的效果是：脚本的下载和 HTML 解析**同时进行**，不阻塞解析；等整个文档解析完成之后，再按脚本在页面上出现的顺序依次执行。两全其美，所以现代写法常常就是“`

今天的天气

页面刚打开时，这里是静态的文字。

``` ```css /* style.css */ .highlight { color: #b3005e; } ``` ```js // app.js const title = document.querySelector("#title"); const note = document.querySelector(".note"); title.textContent = "天气组件已启动"; title.classList.add("highlight"); note.textContent = "这段文字是脚本运行后替换上去的。"; ``` 结果是：脚本一执行，标题文字就被换成了“天气组件已启动”并变成玫红色，段落也被替换。这次每次查找都能成功，靠的正是 `defer` 给出的保证——脚本开始跑的时候，`h1` 和 `p` 都已经在 DOM 里了。

小练习：把这个例子里的 defer 去掉，其余不动，会发生什么？

解析器走到 `head` 里的 `