浏览器是如何加载和渲染页面的

1.如何加载？

1）解析域名

　　你要访问一个网站，浏览器需要知道网站的IP地址，所以它向服务器发送一个包含域名的请求，然后DNS服务器返回对应的IP地址。

2）发起请求

　　浏览器向DNS查找到的那个IP地址的主机发起TCP连接，然后发送请求，请求中包含网址、浏览器信息、浏览器能接受的数据类型（也就是编码语言）、以及所有相关的cooies（存储在用户本地终端上的数据）（包含域和路径的cookies）

3）下载

　　浏览器会下载相关文件，浏览器解析html并识别出更多的资源，然后浏览器开始获取这些资源。

 

2.如何渲染？

 

 

 

1）根据html文件构造DOM树根据css文件构造CSSOM树。构建树期间，如果遇到JS，则阻塞DOM树和CSSOM树的构建，优先加载JS文件，加载完毕后再继续构建DOM树和CSSOM 树。(JS会对DOM节点进行操作，浏览器无法预测未来的DOM节点的具体内容，为了防止无效操作，节省资源，只能阻塞DOM树的构建。譬如，若不阻塞DOM树的构建，若JS删除了某个DOM节点A，那么浏览器为构建此节点A花费的资源就是无效的。)

　　HTML 文档中的所有内容皆是节点，各节点之间拥有层级关系，如父子关系、兄弟关系等，彼此相连，构成DOM树。

　　CSS文档中，所有元素皆是节点，与HTML文件中的标签节点一一对应。CSS中各节点之间同样拥有层级关系，如父子关系、兄弟关系等，彼此相连，构成CSSOM树。

 

 　　

 　　　　为什么将CSS放在HTML前面？

　　　　让浏览器早点拿到CSS生成CSSOM，然后在解析HTML之后克一次性生成最RenderTree，渲染一次就行了，如果放在HTML底部，会出现渲染卡顿的情况，影响性能和体验。

 　　　　为什么要将JS放在HTML后面？

　　　　JS 放在底部可以保证让浏览器优先渲染完现有的 HTML 内容，让用户先看到内容，体验好。另外，JS 执行如果涉及 DOM 操作，得等待 DOM 解析完成才行，JS 放在底部执行时，HTML 肯定都解析成了 DOM 结构。JS 如果放在 HTML 顶部，JS 执行的时候 HTML 还没来得及转换为 DOM 结构，可能会报错。 

2）将DOM和CSSSOM整合成RenderTree(渲染树)

　　渲染树（Render Tree）由DOM树、CSSOM树合并而成，但并不是必须等DOM树及CSSOM树加载完成后才开始合并构建渲染树。三者的构建并无先后条件，亦非完全独立，而是会有交叉，并行构建。因此会形成一边加载，一边解析，一边渲染的工作现象。

构建渲染树，根据渲染树计算每个可见元素的布局，并输出到绘制流程，将像素渲染到屏幕上。

3）页面的重绘和重排

重排必将引起重绘，而重绘不一定会引起重排。