前端性能优化思路

性能优化思路分析

• 如何让网络通信更快？
• 如何让数据处理更高效？

更快的网络通信

请求响应过程

用户 => url -> DNS -> IP -> TCP/IP链接 -> 处理HTTP请求 -> 发生请求报文 -> 解析HTML内容 -> 请求页面资源 ->… => 呈现给用户。

服务器通信层面（CDN）

• 全局负载均衡： 寻找最优边缘节点（位置、负载情况），即cdn服务器。
• 缓存：命中率&回源率。 缓存主服务器内容

服务器通信层面（请求次数）

• 资源合并（HTTP2中没有必要使用了）
• 域名分片（HTTP2中没有必要使用了）

数据传输层面（缓存）

• 强缓存
  • <= cache-control: mas-age=600
  • <= expires: Wed, 27 Apr 2022 05:31:20 GMT
• 协商缓存
  • <= last-modified: (S => B)
  • => if-modified-since:(B => S)
  • <= etag
  • => if-none-match

数据传输层面（压缩）

• 数据压缩
  • gzip与新的br，服务器开启
• 代码文件压缩
  • HTML/CSS/JS中的注释/空格/长变量等
  • tree-shaking
• 静态资源
  • 字体图标，去除元数据，缩小尺寸、分辨率，使用webp格式
• 头与报文
  • http1.1中不必要的头
  • 减少cookie数量

通信层协议（HTTP2）

• 头部压缩
  • HPACK压缩算法
  • 索引表【静态/动态】
• 二进制帧（http1.1用的字符串）
• 多路复用
• 服务器发送

更高效的数据处理

性能分析工具(node层):

• ab(压测) ab -c100 -n10 -t3 https://wenku.baidu.com
• node --prof xxx.js node --prof-process xxx.log > profile.txt

前端代码层面

• HTML语义化标签加强DOM解析
• 多使用伪元素，减少js多DOM的查找遍历
• 能使用HTML/CSS实现的就不要用js
• 逻辑与展示解耦，避免不必要的js引擎启动
• 减少作用域查找和闭包，避免==，使用块级作用域

客户端渲染CSR

• 白屏时间更长
• html无内容，SEO不友好

服务端渲染SSR

Nuxt.js

静态站点生成方案SSG

• 专门的SSG方案（框架）
  • Gridsome
• 副业实现SSG
  • nust.js

总结

• 思路
  • 由大到小、循序渐进
  • 加载层面
  • 执行层面