html如何执行_浏览器执行HTML代码的过程【过程】

浏览器按顺序执行HTML：先发起网络请求获取HTML及外部资源；再解析HTML构建DOM树，遇JS暂停解析并执行；同时解析CSS构建CSSOM树，最后结合二者渲染页面。

当您在浏览器中打开一个HTML文件时，浏览器会按照特定顺序解析和渲染页面内容。以下是浏览器执行HTML代码的详细过程：

一、网络请求与资源获取

浏览器首先根据URL发起HTTP请求，从服务器获取HTML文档。若HTML中包含外部资源链接（如CSS、JavaScript、图片等），浏览器会并行发起额外请求以下载这些资源。

1、浏览器解析URL，确定协议、域名和路径。

2、通过DNS查询将域名解析为IP地址。

立即学习“前端免费学习笔记（深入）”；

3、建立TCP连接，发送HTTP GET请求获取HTML文件。

4、接收响应后，检查状态码，确认HTML内容成功返回。

二、HTML解析与DOM树构建

浏览器使用HTML解析器逐字节读取接收到的HTML文本，并依据HTML5规范进行词法分析和语法分析，生成节点对象，最终构建出文档对象模型（DOM）树。

1、解析器识别起始标签、结束标签、属性、文本内容等标记。

2、遇到<script>标签且无defer或async属性时，暂停HTML解析，立即下载并执行JavaScript代码。</script>

3、将每个有效元素转换为DOM节点，并按嵌套关系组织为树状结构。

4、DOM树不包含CSS样式信息，仅反映HTML结构层次。

三、CSS解析与CSSOM树构建

浏览器同时或随后解析所有CSS资源（内联style、link引入的外部CSS、style标签内容），将其转化为层叠样式表对象模型（CSSOM）树，用于描述每个元素应具有的样式规则。

1、对每个CSS资源进行词法与语法解析，识别选择器、属性和值。

标签： css javascript java html js html5 浏览器 字节 ai html文件 dns 状态码 c