第 2 卷

• 处理样式继承（如子节点继承父节点的color/font）；

◦ 处理样式优先级（!important > 行内样式 > ID选择器 > 类/伪类/属性选择器 > 标签/伪元素选择

器 > 通配符）；

• 解决样式冲突，最终生成只读的CSSOM树；

1. 样式应用：CSSOM树与DOM树合并生成渲染树，为每个可见节点绑定最终样式；
2. 重排/重绘：若CSS样式修改（如宽高、颜色），会重新解析对应样式规则，触发回流/重绘，更新

页面展示。

关键特性

• CSS是异步加载、同步应用，加载完成后立即合并到CSSOM树；
• @import 会阻塞CSS解析，优先级低于 <link>，不推荐使用；
• CSS解析是自上而下，样式规则后定义覆盖先定义（同优先级）。

6. 详述浏览器加载和执行JavaScript文件的机制

JS加载执行核心机制（单线程+阻塞特性）

JavaScript是单线程执行，浏览器对JS的加载和执行具有阻塞性，核心流程分为加载→解析→编译→ 执行四步：

1. 资源加载

• 浏览器解析HTML时，遇到 <script> 标签，立即暂停后续HTML解析，发起HTTP请求加载JS文

件（默认阻塞）；

• 可通过属性优化加载：

◦ async：异步加载，加载完成后立即执行（执行顺序不确定，不阻塞HTML解析，阻塞渲

染）；

◦ defer：异步加载，HTML解析完成后、DOMContentLoaded事件前执行（执行顺序与标签

顺序一致，不阻塞解析/渲染）；

◦ type="module"：ES6模块加载，默认异步，遵循 defer 规则，支持按需加载、作用域隔

离。

1. 解析（Parse）

• JS引擎将JS文本拆分为令牌（Token），去除空格/注释，构建抽象语法树（AST）；
• 解析过程中发现语法错误，立即终止执行，控制台抛出语法错误。

• V8引擎采用即时编译（JIT）：将AST转换为字节码，再将热点代码（频繁执行）编译为机器码，

• 编译阶段完成变量提升、函数提升、作用域确定等预处理工作。

1. 执行（Execute）

• 按执行上下文栈顺序执行代码：全局执行上下文→函数执行上下文→eval执行上下文；
• 执行过程中处理变量赋值、函数调用、DOM操作、异步任务；
• 执行完成后，释放执行上下文，回收内存，继续解析后续HTML（无async/defer时）。

关键特性

• JS加载+执行默认阻塞HTML解析和页面渲染，原因是JS可修改DOM/CSSOM，避免渲染不一致；

• 异步JS（async/defer/module）仅解除对HTML解析的阻塞，仍会阻塞 DOMContentLoaded 事

件；

• 浏览器对JS文件有缓存机制，相同URL的JS文件会缓存到本地，避免重复请求。

7. 分析将JavaScript文件放置在HTML文档的不同位置对加载和执行的影

响

✅ 放置在 <head> 头部（ <head><script></script></head>）

影响

1. 严重阻塞：浏览器解析到 <script> 时，立即暂停HTML解析，发起JS请求→加载→执行，完成

后才继续解析HTML，页面白屏时间变长；

1. DOM获取失败：执行时HTML未解析完成，无法获取 <body> 内的DOM节点（如

document.getElementById() 返回null）；

1. 无交互风险：JS执行耗时过长时，页面完全无法交互，用户体验极差。

解决方案

• 加 async/defer 属性，改为异步加载；
• 所有DOM操作放入 DOMContentLoaded 事件回调。

✅ 放置在 <body> 尾部（ <body>...</body><script></script>）

影响

1. 无解析阻塞：HTML解析完成后才加载执行JS，页面先渲染内容，避免白屏，用户体验好；

• 这是最推荐的默认写法，兼顾DOM操作和页面加载速度。

✅ 放置在DOM节点中间（如 <div><script></script></div>）

影响

1. 局部阻塞：阻塞当前节点后续的HTML解析，仅展示前面的DOM内容，出现页面分段渲染；
2. 可获取前置DOM：执行时可操作前面已解析的DOM节点，无法操作后续节点；
3. 代码混乱：破坏HTML结构，不利于维护，不推荐使用。

✅ 核心对比总结

8. 定义回流(Reflow)在浏览器渲染过程中的含义，并解释何时会触发回流

回流（Reflow/Layout）的定义

回流是浏览器渲染过程中，重新计算渲染树中节点的位置、大小、间距、布局关系的过程，是布局阶段的核心操作，回流会直接修改页面的几何属性（位置/尺寸），性能消耗极高（需遍历整个渲染树，

计算坐标）。

注：回流是重绘的前提，只要触发回流，必然会触发后续的重绘。

触发回流的场景（核心：修改几何属性/DOM结构）

1. DOM结构修改

• 增删DOM节点（如 appendChild() / removeChild()）；
• 移动DOM节点（如 insertBefore() / append()）；

• 修改DOM节点的隐藏/显示（ display:none 触发回流， visibility:hidden 仅触发重

绘）。