前言：
常常看到 “输入一个url到页面渲染经历了什么？” 这样的一个面试题。网上也有对这道题的很详细的解析，但我并不明白问这道题的意义在哪里。无意中了解到了浏览器的Performace API,才明白原来这属于页面性能优化的一个知识点。
页面渲染
页面渲染用一句话总结： dns解析ip —— tcp连接 —— 服务器接收请求 —— 服务器响应 —— 对返回资源进行html解析
但是，通过performce了解到，其实dns之前还有一系列操作，下面借用一张图：
从图中可以看到在进行dns解析之前，或许还会经历重定向，甚至于缓存。缓存又分为强缓存和协商缓存（当时我看到这里，就问啥是强缓存和协商缓存？？？）。
缓存
强缓存（本地缓存）
概念：在浏览器中是通过 Expires 和 Cache-Control 两个字段来判断的。
Expires 和 Cache-Control 两者同时存在时，后者优先级更高。他们都是用来定义缓存的时长的
Expires： 1.是 http1.0 的规范，值是一个 GMT 格式的时间字符串 2.它是一个绝对时间。但通常服务器的时间和客户端是不一样的，若两者偏差太大，就会导致缓存混乱
Cache-Control： 1.是 http1.1 的规范 2.它的值是一个相对时间，值是一个时间戳（比如：3600 秒）
这里http版本之间的差异可以参考我之前梳理的文章：juejin.cn/post/722289…
协商缓存
由服务器来决定是否使用缓存，即客户端和服务器之间存在一次通信。若使用则返回 304 状态码。
若没有命中本地缓存，那资源请求的时候在请求头上会带有两类信息：
1.Last-Modified/If-Modified-Since
这种值是 GMT 时间格式，第一次资源返回时，响应头上会存在 Last-Modified（文件最后修改时间）；当资源二次访问时，请求头上会存在 If-Modified-Since 值为对应的 Last-Modified。服务器通过对时间的比较，判断访问资源是否存在变化，若否，则返回 304,且不会返回任何资源。浏览器直接走本地缓存
2.Etag/If-None-Match
Etag 是服务器对每个资源定义的唯一标识，第二次请求资源时，会带上 If-None-Match，
即上一次资源访问时的 Etag。服务器通过算法计算文件的 Etag 比较两者是否一致判断是否改变。
但当服务器返回 304 时，由于 Etag 在服务器上重新计算过，response header 中还是会返回 Etag（即使这个值和之前的没有变化）
博文参考：https://blog.csdn.net/GreekMrzzJ/article/details/89738573
缓存的优先级：
Cache-Control > expires > Etag > Last-Modified
网页的渲染
图片借用：
我的一句话总结：
解析css生成CSSOM,解析html生成DOM tree,解析js —— 生成render Tree —— 布局 —— 绘画
我参考的两篇博文：
https://juejin.cn/post/7092301298020106254
https://juejin.cn/post/7058526506460381215
tcp的三次握手和四次挥手
具体的实现理论网上有很多，但我更加疑惑的不是它如何实现的，而是为什么是三次握手和四次挥手
为什么是三次握手
一句话总结：就是让客户端和服务端都清楚自己和对方的接收/发送能力
为什么是四次挥手
A:客户端 B:服务端
前端优化
考虑方向：
1.减少http请求
2.减少http请求资源大小
常见优化：
1. css,html,js文件的压缩
2. 首屏渲染：懒加载，js分包，打包文件的压缩；图片资源使用预加载/雪碧图
3. 重绘和回流: css的加载会阻塞js,减少重绘和回流的产生
回流：布局，定位，盒子模型相关属性，显示/隐藏
重绘：布局不更改，格式和样式更改
关于performace API的学习，可参考： juejin.cn/post/709859…
