从输入url到页面显示发生了什么？
宏观
性能优化：使这里更好更稳定的显现出来
- DNS 网络协议 域名 -> ip 基于这个ip发一个tcp链接
- tcp 三次握手、慢启动、超时重发、滑动窗口
- tcp 协议之上，http/ssl，缓存相关的 Etag
- 响应解析 SPA SSR(同构)
- 浏览器渲染 文章：how brower works ?
vue ssr
网络协议
url -> dns获取ip -> 建立tcp -> 解析响应 -> 浏览器渲染 粘包： 等待拼接一下再发送
http ftp ssh
tcp (可靠协议，中间不会少，次序不会乱，稳定有序的传过去 操作系统内置的不用手动发起)/
udp（不可靠，发出去基本就不管了 dns）
udp 速度 > tcp
tcp: 也有一些dns
udp: 视频聊天、语音、dns包比较小不用切分，只需要简单的重发机制
ip寻址
<link rel="dns-prefetch" href="//g.tbcdn.cn">预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验
带来的反思？
- tcp 分片，将一个分成很多个，方便重发并且可以用不同途径发送。
- 怎么确保分片的大小？ -> 慢启动
- 网络不稳定的情况下，保证数据有序稳定的到达。处理大数据的场景下，可以借鉴tcp优化方法
- 文件上传可以采用 慢启动 机制，让网络包的大小逐渐匹配网速
基于tcp之上的http协议，如果你只是单纯的发送一些数据，可以不走http, 可以基于tcp之上自己定制client server
http基于tcp, 定制了解析的逻辑
method 地址 http/版本
key:value
key:value
body
GET/http/1.1
host
cookie
怎么用 @next 访问百度？@next 代码实战，静态资源的缓存 前端强相关，工程化
前端到底怎么上线代码的？
小应用：开发完毕，html, css, js 丢nginx
有点数据的应用：开发完毕，模版都在server(smarty, jsp), 静态资源上cdn，否则路程电缆的距离无法优化
先上模版 html 还是先上cdn？？
静态资源 contentHash 更好的利用缓存，contentHash是webpack自带的
a_hahs1.js a_hash2.js a_hash3.js
文件变了上静态资源 再cdn 再模版
contentHash 解决方案
a?_v=1
a?_t='12337738493'
文件冗余
定期删一次
浏览器缓存的逻辑：强缓存、协商缓存
响应
响应报文返回html之后
spa vue/react默认的
同构, 提高首屏渲染速度，有利于seo vue -> nuxt, next
1. 需要node.js环境，应用首屏，先再node里执行渲染一下，返回浏览器
2. 后续就是单页的逻辑
conponent 数据管理 router 两个入口：entry_clint entry_server
build两个包 给首屏和后续使用
从输入url到页面渲染的时间怎么变短，每一步都有性能指标
浏览器解析html css 执行js
- 解析html (AST) -> dom tree， html层级不要用太多无意义的层级
- 解析css -> css tree， css选择器的优化
- 合并成render tree
- 浏览器调用操作系统渲染
- 重绘回流
简单粗暴的优化策略
图片是优化空间最大的，也没有太难的操作
- 文件加载的更少更小
`缓存（主流框架 contentHash 存在）、压缩 cdn（静态资源） 图片优化（简单且收益最高、web fonts解决小图标、图片压缩、图片格式webp） 静态文件优化 浏览器优化 文件合并压缩`
- 代码执行的更少
`设置首屏并发数4 谷歌6， 无限滚动 -> 虚拟滚动`
节流、防抖（手写）
按需执行
回流重绘
框架优化 -> vue3的静态标记
过度优化是万恶之源
图片优化：图片格式webp 兼容性一般
