美文网首页Web前端之路
输入URL到页面渲染的整个流程

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

作者: 不思量q | 来源:发表于2019-10-08 22:58 被阅读0次
    1. DNS查询

      TCP握手之前就已经进行了DNS查询,这是操作系统的行为,操作系统首先会在本地缓存中查询IP;

      没有的话会去系统配置的DNS服务器中查询;

      再没有的话直接去DNS跟服务器查询,这一步会找出负责一级域名的服务器;

      然后去该服务器查询二级域名;

      接下来的三级域名是自己配置的,可以自己配置IP。

      以上是DNS迭代查询,除此之外还有递归查询,区别就是前者是由客户端自己去请求,后者是通过系统配置的DNS服务器请求,得到的结果最后都会返回到客户端。

    2. TCP握手

      应用层下发数据给传输层,(TCP协议会指明两端的端口号),然后下发给网络层。网络层的IP协议会确定IP地址,并且指示了数据传输过程中如何跳转路由器。然后包会在被封装到数据链路层的帧结构中,最后到物理层面的传输。

      TCP握手=>TLS握手=>正式传输数据

      数据进入服务端之前,可能还会经过负载均衡的服务器,其作用就是将请求合理的分发到多台服务器上,然后服务端响应。

    3. 浏览器判断状态码

      是 200 那就继续解析,如果 400 或 500 的话就会报错,如果 300 的话会进行重定向,这里会有个重定向计数器,避免过多次的重定向,超过次数也会报错。

    4. 浏览器开始解析文件

      gzip解压,文件解码成功后正式开始渲染流程,根据HTML构建DOM树、CSSOM树,遇到script标签会判断是否存在asyncdefer,前者并行下载并执行JS,后者先下载文件,等待HTML解析完成后才会顺序执行。如果都没有则会阻塞渲染流程直到JS执行完毕。下载文件过程中,如果使用HTTP/2则可以解决队头阻塞的问题。

      两树构建完成后开始生成Render树,这一步会确定元素布局等方面

    5. 生成Render
      这个过程中,浏览器会调用GPU绘制,合成图层,内容即渲染出来。

    相关文章

      网友评论

        本文标题:输入URL到页面渲染的整个流程

        本文链接:https://www.haomeiwen.com/subject/iogipctx.html