渲染步骤:浏览器渲染页面时,表示网站资源已经请求成功(要了解查看:浏览器向服务器请求资源过程)
解析HTML以构建dom树--->构建render树--->布局render树--->绘制render树
1.浏览器会将HTML解析成一个DOM树,构建DOM树是一个深度遍历的过程,当前节点的所有子节点都构建好以后才会去构建当前节点的下一个兄弟节点;
2.将CSS解析成CSS规则树;
3.根据DOM树和CSS规则树来构造render树,render树不等于DOM树,像header和display:none;这种没有具体内容的东西就不在render树中;
4.根据render树,浏览器可以计算出网页中有哪些节点,各节点的CSS以及从属关系,然后可以计算出每个节点在屏幕中的位置;
5.遍历render树绘制页面中的各元素。
注意:
页面发生重构的话,会重新加载DOM树,影响页面加载速度,会导致页面重构的原因如下:
1)页面初始化;
2)操作DOM时;
3)某些元素的尺寸变了;
4)CSS的属性发生改变。
加载HTML页面步骤:
1.用户输入网址,浏览器向服务器发出请求,服务器返回HTML文件;
2.浏览器开始载入HTML代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
3.浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
4.CSS文件获取到以后,浏览器继续载入HTML中<body>部分的代码;
5.浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求,此时浏览器不会等到图片下载完,而是继续加载后面的代码;
6.服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排版,因此浏览器需要回过头来重新渲染这部分代码;
7.浏览器发现了一个包含一行js代码的<script>标签,直接运行该脚本;
8.执行js过程中,发现代码中要隐藏某个元素(style.display='none'),这时浏览器不得不重新渲染这部分代码;
9.整个<html></html>文档暂时加载完成;
10.此时用户点了一下界面中的“换肤”按钮,js让浏览器换了一下<link>标签的CSS路径;
11.浏览器向服务器请求了新的CSS文件,重新加载页面,然后执行渲染过程。
浏览器向服务器请求资源过程:
浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、image及其他格式。用户用URI(Uniform Resource Identifier统一资源标识符)来指定所请求资源的位置,通过DNS查询,将网址转换为IP地址,整个浏览器工作的流程:
1.输入网址;
2.浏览器查找域名的IP地址;
3.浏览器给web服务器发送一个HTTP请求 ;
4. 网站服务的永久重定向响应 ;
5. 浏览器跟踪重定向地址 现在,浏览器知道了要访问的正确地址,所以它会发送另一个获取请求;
6. 服务器“处理”请求,服务器接收到获取请求,然后处理并返回一个响应;
7. 服务器发回一个HTML响应 ;
8. 浏览器开始显示HTML ;
9.
浏览器发送请求,以获取嵌入在HTML中的对象,在浏览器显示HTML时,它会注意到需要获取其他地址内容的标签,这时,浏览器会发送一个获取请求来重新获得这些文件,这些文件就包括CSS/JS/图片等资源,这些资源的地址都要经历一个和HTML读取类似的过程,所以浏览器会在DNS中查找这些域名,发送请求,重定向等。