码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-03-13 18:44:31      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:模块加载   code   组合   选择   请求   添加   报文   链路   信息   

1)应用层进行DNS解析

通过域名解析成IP地址。在解析过程中,按照浏览器缓存系统缓存路由器缓存ISP(运营商)DNS缓存根域名服务器顶级域名服务器主域名服务器的顺序,逐步读取缓存,直到拿到IP地址。

当你在浏览器中想访问 www.google.com 时,会进行一下操作:

  1. 操作系统会首先在本地缓存中查询 IP
  2. 没有的话会去系统配置的 DNS 服务器中查询
  3. 如果这时候还没得话,会直接去 DNS 根服务器查询,这一步查询会找出负责 com 这个一级域名的服务器
  4. 然后去该服务器查询 google 这个二级域名
  5. 接下来三级域名的查询其实是我们配置的,你可以给 www 这个域名配置一个 IP,然后还可以给别的三级域名配置一个 IP

这里可以使用预解析,提前解析可能用到的域名,使解析结果缓存到系统缓存中,缩短DNS解析时间,提高网站访问速度。

2)应用层生成HTTP请求报文

HTTP请求报文包括起始行、首部和主体部分。

  如果访问的google.com,则起始行可能如下

GET https://www.google.com/ HTTP/1.1

  首部包括域名host、keep-alive、User-Agent、Accept-Encoding、Accept-Language、Cookie等信息

  首部和主体内容之间有一个回车换行(CRLF),主体内容即要传输的内容。如果是get请求,则主体内容为空

3)传输层建立TCP连接

TCP协议是面向连接的,所以它在开始传输数据之前需要先建立连接。要建立或初始化一个连接,两端主机必须同步双方的初始序号。同步是通过交换连接建立数据分段和初始序号来完成的,在连接建立数据分段中包含一个SYN(同步)的控制位。同步需要双方都发送自己的初始序号,并且发送确认的ACK。此过程就是三次握手

TCP三次握手我之前有写过随笔,就不再介绍。

  构建TCP请求会增加大量的网络时延,常用的优化方式如下所示

  (1)资源打包,合并请求

  (2)多使用缓存,减少网络传输

  (3)使用keep-alive建立持久连接

  (4)使用多个域名,增加浏览器的资源并发加载数,或者使用HTTP2的管道化连接的多路复用技术

4)网络层使用IP协议来选择路线

处理来自传输层的数据段segment,将数据段segment装入数据包packet,填充包头,主要就是添加源和目的IP地址,然后发送数据。在数据传输的过程中,IP协议负责选择传送的路线,称为路由功能

5)数据链路层实现网络相邻结点可靠的数据通信

为了保证数据的可靠传输,把数据包packet封装成帧(Frame),并按顺序传送各帧。由于物理线路的不可靠,发出的数据帧有可能在线路上出错或丢失,于是为每个数据分块计算出CRC(循环冗余检验),并把CRC添加到帧中,这样接收方就可以通过重新计算CRC来判断数据接收的正确性。一旦出错就重传。

6)物理层传输数据

数据链路层的帧(Frame)转换成二进制形式的比特(Bit)流,从网卡发送出去,再把比特转换成电子、光学或微波信号在网络中传输

7)服务器传输一个HTTP响应报文

8)浏览器解析

1、如果HTTP响应报文是301或302重定向,则浏览器会相应头中的location再次发送请求

2、浏览器处理HTTP响应报文中的主体内容,首先使用loader模块加载相应的资源

3、使用parse模块解析HTML、CSS、Javascript资源

 

9)布局和渲染

 

浏览器渲染原理:

浏览器接收到HTML文件并转换为DOM树:字节数据(0,1)转换为字符串,通过词法分析转换为标记,紧接着转换为Node,不同Node之间构建为一棵DOM树。将css文件转换为CSSOM树也类似这样。

下一步将两棵树组合为渲染树,渲染树仅包括需要显示的节点和这些节点的样式信息。当浏览器生成渲染树后,调用GPU绘制,合成图层,显示。

 

重绘和回流

重绘是当节点需要改变外观而不会影响布局的;

回流是布局或者几何属性需要改变的。

回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变父节点里的子节点很可能会导致父节点的一系列回流。

以下几个动作可能会导致性能问题:

  • 改变 window 大小
  • 改变字体
  • 添加或删除样式
  • 文字改变
  • 定位或者浮动
  • 盒模型

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

标签:模块加载   code   组合   选择   请求   添加   报文   链路   信息   

原文地址:https://www.cnblogs.com/lora404/p/12488032.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!