url由协议、域名、端口、路径、查询参数、锚点组成
解析出域名ip地址、下一步进行DNS查询
![]()
网络进程检查强缓存,若有责直接返回给浏览器进程,没有则进入网络请求过程
如果是域名就解析成ip
DNS解析流程
三次握手,确定通行双方的发送与接收功能是否正常,同步通信序列号,交换tcp通信窗口大小与最大报文段长度(mss) 查询到IP地址和端口后进行三次握手
服务端首先要在某个端口进入Listen状态
客户端发送SYN同步报文,把SYN标志位置1,序列号(sequence number) 生成一个跟时间有关的随机数,目的是为了告诉服务端客户端的初始序列号,序列号的作用是解决包乱序、重复,以及对端回复确认收到的数据,同时客户端进入SYN_SENT状态
服务端收到客户端的SYN包后,回复SYN+ACK,序列号也是生成一个服务端的序列号,确认号为客户端传来的序列号+1,告诉客户端,这个序列号之前的数据都已经接收到,其实在这里就是回复收到了客户端的请求报文。服务端进入SYN_RCVD状态。
客户端收到服务端的SYN+ACK包后,回复ACK,也代表客户端收到了服务端的同步报文,同时,客户端进入ESTABLISHED状态。服务端收到ACK包后,进入ESTABLISHED状态。
浏览器对服务器 我喜欢你
服务器对浏览器 我也喜欢你
浏览器对服务器 知道啦(不然浏览器不知道服务器也喜欢浏览器)
F&Q
http1.0 1.1 2.0区别
握手完成之后,就要构建请求行,例如包含GET /index.html http/1.1.
POST请求等,再发送请求体如果请求的URL地址是HTTPS协议,那么还要进行TLS握手。
Client Hello包,里面主要包含密码套件、客户端随机数Client_Random、TLS版本,密码套件包括HTTPS中使用的算法对称加密、非对称加密、摘要算法,例如Cipher Suite: TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256 (0xc02f),分别是非对称加密算法,非对称加密算法(可能是用于身份验证,私钥加密)、对称加密算法、摘要算法Server Hello包,包含选择的密码套件、服务器随机数Server_Random,版本号ECDHE算法,服务端发送Server Key Exchange,主要是为了发送Server_Param,用于生成第三个数,也就是配合Client_Param生成合成会话密钥的最后一个数.Server Hello Done,打招呼结束了HASH算法,生成一个消息摘要,生成的消息摘要跟解密获得的消息摘要比较是否相同。相同则该公钥是服务器的公钥,也就是完成服务器的身份验证Client Key Exchange,给服务器发送Client_Param。同时,自己根据Client_Param、Server_Param,生成一个pre-master,再根据Client_Random、Server_Random、pre-master生成最终的会话密钥---对称加密的钥匙Change Cipher Spec,代表下面的通信就将使用加密通信,也为了校验会话密钥两者是否相同。Change Cipher Spec,TLS握手结束。等待服务器返回响应。
响应也是状态行、响应头、响应体 根据状态码,如果是301,那么就要根据Location进行重定向了,
如果是200,代表浏览器可以继续处理请求。
根据Content-Type,如果是文件,就交给浏览器的下载管理器去下载。
如果是HTML,就提供给渲染进程,进行页面的渲染了。
常见状态码
1xx:指示信息–表示请求已接收,继续处理。
2xx:成功–表示请求已被成功接收、理解、接受。
3xx:重定向–要完成请求必须进行更进一步的操作。
4xx:客户端错误–请求有语法错误或请求无法实现。
5xx:服务器端错误–服务器未能实现合法的请求。
客户端来决定何时关闭连接,确保数据能够完整传输 假如客户端没有数据发送,要关闭TCP连接了。 1、 客户端发送
FIN包,把FIN标志位置1,客户端进入FIN-WAIT1状态。 2、 服务端回复ACK包,服务端进入CLOST-WAIT状态。 3、 客户端接收到ACK包后,进入FIN-WAIT2状态。
等待服务器的主动关闭
4、 服务器发送FIN报文。服务器进入LAST-ACK状态
5、 客户端回复ACK报文,客户端进入TIME_WAIT状态,等待2MSL后,进入CLOSE状态。
6、 服务器收到回复后,进入CLOSE状态。
chrome未每个页面分配一个渲染进程,同一站点复用一个进程
解析HTML生成DOM树。
解析CSS生成CSSOM规则树。
将DOM树与CSSOM规则树合并在一起生成渲染树。
递归遍历渲染树开始布局,计算每个节点的位置大小信息。
将渲染树每个节点绘制到屏幕。
合成层的硬件加速
3D 或透视变换(perspective transform) CSS 属性
使用加速视频解码的 video 元素 拥有 3D
WebGL 上下文或加速的 2D 上下文的 canvas 元素
混合插件(如 Flash)
对自己的 opacity 做 CSS动画或使用一个动画变换的元素
拥有加速 CSS 过滤器的元素
元素有一个包含复合层的后代节点(换句话说,就是一个元素拥有一个子元素,该子元素在自己的层里)
元素有一个z-index较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)