Day: 2021年2月6日

使用 webpack 代码分割和魔术注释提升应用性能

1. Web 应用性能优化的关键

关于 Web 应用性能优化,有一点是毫无疑问的:「页面加载越久,用户体验就越差」。我们几乎可以说 Web 应用性能优化的关键之处就在于:减少页面初载时,所需加载资源的「数量」和「体积」。

那么当所需加载的资源数量到达多少或资源体积小于多少,我们才可以自信地宣称我们的 Web 应用拥有出色的性能呢?下面是给出的一些参考值,该参考值考虑到了移动端与国外等多种访问环境:

  • 页面初载时,所有未压缩的 JavaScript 脚本大小:<=200KB
  • 页面初载时,所有未压缩的 CSS 资源大小:<=100KB
  • HTTP 协议下,请求资源数:<=6 个
  • HTTP/2 协议下,请求资源数:<=20 个 ;
  • 90% 的代码利用率(也就是说,仅允许 10%
    

一文串联 HTTP / [0.9 | 1.0 | 1.1 | 2 | 3]

1989 年,万维网诞生之后,HTTP 迅速成为主导世界的应用层协议。在今天,几乎任何场景都或多或少用到了 HTTP 协议。

在 30 多年的历史中,HTTP 协议本身有比较大的发展,同时,还有一些重大的变动也在酝酿之中。这些演化使得这个协议的表现力更强,性能更好,更能满足日新月异的应用需求。本文就来回顾和展望一下 HTTP 的历史和未来。

  • HTTP/0.9
  • HTTP/1.0
  • HTTP/1.1
  • HTTP/2
  • HTTP/3

HTTP/0.9

HTTP/0.9 诞生于 1991 年,是 HTTP 协议的最初版,构造十分简单:

  • 请求端只支持 GET 请求
  • 响应端只能返回 HTML 文本数据
GET /index.html
<html>
  <body>
    Hello World
  </body>
</html>

请求示意图如下: