性能优化应该算是前端的基础必备技能了，以前不懂得咋优化，就看些博客零零散散的什么图片啊，js、style位置啊这些，后来写个人博客的时候系统总结了一下，现在写出来记录一下，性能优化总的来说就是在输入url到页面成型的各个阶段进行优化，减少处理时间，顺便写些相关知识点
- 输入url阶段： 用cdn加速ip地址请求。 下面是浏览器解析url过程。浏览器解析域名，查询本地dns有无域名缓存，有则直接加载缓存，无则向根服务器查询域名，给出负责解析域名后缀（如com）的顶级服务器，顶级服务器不断向下递归直到找到该域名，然后向该地址请求资源，这是没有cdn的情况下解析过程，有cdn的话，则是在查询过程中，查到CNAME，然后向指向的CDN专用的DNS服务器请求，1. CDN 的 DNS 服务器将 CDN 的全局负载均衡设备IP 地址返回用户，然后再向该ip地址请求，会根据用户 IP 地址，判断哪一台服务器距用户最近；根据用户所请求的 URL 中携带的内容名称，判断哪一台服务器上有用户所需内容；查询各个服务器当前的负载情况，判断哪一台服务器尚有服务能力，选取合适的服务器地址返回
- 发起TCP连接阶段： 一般由后端负责优化TCP连接。 下面是TCP三次握手，第一次握手：客户端发送syn包(Seq=x)到服务器，并进入SYN_SEND状态，等待服务器确认；第二次握手：服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（Seq=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；第三次握手：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=y+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。
- 发送http请求阶段： 添加缓存头，减少http请求，把多个请求合成一个请求。 下面是浏览器缓存知识，一般浏览器先判断是否有缓存，无则发送请求，有则判断是否过期，先是强缓存，有两个缓存头，expire是个时间戳，看本地时间是否超过该值，cachcontrol有maxage属性值，是相对时间，不会应为本地时间误差或者时间差导致错误，nocach用协商缓存验证，public客户端和服务器端都缓存，private只有客户端缓存，nostore都不缓存；协商缓存则是请求里可以设置两种请求头，Last-Modified里包含if-modified对比时间和etag里包含If-None-Match唯一标识符对比资源是否发生变化，无则返回304，有则更新资源发送200
- 服务器处理请求并返回http报文： 这个主要就是压缩返回的资源，让资源更小：1.服务端开启gzip压缩；2.使用http2；3.静态资源优化，用cdn加速，图片改用webp格式；4.webpack压缩打包：treeshaking（清楚无用代码）；按需加载；去除提示console之类的；提取公共代码；Uglify（丑化压缩）。 状态码有哪些 100：继续请求，post一般先发送头在发送请求体；101：切换请求协议；200：请求成功；204：请求成功但无内容；301：重定向永久移动；302：重定向暂时转移；304：协商缓存；400：语法错误；401：请求要求身份验证，未授权；403：拒绝请求；404：资源找不到；500：服务器内部错误，无法完成请求；502：作为代理服务器，从远程服务器上收到无效响应；503：系统维护中； http1.1：1.长连接，一个tcp连接可以发送多个http请求和响应；2.添加了强缓存cachcontrol，协商缓存的请求头；3：host头域，一个ip地址可以对应多个虚拟主机；4range头域，请求对象部分资源； http2.0：二进制传输数据；多路复用；头部压缩；服务器推送；缺点：队头阻塞；ssl连接时间长； http3.0：quic采用udp连接；ortt快速连接；连接迁移，不用服务端ip，客户端ip，俩端口相同，而是生成唯一标识符
- 浏览器解析返回报文 分为解析优化和执行优化。解析优化：css树生成：减少复杂选择器和宽泛选择器的使用，如伪类、属性、通配符这些，避免过多嵌套；使用flex布局，性能更好；提升到新的层，从cpu转移到gpu加速；dom树：事件委托；减少重排重绘；使用 requestAnimationFrame；减少解析量：路由懒加载；请求懒加载；图片预加载：减少首屏时间；执行优化：使用防抖节流；减少重排重绘；v-if和v-show的正确使用；
