基于 HTTP 网络层的前端性能优化

最新推荐文章于 2024-03-27 15:03:21 发布

穿越到未来calc

最新推荐文章于 2024-03-27 15:03:21 发布

阅读量214

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_52179917/article/details/125190867

版权

优化方案：

HTTP 网络层优化
代码编译层优化 webpack
代码运行层优化 html/css + javaScript + vue + react
安全优化 xss + csrf
数据埋点及性能优化
...

CRP 关键渲染路径（Critical Rendering Path）

HTTPS= HTTP+SSL/TLS

默认端口号： http: 80, https: 443, ftp: 21

客户端输入一个 url 地址----> 到看到页面，经历了什么：

url 解析
1. 地址解析（协议，登录信息，域名：服务器地址，端口号，请求资源的文件路径，查询字符串：问号参数，片段标识符：HASH值）
2. 编码
3. URI / URL / URN 的区别
缓存检查：
1. 缓存位置：内存缓存（Memory Cache），硬盘缓存（Disk Cache）
  1. 重新打开一个网页：查找的是硬盘缓存，有则用，没有则发起网络请求
  2. 普通刷新（F5）：因为TAB 页面没有关闭，因此优先使用内存缓存，其次才是硬盘缓存
2. 两种缓存：强缓存，协商缓存
  1. 强缓存
    1. 浏览器对于强缓存的处理：根据第一次请求资源的时，返回的响应头确定的
    2. Expires：缓存期间用来指定资源的到期时间（HTTP/1.0）
    3. Cache-Control：cache-control: max-age = 2592000第一次拿到资源后的2592000秒内（30天），再次发送请求，读取缓存中的信息（HTTP/1.1）
    4. 两者同时存在的话，Cache-Control 的优先级高
  2. 协商缓存
    1. 就是强缓存失效后，不管有没有缓存，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程
    3. 协商缓存 Last-Modified（HTTP/1.0）; Etag（HTTP/1.1）
    4. Last-Modified：只能精确到秒
    5. 返回 304 的就是协商缓存
  3. 200的话走的可能是强缓存，或者重新拉去文件，强缓存的性能要比协商缓存好很多
  4. 协商缓存和强缓存的区别：
    1. 协商缓存总会和服务器协商，所以一定要发 HTTP 请求
3. 步骤
  1. 先检测是否有强缓存，有且未失效，走强缓存
  2. 没有或者失效检测是否有协商缓存，有就走
  3. 没有就获取最新数据
4. 强制刷新（CTRL + F5）：浏览器不使用缓存，因此发送头部均带有 Cache-control：no-cache，服务器直接200 和最新内容
5. html 页面一般不做强缓存：每一次html 的请求都是走正常的 HTTP 请求
6. 如果服务器更新了，但是本地还有缓存，这样怎么拿到最新数据
  1. 服务器更新资源后，让资源名称和之前不一样，这样页面导入的是全新的资源（webpack 里面每次打包都有一个 hash name）
  2. 当文件更新后，我们在 html 导入的时候，设置一个后缀（时间戳）
  3. 不用强缓存，协商缓存可以解决这个问题
7. 第一次向服务器发请求，强缓存和协商缓存都没有，向服务器发送请求（没有传递任何标识），服务器收到请求后准备内容
  1. Last-Modified：资源文件最后更新的时间
  2. Etag：记录的是一个标识（也是根据资源文件更新生成的，每一次资源更新都会重新生成一个Etag）
  3. 将标识返回给客户端
  4. 客户端拿到信息后渲染
  5. 把信息缓存到本地
8. 第二次发请求的时候，携带缓存标识，
  1. If-Modified-Since == Last-Modified
  2. If-None-Match == Etag
  3. 给服务器
  4. 服务器根据标识判断文件是否更新
9. 数据缓存
DNS 解析
1. DNS 也是有缓存的，如果之前解析过就会在本地有缓存（不一定）
2. 递归查询
3. 迭代查询
4. 如何在DNS上优化：
  1. 减少DNS请求（一个页面尽可能少用不同的域名：资源都放在相同的服务器上），项目中不会这么干
  2. 但是项目中往往会把不同的资源放在不同的服务器上
    1. 服务器拆分的优势
      1. 资源合理利用
      2. 抗压能力加强
      3. 提高 HTTP 的并发
TCP 三次握手