# 高性能网站标准

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

那么当所需加载的资源数量到达多少或资源大小小于多少，我们才可以自信地宣称我们的 Web 应用拥有出色的性能呢？

下面给出的一个参考值，该参考值考虑到了移动端与国外等多种访问环境：

1. 页面初载时，所有未压缩的 JavaScript 脚本大小：**<=200KB**；
2. 页面初载时，所有未压缩的 CSS 资源大小：**<=100KB**；
3. HTTP 协议下，请求资源数：**<=6 个**；
4. HTTP/2 协议下，请求资源数：**<=20 个** ；
5. **90%**&#x7684;代码利用率（也就是说，仅允许 10% 的未使用代码）；

或许你会觉得这个标准有点过于苛刻了，是有一点点，但为了创建出高性能的 Web 应用，你的实际资源加载情况应该尽可能靠近这个目标。<br>

### 如何查询代码利用率

{% hint style="info" %}
代码利用率 = 你页面中实际被执行的代码 / 你页面中引入的代码 \* 100%
{% endhint %}

你可能会困惑在实际开发中如何得到这个值，别担心，通过使用 Chrome 开发者工具（很遗憾，目前只有 Chrome 支持这一功能），你就可以迅速对你的 Web 应用进行分析，得到当前页面下的代码利用率状态，步骤如下：

1. 打开 Chrome Dev Tool；
2. 按下 Cmd + Shift + P or Ctrl + Shift + P ;
3. 输入 Coverage，并选择第一个出现的选项；

![](https://3490195898-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnQxDcxCKODvYvTUWe3%2F-M3GsMAaOG6852Eg6LS5%2F-M3GtPcNAJbYBNybKTwY%2Fimage.png?alt=media\&token=44ded572-fb11-4a13-bc66-af39790777b4)