本文探讨了浏览器加载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树
最低0.47元/天 解锁文章
1531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
