浏览器如何从服务器返回的文件中确定渲染入口点？

嘿，这个问题其实挺关键的，很多刚接触前端的同学都会有类似疑惑，我来给你拆解清楚～

首先得明确核心结论：服务器返回的主HTML文件（绝大多数场景下是index.html）就是浏览器渲染流程的绝对入口点，CSS是依赖于HTML才能发挥作用的资源，本身并不作为独立入口存在。

具体的处理流程可以拆成这几步：

• 当浏览器接收到服务器返回的HTML文件后，会立刻从文件的第一行开始自上而下逐行解析，同时构建DOM树（文档对象模型）——这就是渲染流程的起点。
• 在解析HTML的过程中，如果遇到引用CSS的标签（比如<link rel="stylesheet" href="style.css">这种外部样式引用，或者<style>标签里的内联样式），浏览器会并行发起CSS资源的请求，同时继续解析HTML；但会等CSS下载并解析完成后，构建出CSSOM（CSS对象模型），再把DOM和CSSOM合并成渲染树，最后进行布局、绘制等步骤。
• 为什么HTML是唯一入口？因为所有的CSS、JS、图片等资源，都是通过HTML里的标签引入的，浏览器没有其他默认的“入口约定”——它只会从服务器返回的那个主HTML文件开始启动整个渲染流程。

再补充几个容易混淆的点：

• 如果服务器错误地直接返回了CSS文件（而不是HTML），浏览器只会把CSS内容当成纯文本显示，不会渲染成样式——因为它找不到可以应用这些样式的DOM结构。
• 像React、Vue这类单页应用（SPA），服务器返回的HTML往往非常极简，可能只有一个根节点（比如<div id="app"></div>），后续的页面内容都是通过JS动态生成的，但即便如此，这个极简HTML依然是渲染的入口点，所有动态内容都是基于它来挂载的。

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