本文探讨了浏览器加载HTML、CSS和图片的过程，以及渲染页面的步骤，包括DOM树、CSSOM的构建和渲染树的生成。浏览器在加载CSS时同步进行，而图片加载为异步。在渲染过程中，可能会因资源加载导致回流和重绘，从而影响页面性能。
首先抛出写这篇文章之前一直在思考的两个问题：
1.浏览器在加载外部css文件和图片文件时是同步加载还是异步加载？
2.浏览器的加载和渲染时同时进行的还是先加载完成再渲染？
下面的是我查到的一些资料和自己的一些理解：
浏览器加载和解析html页面过程
1.用户输入url，浏览器向服务器发出请求，服务器返回html文件
2.浏览器开始加载html代码，发现<head>标签内有一个link标签引用外部css资源
3.浏览器又发出css文件的请求，服务器返回这个css文件（这个过程是同步的，浏览器会等到css文件加载完再往下加载）
4.浏览器继续载入html中<body>部分代码，并且css文件已经到手可以开始渲染页面了
5.浏览器发现一个<img>标签引用了一张图片向服务器发出请求，此时浏览器不会等到图片下载完，而是继续渲染后面的代码。
6.服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的布局，此时浏览器开始需要回过头来重新渲染这部分代码。
7.浏览器加载<script>标签，如果没有异步属性设置则同步加载文件，并马上执行
8.如果js改变了原本的布局则浏览器又开始回流重绘
总结： 浏览器加载是自上而下加载的
浏览器的渲染过程
1.浏览器会将html解析成一个DOM树，DOM树的构建过程是一个深度遍历过程（当前节点的所有子节点构建好才会去构建当前结点的下一个兄弟节点）
2.将css解析成CSS Rule True
3.根据DOM树和CSSOM来构建Rendering Tree(渲染树和DOM树类似但不同，例如：<head>, display:none,等无法显示的东西不会出现在渲染树中，注意：visibility:hiden还是会出现的)
4.有了渲染树，浏览器就开始计算每个节点在屏幕中的位置
5.最后就是遍历render树，绘制每个节点
根据资料上说：上述过程是逐步完成的，为了更好的用户体验，渲染引擎会尽可能早的将内容呈现到屏幕上，并不会等到所有html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时可能还在通过网络下载其余内容。
个人理解这样可能在浏览器渲染的过程中会产生多次回流重绘，不知道这样理解是否正确，希望大家有更好的理解可分享。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
