输入URL到页面渲染的整个流程
2021-04-07 11:25
标签：模块加载 code 组合 选择 请求 添加 报文 链路 信息 1）应用层进行DNS解析 通过域名解析成IP地址。在解析过程中，按照 当你在浏览器中想访问 这里可以使用预解析，提前解析可能用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，提高网站访问速度。 2）应用层生成HTTP请求报文 HTTP请求报文包括起始行、首部和主体部分。 如果访问的google.com，则起始行可能如下 首部包括域名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绘制，合成图层，显示。 重绘和回流 重绘是当节点需要改变外观而不会影响布局的； 回流是布局或者几何属性需要改变的。 回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。 以下几个动作可能会导致性能问题： 输入URL到页面渲染的整个流程 标签：模块加载 code 组合 选择 请求 添加 报文 链路 信息 原文地址：https://www.cnblogs.com/lora404/p/12488032.html浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址。www.google.com 时，会进行一下操作：
com 这个一级域名的服务器google 这个二级域名www 这个域名配置一个 IP，然后还可以给别的三级域名配置一个 IPGET https://www.google.com/ HTTP/1.1
window 大小
下一篇：CSS3动画