浏览器通过解析html构建dom树，加载css与javascript等资源，执行脚本动态修改页面，最后进行布局、绘制和合成，将内容渲染到屏幕。
如果您编写了一段HTML代码，想要在浏览器中查看其效果，但不清楚背后的执行过程，以下是关于HTML运行机制与流程的详细解析：
一、浏览器解析HTML文档
当用户在地址栏输入网址或点击链接时，浏览器会向服务器发起请求获取对应的HTML文件。获得响应后，浏览器开始对HTML文档进行解析，将其转换为可渲染的内容。
1、浏览器读取HTML源码，按照从上到下的顺序逐行扫描内容。
2、遇到标签时，构建对应的DOM节点，并逐步形成完整的DOM树结构。
3、若文档中包含字符编码声明（如UTF-8），浏览器将依据该信息正确解析文本内容，避免乱码问题。
二、加载外部资源并构建渲染树
HTML文档通常依赖CSS样式表、JavaScript脚本和图片等外部资源。浏览器需要协调这些资源的加载顺序以确保页面正常显示。
1、解析过程中遇到引入的CSS文件时，浏览器会异步下载，并根据媒体类型判断是否应用此样式。
2、对于<script>标签引用的JavaScript文件，默认情况下会暂停HTML解析直到脚本下载并执行完毕，除非添加了<strong><font color="green">async或defer属性来改变行为。</script>
3、图像、字体等资源被加入下载队列，待可用时填充到对应位置。
三、执行JavaScript脚本
JavaScript可以在HTML加载的不同阶段执行，从而动态修改页面内容或绑定交互事件。
1、内联脚本或外部脚本一旦加载完成，即由JavaScript引擎进行编译和运行。
2、脚本可通过DOM API访问和操作元素，例如通过document.getElementById修改某个标签的文字内容。
3、若脚本位于文档头部且未使用延迟加载，则可能因DOM尚未完全构建而导致操作失败，建议将脚本置于底部或使用DOMContentLoaded事件监听。
四、布局与绘制页面
在DOM树与CSSOM树合并成渲染树之后，浏览器进入排版和绘制阶段，最终将像素输出至屏幕。
1、浏览器计算每个可见元素的几何位置，这一过程称为布局（Layout）或重排（Reflow）。
2、根据布局信息，将各个图层绘制为像素数据，称为绘制（Paint）阶段。
3、合成器将多个图层组合成最终画面，提交给GPU进行显示更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
