前端基础梳理二之浏览器

1、从输入地址到显示页面的过程

• 解析DNS，获得真实IP

• TCP三次握手
  客户端向服务器发送连接请求报文，SYN=1,ACK=0
  服务器发送连接确认报文，SYN=1,ACK=1
  客户端收到确认报文后，向服务端发送确认，ACK=1

• TLS握手加密
  非对称加密获得密钥
  对称加密传输信息

• 服务器返回数据

• 浏览器判断状态码
  1xx：信息类
  2xx：响应成功
  3xx：重定向类
  4xx：客户端错误
  5xx：服务器错误

• 解析文件，建立相应的数据结构

• 载入解析的资源文件，渲染页面

2、缓存机制

作用

• 性能优化：显著减少网络传输带来的损耗
• 数据请求包括：网络请求、后端处理、浏览器响应三部分，浏览器缓存在第一和第三步骤中优化性能
• 缩短资源请求距离，减少延迟
• 缓存可重复利用，减少带宽，降低网络负荷

缓存位置

• Service Worker
  优先级最高，运行在浏览器背后的独立线程，可控制缓存那些文件，如何匹配、读取缓存，持续性

• Memory Cache
  内存缓存，速度快，容量小，关闭Tab页面即释放

• Disk Cache
  硬盘缓存，容量较大，大部分缓存在这里
• Push Cache
  推送缓存，在session中存在，结束即释放，缓存时间短暂，一般5分钟

缓存策略：设置HTTP Header

• 强缓存：优先级更高
  1、Expires：缓存过期时间
  2、Cache-Control：控制网页缓存，优先级更高
  no-store:所有内容都不缓存
  no-cache：浏览器使用缓存数据时确认是否需要更新资源
  private：所有内容只有客户端可以缓存
  public：客户端和代理服务器都可缓存
  max-age：缓存内容将在多少秒后失效

• 协商缓存
  1、ETag：优先级更高
  服务器响应请求时，返回当前资源文件的唯一标识，资源有变化就会重新生成ETag
  将ETag值放到If-None-Match中，服务器进行判断
  2、Last-Modified
  资源在服务器上的最后修改时间
  浏览器添加If-Modified-Since这个header，与服务器中最后修改时间对比
  缺点
  只能以秒及时，在秒内修改不会被计入修改
  本地打开会造成修改
  3、协商缓存步骤
  协商缓存失效，则携带缓存标识发起HTTP请求
  304，该资源无更新，从缓存获取结果
  200，资源有更新，更新浏览器缓存
  未设置缓存策略
  响应头的Date减去Last-Modified值的10%作为缓存时间

缓存步骤

1、浏览器向服务器发送HTTP请求
2、在浏览器缓存中进行查找
3、若没有缓存，则再次向服务器发送HTTP请求，到4
3、若有缓存，是否过期
未过期，返回缓存数据
已过期，协商缓存，到4
4、服务器返回请求结果和缓存规则
5、将该结果和缓存标识存入浏览器缓存中

应用场景

• 频繁变动的资源
  使用Cache-Control:no-cache请求服务器验证资源是否有效

• 不常变化的资源
  给Cache-Control配置很大的max-age，在文件名中添加hash版本号等动态字符，之后更改动态字符来更改引用URL

用户行为

• 地址栏输入地址
  查找Disk cache中是否有匹配，有则使用，没有则发送网络请求

• 普通刷新
  优先使用memory cache

• 强制刷新
  浏览器不使用缓存，请求头部带有no-cache，服务器返回200和最新内容
  参考自 深入理解浏览器的缓存机制：https://www.jianshu.com/p/54cc04190252