浏览器工作原理学习（三）

HTTP协议

• HTTP是一种允许浏览器向服务器获取资源的协议，是Web的基础,也是浏览器使用最广的协议。
• HTTP协议作为应用层协议，用来封装请求的文本信息。
• HTTP的内容是建立在TCP链接基础之上的。

浏览器发起HTTP流程

• 浏览器构建请求行信息。
• 查找浏览器缓存(本地保存资源副本),若找到了:浏览器会拦截请求，返回资源的副本并结束请求，如果缓存查询失败则进入网络请求阶段。
• 请求DNS服务器获取域名对应的IP地址，同时浏览器也提供DNS数据缓存服务（如果某个域名解析过，浏览器会缓存解析结果以供下次查询直接使用，从而减少一次网络请求）。获取IP之后需要获取端口号，HTTP协议默认端口是80。
• 等待TCP队列，chorme有个机制同一个域名同时最多建立6个TCP连接。
• 建立TCP连接。3次握手——>数据传输阶段——>4次握手断开连接。
• 发送HTTP请求，该阶段发生在TCP3次握手之后，也就是TCP连接数据传输阶段，请求行:请求方法+请求URL+HTTP协议版本。请求体:浏览器向服务器发送的数据。请求头:浏览器一些基础信息告诉服务器，如包含了浏览器所使用的操作系统、浏览器内核等信息、一级请求的域名信息和浏览器端的cookie信息。
• 服务器端处理HTTP请求：服务器返回数据给浏览器，响应行:HTTP协议版本、状态码。响应头:服务器自身的信息如返回数据的时间、返回的数据类型，以及服务器在客户端保存的Cookie信息。响应体：服务端返回给浏览器的数据。
• 断开TCP连接(TCP连接4次握手)，如果浏览器或者服务端信息头加上Connection:Keep-Alive，那么TCP连接仍旧保持打开状态（保持TCP连接可以省区下次请求时需要建立连接的时间，提升资源加载速度）。重定向（状态码301，且响应头中Location为重定向地址）。
• 浏览器解析资源，HTML生成DOM树，CSS生成规则树，2者生成渲染树。HTML和CSS加载解析时2者互不影响，但是js加载解析会阻塞HTML。
• 浏览器布局渲染:根据渲染树布局，计算CSS样式即每个节点在页面中的大小位置信息。HTML默认流失布局，CSS和JS会打破布局。这就引发回流(reflow)和重绘(repaint)。
  1.回流(reflow):页面布局和几何属性改变导致渲染树重构这一行为称为回流，完成回流后，浏览器会重新绘制受影响的部分这个过程称为重绘。
  2.重绘(repaint):渲染树中一些元素需要更新属性，这些属性只影响元素外观、风格而不会影响到渲染树的布局。
  3.回流必定引起重绘，重绘不一定引起回流。

浏览器缓存

• 浏览器通过相应头中的Cache-Control字段来设置是否缓存该资源，通常还需要为这个资源设置缓存过期时长，一般通过Cache-Control 中的MAX-age参数来设置。
• 如果缓存过期了，浏览器会继续发起网络请求，并且在HTTP请求头上带上:IF-None-Match:’’,服务器收到请求头后，会根据IF-None-Match的值来判断请求的资源是否有更新，如果没有更新就返回304状态码（服务器告知浏览器用本地缓存）
• 缓存周期内，浏览器会拦截请求读取浏览器缓存资源返回状态码200。