这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战
浏览器输入Url后发生了啥
- 浏览器原页面预备卸载
- 浏览器重定向（判断是否有缓存-协商缓存/强制缓存）且同时卸载原页面
- 对访问的域名进行DNS解析
- 与目标服务器建立TCP连接
- 发送http请求
- 服务端http响应
- 加载html，css，js资源，把dom解析dom树、css规则树、结合成布局渲染树，渲染页面
TCP - 三次握手/四次挥手过程
-
三次握手：
- 第一次：客户端发送请求号到服务端，请求号通常是SYN seq = x + 1
- 第二次：服务端收到后发送应答号ACK = x + 2 和 服务端请求号 SYN seq = y + 2
- 第三次：客户端收到后发送应答号ACK = y + 3 为啥是三次握手而不是四次或者两次？客户端发送请求后，服务端确认收到一次，但是此时客户端并不知道服务端是否收到，所以，服务端发送应答，客户端收到后确认，但此时服务端并不知道自己发送的请求号客户端是否收到，所以客户端发送应答号，服务端收到。此时两端确认已连接。所以最少需要3次握手
-
四次挥手
- 第一次：客户端发送FIN请求号，请求断开连接
- 第二次：服务端收到后，发送应答号，确认可以断开
- 第三次：服务端处理相关资源释放后，再次发送请求号给客户端
- 第四次：客户端，确认两边断开连接 为啥是四次挥手，第二次和第三次是否可以同时发送？因为第二次和第三次之间，服务器需要处理之前维护的连接资源，将其释放清空，所以不可以同时发送
HTTP1.0 HTTP1.1 HTTP2.0
- http1.1对比1.0增加了长连接支持
- http2.0 多路复用，客户端推送功能
- https 在tcp之上建立ssl/tsl协议，加密，更安全
浏览器渲染机制
- 回流（重排）：dom的位置，大小改变，引起重排，重排即回到dom树生成环节，重新计算dom位置大小，然后重绘，最后渲染
- 重绘：改变背景色，字体，颜色等等，不改变位置大小，回到css规则树环节。
- 避免重排重绘：
- 可以将需要多次改变的dom先设置成display：none，然后操作变化，最后再统一显示出来，从而减少回流次数
- 用transform做形变和位移，减少重排
- 避免逐个修改dom节点，尽量一次性修改，比如通过改变class，或者csstext属性，一次性地改变样式
- position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响
- 简化并优化CSS选择器，尽量将嵌套层减少到最小
- DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作
性能优化
- 可以从网络方面考虑，适当增加带宽，增加CDN镜像服务器
- 从请求方面考虑，可以适当减少请求的次数
- 从资源考虑，减少资源大小，图片不失真情况下减小大小
- 渲染层面，减少重排重绘，比如DOM的多个读写操作放一起，利用transform做形变和位移
- 浏览器方面，可以做资源的缓存处理，比如localstorage，存储变动性小的数据
- webpack配置资源的异步加载，添加魔法注释
- webpack公共代码的抽离，分包
