从刚开始做前端就有的问题，从头又梳理了一遍：
1. 浏览器侧处理
主要处理本地缓存、解析URL、DNS解析
1.1 本地缓存
对于本地资源来说，通过Cache-Control、Expires、Pragma（旧产物）来辨识，优先级：Pragma -> Cache-Control -> Expires，具体可参考这个浅谈http中的Cache-Control。
1.2 URL
地址栏里的链接，对应到window.location对象，可以对地址做个解析
1.3 DNS解析（DNS, Domain Name System）
解析顺序：本地host > 本地DNS服务器(网络服务商) (本地缓存，递归查询) > .根服务器 > .com顶域服务器 > google.com域服务器(查找到后本地DNS会增加缓存)，最终获得域名解析后对应的ip。
其中涉及到一个概念是DNS负载均衡，它的原理是在DNS服务器中为同一个主机名配置多个IP地址,在应答DNS查询时,DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果,将客户端的访问引导到不同的机器上去,使得不同的客户端访问不同的服务器,从而达到负载均衡的目的｡
2. 网络连接
2.1 封装请求报文
一个HTTP请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分组成。
1. 请求行由三部分组成：请求方法(GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT)，请求URL（不包括域名），HTTP协议版本
post & get的几个对比: 安全性、幂等、可缓存性，更多可以参考这个GET 和 POST 到底有什么区别？
http、https: HTTP和HTTPS协议，看一篇就够了 、Http和Https的区别
http/1.0、http/1.1、http/2：HTTP1.0、HTTP1.1 和 HTTP2.0 的区别
2. 请求头部
User-Agent : 产生请求的浏览器类型（具体涉及到浏览器漫长复杂的演进史）
Accept : 客户端希望接受的数据类型，如text/xml
Content-Type：发送端发送的实体数据的数据类型，multipart/form-data application/x-www-urlencoded application/json text/xml
Host : 请求的主机名，允许多个域名同处一个IP地址，即虚拟主机
Access-Control-Allow-Origin：跨域的话要注意这个
2.2 建立连接，TCP三次握手
1. TCP是传输层，而HTTP是应用层，过程详见TCP的三次握手与四次挥手理解及面试题
2. keep-alive是http/1.1开始引入，不会建立连接后里面断开，使得能继续复用链路
3. websocket todo
3. 服务器响应
3.1. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
3.2. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
常用的有：200（正常）
304（资源已本地缓存，不下载资源），302（临时重定向），
400（多半是传参出错），404（错页面），
500（服务器挂了），503（服务器挂起）
3.3. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
3.4. 服务器将响应报文通过TCP连接发送回浏览器
响应报文：
4. 浏览器接收HTTP响应
4.1 浏览器接收到request之后，会根据本地设置的缓存进行资源的缓存
4.2 对于SPA应用，特别是vue架构的，通常会采用gzip压缩，response header里Content-Encoding: gzip，这时候，浏览器请求xx.js时，服务器返回对应的xxx.js.gz文件，或者对xx.js进行gzip压缩后传输给浏览器
5. 浏览器渲染
5.1 解析Dom树
根据 HTML 的内容，将标签按照结构解析成为 DOM 树，DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点，再构建下一个兄弟节点。
在读取 HTML 文档，构建 DOM 树的过程中，若遇到 script 标签，则 DOM 树的构建会暂停，直至脚本执行完毕
5.2 解析css规则树
解析 CSS 规则树时 js 执行将暂停，直至 CSS 规则树就绪。
浏览器在 CSS 规则树生成之前不会进行渲染。
5.3 结合 DOM 树和 CSS 规则树，生成渲染树
DOM 树和 CSS 规则树全部准备好了以后，浏览器才会开始构建渲染树。
精简 CSS 并可以加快 CSS 规则树的构建，从而加快页面相应速度。
5.4 根据渲染树计算每一个节点的信息（布局）
布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸
5.5 根据计算好的信息绘制页面
绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。
重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘。
回流：某个元素的尺寸发生了变化，则需重新计算渲染树，重新渲染。
5.6 js解析
1. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
2. HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容
3. 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素
4. 当文档完成解析，document.readState变成interactive
5. 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
6. 浏览器在Document对象上触发DOMContentLoaded事件
7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete,window触发load事件
6. 断开连接：四次挥手
第5部分参考：
https://blog.csdn.net/weixin_43063753/article/details/88306413
