从一个url 地址到最终页面渲染完成,发生了什么?

38 阅读2分钟

从一个url 地址到最终页面渲染完成,发生了什么?

  1. Dns 解析:将域名地址解析为ip 地址

     首先读取浏览器dns 缓存,如果没有就去读取系统dns缓存,如果还没有,就接着去读取路由器dns 缓存。如果还是没有,就接着去读取网络运营商dns缓存。

      然后再去做递归搜索,比如域名:blog.baidu.com

        首先去.com域名下查找dns 解析,然后再去 .baidu域名 下查找dns解析。最后再去blog域名下查找。

      如果一直没有找到,就会出错了。

  1. TCP连接:称为TCP的三次握手。

     第一次握手,是由浏览器发起,告诉服务器我要发送请求了

      第二次握手,由服务器发起,告诉浏览器我准备接收了,你赶紧发送吧

     第三次握手,由浏览器发送,告诉服务器,我发上去了,准备接收吧。

  1. 发送请求

     — 请求报文:HTTP协议的通信内容

  1. 接收响应

     — 接收 响应报文

  1. 渲染页面

    — 遇见html标记,浏览器调用HTML 解析器解析成Token 并构建成dom树。

   — 遇见 style / link 标记,浏览器调用css解析器,处理css标记并构建cssom树。

    — 遇见script 标记,调用javascript 解析器,处理script 代码(绑定事件,修改dom树 / cssom 树)

   — 将 dom 树 和 cssom 树合并成一个渲染树

   — 根据渲染树来计算布局,计算每个节点的几何信息(既所谓的布局)。

   — 布完局之后,会将各个节点颜色绘制到屏幕上(即渲染)

注: 

    这五个步骤不一定是按照顺序执行的,有的可能会反复执行多次。如果dom树或cssom 树被修改了,可能会执行多次布局和渲染。往往实际页面中,这些步骤都会执行多次的。

  1. 断开连接:TCP四次挥手

    第一次挥手:由浏览器发起的,发送给服务器,告诉服务器我东西发送完了(即请求报文),你准备关闭吧。

   第二次挥手:由服务器发起的,告诉浏览器,请求报文接收完了,我准备关闭了,你也准备吧。

   第三次挥手:由服务器发起,告诉浏览器,我东西发送完了(即响应报文),你准备关闭吧。

   第四次挥手:由浏览器发起,告诉服务器,我东西接收完了,我准备关闭了(即响应报文),你也准备吧。