学习笔记

前端性能优化主要可以从这个三个大点入手：

一、更快的网络通信

服务器通信层面

• CDN

  • 全局负载均衡
  • 缓存系统

• 减少请求次数

  • 资源合并

数据传输层面

• 缓存：浏览器缓存

  • 强缓存
    • cache-contorl: max-age=30
    • expires: Wed, 21 Oct 2021 07:28:00 GMT

• 协商缓存

  • etag
  • last-modified
  • if-modified-since
  • if-none-match

• 压缩

  • 数据压缩：gzip
  • 代码文件压缩：HTML/CSS/JS 中的注释、空格、长变量等
  • 静态资源：字体图标，去除元数据，缩小尺寸以及分辨率
  • 头与报文
    • http1.1 中减少不必要的头
    • 减少 cookie 数据量

代码层面

• webpack 打包层面
  • 样式抽离
  • js 压缩
  • 图片压缩
  • 使用 iconfont 矢量图
  • 引入 dll 动态链接库文件，前置打包不经常改动的资源包，例如：vue / vuex/ vue-router / ant-design 等
  • 多入口打包
• 技术层面
  • 前端路由懒加载
  • 数据懒加载
  • 虚拟列表

二、更高效的数据处理

• Http2
  • 头部压缩：专门的 HPACK 压缩算法
    • 索引表：客户端和服务器共同维护的一张表，表的内容分为 61 位的静态表（保存常用信息，例如：host/content-type）和动态表
    • 霍夫曼编码
• 链路复用
  • Http1 建立起 Tcp 连接，发送请求之后，服务器在处理请求的等待期间，这个期间又没有数据去发送，称为空挡期。链接断开是在服务器响应回溯之后
    • keep-alive 链接保持一段时间
    • HTTP2 可以利用空档期
    • 不需要再重复建立链接
• 二进制帧
  • Http1.1 文本字符分割的数据流，解析慢且容易出错
  • 二进制帧：帧长度、帧类型、帧标识

补充：采用 Http2 之后，可以减少资源合并的操作，因为首部压缩已经减少了多请求传输的数据量

三、框架的选择

• SSR 服务器端渲染
  • Nuxt.js
  • Next.js
• SPA 单页面应用
• SSG 静态站点生成方案

面试参考答案:

• web 类型应用的优化方法有很多，但是大体分两类
• 从加载层面，我们可以...
• 从执行层面，我们可以使用...

参考资料：

b23.tv/LQDhwc

最后，好好学习不会差，我是你们的航少，大家一起进步！