从输入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
<link rel="dns-prefetch" href="//g.alicdn.com"/>
把可能用到的域名提前用 dns-prefetch缓存下来，先预解析一下
- 分片
- 慢启动 让网络包的大小逐渐匹配网速
处理大数据的场景都可以参考tcp这个协议
基于TCP之上的的http协议，如果你只是单纯的发送一些数据，可以不走http，你可以基于tcp之上自己定制client和server
浏览器缓存的逻辑，强缓存，协商缓存
响应报文
Expires 响应过期的时间
Content-Type 文档的类型
Set-Cookie 设置的cookie
html 之后，怎么处理
- spa 返回的是一个空的html 逻辑在js里（执行一些js首屏渲染慢，vue，react默认的）
- 同构（首屏渲染速度快）（nuxt，next）
- 需要nodejs环境，应用首屏，先在node里面执行一下，返回浏览器
- 后续就是单页的逻辑
（component，数据管理，router）两个入口entry_clint，entry_server，build两个包，给首屏和后续使用
浏览器解析html css 执行js
- 解析html（AST）dom tree
- 解析css csstree css的选择器的优化
- 合并成 render tree
- 浏览器调用操作系统
重绘和回流
简单粗暴的优化策略
- 文件加载的更少
- 代码执行的更少
过渡优化是万恶之源
缓存，CDN contenthash 用内容决定缓存，静态资源上cdn
图片优化 图片压缩（jpg 适合大一点的图，色彩没那么高，png适合色彩丰富，透明，logo，gif可以达到体积最小，可以用做一些埋点的发送占位符，webp存在兼容问题，可以用做现代浏览器，手机端）懒加载，先占位符-》低像素-》实际
静态文件优化
浏览器优化
文件合并压缩等雅虎军常规操作
性能监控指标
FP FCP FMP（首屏） TTI
性能优化实操（指标优化）
Lighthouse 简单的网络测试
网友评论