网络协议
说说从输入 URL 到页面呈现发生了什么？#
- 构建网络请求
- 查找强缓存
- 如果命中缓存直接视同。否则进入下一步
- DNS 解析
- 数据包通过 IP 地址传递。
- DNS 也有缓存系统，如果解析过了 直接缓存获取。
- 建立 TCP 连接。
- tcp 是一种传输通信协议
- 三次握手
- 发送三次数据包，确认与服务端建立链接。
- 进行数据传输。
- 断开链接
- 四次挥手。
- 发送 HTTP 请求
- 携带请求头，请求体，请求行。
- 网络响应
- 响应头，响应体，响应行。
- 如果请求头或响应头中包含Connection: Keep-Alive，表示建立了持久连接，
- 浏览器解析 html text 工作
- 构建 DOM 树
- 样式 计算
- 生成布局树
- 浏览器渲染
- 建立图层树
- 处理动画 3d 渲染。
- 显示合成
- 隐式合成
- 生成绘制表
- 画背景，边框之类的
- 生成图块和栅格化
- 显示器显示内容
- 结束
HTTP 状态码#
- 200 请求成功
- 204 请求成功，没有资源返回。
- 301 永久重定向资源
- 302 临时重定向
- 303 需要 get 请求
- 400 请求参数错误。
- 401 需要 http 认证
- 403 服务资源访问拒绝
- 404 无法找到请求资源
- 500 服务器错误。
- 502 服务器无响应
- 503 服务器超负载了
说说浏览器缓存#
强缓存#
- 检查强缓存不需要发送 http 请求。
- http1.0 是使用
expires请求头，http1.1 使用的cache-control - cache-control
- public: 服务器和中间代理商都缓存
- max-age：多少时间内 可以直接使用缓存
- privtate：只能浏览器使用缓存，代理商服务器不能缓存
- no-cache: 跳过强缓存，发送 http 请求，直接进入协商缓存阶段。
- no-store： 非常粗暴，不进行任何形式的缓存。
- s-maxage： 和
max-age差不多，但是区别就是只是设置代理服务器的缓存时间。
协商缓存#
浏览器携带相应的缓存tag来向服务请求，服务器根据这个 tag 来决定是否使用缓存。
缓存tag分为：
- last-modified：即最后修改时间
- 第二次请求，请求头会携带
if-modified-since字段。这个字段的值是服务器传来最后修改的时间。 - 然后会和服务器中
该资源最后修改时间去做对比 - 如果请求头的值小于最后修改时间。说明是时候更新了。返回新的资源。
- 返回 304 ，告诉浏览器直接用缓存。
- Etag：服务器根据当前文件的内容，生成唯一的标识。只要文件内容改变，这个值就会边。服务器通过响应头把这个值给浏览器
- 第二次请求，请求头会携带
if-None-Match - 该值，会和服务器中的Etag对比，两者不一样说明更新了，返回新资源
- 返回 304 ，告诉浏览器直接用缓存。
last-modified 和 Etag 的对比#
优先使用 Etag
- last-modified 的单位是 秒，如果在一秒内文件修改多次，这时候的 last-modified 并不会体现出更改。
- 性能上 last-modified 由于 etag，etag是根据文件内容生成对应的 hash 值，last-modified 仅仅记录一个时间。
HTTP1.1 和 HTTP2#
http1.1：#
- 只能并发 6 个请求
- keep-alive 建立长链接（在http 1.0 的时候每次需要 tcp 三次握手，四次挥手）
http2：#
HTTP2 加密过程，怎么加密（对称加密，非对称加密）#
- 客户端使用https访问web服务器，要求与服务器建立ssl连接。
- web服务器收到客户端的请求后，将网站的证书（包含公钥）传递一份给客户端。
- 客户端收到证书后会检查证书的颁发机构以及过期时间，如果没有问题就会随机产生一个秘钥。
- 客户端利用公钥将会话秘钥加密，并传送给服务端，服务端利用自己的私钥解密出会话秘钥。
- 之后服务端与客户端使用秘钥加密传送。
nginx 如何配置 http2#
https://jkzhao.github.io/2018/01/16/Nginx%E9%85%8D%E7%BD%AEHTTP-2-0/
跨域解决方案？#
参考地址：https://segmentfault.com/a/1190000022398875