输入URL到页面渲染的整个流程的总结

2,325 阅读2分钟
  1. 输入URL地址
  2. 浏览器进行DNS查询,查找域名对应的IP地址 2.1 浏览器在本地hosts文件中查找有没有对应的IP地址 2.2 发出一个DNS请求到本地DNS服务器 2.3 本地服务器查询缓存中是否存在对应关系,若有则返回,没有则向DNS根服务器查询 2.4 DNS根服务器返回域名所在的域名服务器 2.5 本地DNS服务器向该域名服务器发出请求,域名服务器返回该域名的解析服务器的地址 2.6 本地DNS服务器向域名的解析服务器发出请求,收到该域名和IP地址的对应关系,保存到缓存并返回
  3. 建立TCP连接,浏览器向web服务发送http请求
  4. 服务器处理请求,并返回状态码和html文件
  5. 浏览器判断状态码,如果是 200 那就继续解析,如果 400 或 500 的话就会报错,如果 300 的话会进行重定向发送另一个请求
  6. 浏览器开始显示HTML。当浏览器获得一个html文件时,会“自上而下”加载,并在加载过程中进行解析渲染。 解析: 6.1. 浏览器会将HTML解析成一个DOM树,DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 6.2. 将CSS解析成 CSS Rule Tree 。 6.3. 根据DOM树和CSSOM来构造 Rendering Tree。注意:Rendering Tree 渲染树并不等同于 DOM 树,因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。 6.4.有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout,顾名思义就是计算出每个节点在屏幕中的位置。 6.5.再下一步就是绘制,即遍历render树,并使用UI后端层绘制每个节点。 注意点:上述这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。
  7. 浏览器发送请求获取嵌入在HTML中的资源