前端性能优化1-从输入url到页面展现发生了什么

从输入url到页面展现发生了什么

• DNS 其实也是一个网络协议 DNS 有个递归查询的逻辑，
• TCP
• HTTP/SSL 有序到达
• 响应解析 （SPA，SSR ）
• 浏览器渲染 how browser works

url => dns获取ip => 建立tcp =>发起http=> 解析响应 => 浏览器的渲染

ip寻址之上有两个很重要的协议 TCP（可靠协议，三次握手，四次挥手，慢启动，滑动窗口协议，确保每个包都有序的传过去，不容易丢包，有重复策略，很多策略确保包收到，连包策略） 和 UDP（就是快，不可靠协议，发出去就不管了，DNS就是基于UDP构建的，应用场景还有游戏，视频）

http就是基于tcp之上做的一层应用逻辑的协议，还有一些FTP，SSH

把可能用到的域名提前用 dns-prefetch缓存下来，先预解析一下

1. 分片
2. 慢启动 让网络包的大小逐渐匹配网速
   处理大数据的场景都可以参考tcp这个协议

基于TCP之上的的http协议，如果你只是单纯的发送一些数据，可以不走http，你可以基于tcp之上自己定制client和server

浏览器缓存的逻辑，强缓存，协商缓存

响应报文

Expires 响应过期的时间
Content-Type 文档的类型
Set-Cookie 设置的cookie

html 之后，怎么处理

1. spa 返回的是一个空的html 逻辑在js里（执行一些js首屏渲染慢，vue，react默认的）
2. 同构（首屏渲染速度快）（nuxt，next）
   1. 需要nodejs环境，应用首屏，先在node里面执行一下，返回浏览器
   2. 后续就是单页的逻辑

（component，数据管理，router）两个入口entry_clint，entry_server，build两个包，给首屏和后续使用

浏览器解析html css 执行js

1. 解析html（AST）dom tree
2. 解析css csstree css的选择器的优化
3. 合并成 render tree
4. 浏览器调用操作系统
   重绘和回流

简单粗暴的优化策略

• 文件加载的更少
• 代码执行的更少

过渡优化是万恶之源

缓存，CDN contenthash 用内容决定缓存，静态资源上cdn
图片优化 图片压缩（jpg 适合大一点的图，色彩没那么高，png适合色彩丰富，透明，logo，gif可以达到体积最小，可以用做一些埋点的发送占位符，webp存在兼容问题，可以用做现代浏览器，手机端）懒加载，先占位符-》低像素-》实际
静态文件优化
浏览器优化
文件合并压缩等雅虎军常规操作

性能监控指标
FP FCP FMP（首屏） TTI
性能优化实操（指标优化）
Lighthouse 简单的网络测试