浏览器是否会在HTML解析、CSS加载完成后，于JS下载/执行前显示页面？

答案是会显示页面，但具体表现取决于JavaScript的加载位置和属性，以下分场景说明：

• 常规场景（JS放在<body>底部，无特殊属性）
  当HTML解析完成、CSS加载并解析完成（CSSOM构建完成）后，浏览器会立刻把已构建好的DOM和CSSOM合并成渲染树，依次完成布局、绘制步骤，直接显示页面的可见内容。此时JS即使还在下载或未执行，也不会影响页面的首次显示——后续JS执行时，只会通过DOM操作修改已渲染的页面内容（比如动态添加元素、更新样式）。

• JS放在<head>且无async/defer属性
  这种情况下，HTML解析到<script>标签时会暂停解析流程，优先等待JS下载并执行（因为JS可能会修改DOM或CSSOM）。但如果此时CSS已经加载完成，浏览器会基于已解析完成的DOM部分（比如<script>标签之前的<body>内容）和CSSOM生成局部渲染树，先渲染这部分可见内容，不会等到JS执行完才显示任何内容。比如<script>标签前的<h1>、<p>等元素，会正常渲染出来，而标签后的内容要等JS执行完才会继续解析和渲染。

• 带async/defer属性的JS
  这类JS不会阻塞HTML解析流程，HTML可以正常解析完成，CSS加载完成后，浏览器直接构建完整的渲染树并渲染整个页面。JS会在后台异步下载，完成后再执行，执行过程中如果有DOM操作，只会动态修改已显示的页面。

补充几个关键渲染逻辑：

• 浏览器的核心渲染链路是：HTML解析→DOM构建 → CSS解析→CSSOM构建 → 渲染树构建 → 布局 → 绘制 → 合成
• CSS会阻塞渲染（必须等CSSOM和DOM结合才能生成渲染树），但不会阻塞HTML解析；JS默认会阻塞HTML解析和渲染，除非使用async/defer解除阻塞。
• 只要HTML解析完成、CSS加载完成，且没有被JS完全阻塞DOM解析，浏览器就会立即启动渲染流程，显示页面内容。

内容的提问来源于stack exchange，提问作者Vince