浏览器工作原理 输入URL之后发生了什么

Happyileaf
609 阅读3分钟

「这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战」

浏览器工作原理 输入URL之后发生了什么

image.png

图片来源于文章导航流程：从输入URL到页面展示这中间发生了什么

  1. 用户输入url并回车

  2. 浏览器进程检查url，组装协议，构成完整的url

  3. 浏览器解析URL获取协议，域名，端口，路径

  4. 查看浏览器是否有资源的缓存

    1. 有。判断是否过期

      1. 没过期。直接读取缓存

      2. 过期。

        1. Etag和If-None-Match
        2. Last-Modify和lf-Modified-Since
        3. 文件修改了则把新资源发给浏览器（状态码200），没修改则告诉浏览器读取缓存（状态码304）

    2. 没有则进行下一步

  5. 首先进行DNS解析

    1. 寻找浏览器是否存在缓存，若没有
    2. 寻找操作系统是否存在缓存，若没有
    3. 寻找hosts文件中是否有域名和ip的对应关系，若没有
    4. 查找路由器中是否有缓存
    5. 寻找DNS服务器是否没缓存，若没有
    6. 向根域名服务器发送请求

  6. 生成HTTP请求

  7. 建立TCP连接，三次握手

    1. 客户端发送一个SYN=1,Seq=X的TCP包
    2. 服务端发回一个SYN=1,ACK=X+1，Seq=Y的TCP包
    3. 客户端发送ACK=Y+1，Seq=Y + 1的TCP包

  8. 如果是HTTP请求

    对HTTP报文进行报文分割并标记序号和端口号

  9. 如果是HTTPS请求

    1. 将HTTP报文交给TLS处理，TLS和服务端进行TLS握手，交换版本信息，加密算法，压缩算法，随机数（浏览器一个，客户端一个）。
    2. 服务端发送证书，浏览器用CA的公钥对其进行验证。
    3. 浏览器用服务端的公钥加密生成的预备主密码发送给服务端，两个随机数和预备主密码生成主密码
    4. 使用主密码生成对称加密的密钥对，消息认证码的密钥对，对称加密的CBC分组（分组模式）需要的初始化向量密钥对。
    5. 握手之后进行加密，对HTTP报文分组，分组后压缩，压缩后的数据和MAC一起加密。
    6. 对称加密保障私密性，消息认证码保障完整性，数字证书保障认证，防止中间人攻击。

  10. 对TCP报文打包，加入源IP地址和目标IP地址。

  11. 根据目标IP地址和路由表，查询下一跳路由。使用ARP查询下一跳路由的MAC地址。

  12. 对IP报文打包并附上MAC地址。

  13. 发送数据，服务端接收到请求并返回响应。

  14. 浏览器接收到HTTP响应，关闭TCP连接或保持复用，四次挥手。

  15. （如果返回了HTML）根据响应头的字符集进行解码

  16. 如果响应头没有字符集，则浏览器会默认用一套解码规则，当解析html解析到meta标签中的编码规则时，则替换成新的解码方式重新解码。

  17. 资源预解析，会将一些请求资源提前加入请求队列中

  18. 解析HTML为DOM树

1.  标记化（tokenizing）: 将HTML解析成标记

1.  构建树（tree construction）: 根据标记生成DOM树

17. 解析CSS为CSSOM

  1. 根据DOM树和CSSOM生成DOM渲染树
从DOM的根节点遍历所有可见节点，对其应用对应的CSSOM规则。不可见节点包括（script, meta标签， 被css隐藏的节点）

  1. 布局：浏览器获取每个渲染对象的位置和尺寸

  2. 绘制：将计算好的像素绘制到屏幕

  3. 渲染层/合成层合并

avatar
文章
阅读
粉丝