script 与 style

script 与 style 分别把 JavaScript 与 CSS 带进文档：<script> 用 src 引外部脚本或直接内联代码，<style> 在文档里写样式规则^[1][2]。两者都影响渲染时机，进而影响用户看到内容的时间与抓取看到的形态。

渲染路径上的位置

浏览器要先拿到 CSS 才能构建渲染树，关键 CSS 会阻塞首屏渲染^[3]。外部脚本在默认写法下会中断 HTML 解析，等脚本下载执行完才继续^[1]。

defer    解析完文档后、触发 DOMContentLoaded 前执行
async    下载完成就执行，顺序不保证
无属性   解析到就停下、下载、执行

defer 适合依赖文档结构的脚本，async 适合彼此独立的第三方统计代码^[1]。

与抓取和索引的关系

Google 的抓取分两步：先拿到 HTML，再渲染并执行脚本^[4]。正文如果只由脚本生成，索引读到的内容要等渲染完成，这一步不在所有引擎上都有同等保障^[4]。服务端直接输出 HTML 的站点不需要依赖这条链路。

样式造成的隐藏内容同样要留意：正文用 display:none 收起后，读屏与部分处理流程会按隐藏状态对待^[5]。

常见误用

第一种是把整站样式塞进一个巨大的外部 CSS，首屏要等它^[3]。第二种是给正文内容用脚本注入，地址又能被单独抓取，索引里出现没有正文的页面^[4]。第三种是多个 async 脚本互相依赖，加载顺序变了就报错。

附录

参见

• head 元素
• link
• 关键渲染路径
• 延迟加载
• 隐藏内容与 CSS
• 客户端渲染（CSR）

参考资料

官方（境外）

1. 《<script> HTML 元素》，MDN Web 文档。
2. 《<style> HTML 元素》，MDN Web 文档。
3. 《关键渲染路径》，web.dev，Google。
4. 《了解 JavaScript SEO 基础知识》，Google 搜索中心。
5. 《避免隐藏文本》，web.dev，Google。

外部链接

• HTML 标准：脚本与样式，WHATWG。