与图像一样，CSS和JavaScript是导致代码膨胀和页面加载缓慢的两个最常见原因。有时(虽然不经常)这是不可避免的，页面的功能和设计需要大量的代码，但是几乎总是有改进的空间。用户不喜欢等待页面加载，搜索引擎知道这一点。你应该尽力提高页面速度。
尤其令人沮丧的是，在某些页面中，一个页面所调用的大部分脚本是冗余的，并且实际上没有被用于任何用途。出现这种情况的原因有很多，其中包括以下几点:
- 在模板的开头部分页面需要调用脚本，但实际情况，站点上的每个页面都需要调用脚本（这并不是必须的）。
- 仅在与页面的特定部分进行交互时使用的脚本和样式，例如选项卡，手风琴，多面导航 。
- Cruft是随着时间的推移而构建的，其中随着时间的推移会添加额外的功能或样式，而不需要检查现有的代码以查看是否可以修改它以适应新的需求( Dawn Anderson recently talked about the concept of generational cruft )
- CMS安装插件/扩展，其中只有一小部分功能是真正需要的。
- 糟糕的代码。
有许多其他原因可以解释为什么有这么多不使用的代码残留，但这些是一些常见的原因。你可以在这里阅读更多关于这个主题的文章
我们如何识别哪些是被使用的，哪些不是?
有各种方法来识别未使用的代码，包括浏览器插件，自定义测试脚本，第三方库等，但是在Chrome开发人员工具中也有一种非常简便的方法来实现此目的，这就是我们今天要探讨的重点。
要做的第一件事是在Chrome中打开要检查的页面，然后按F12调出开发人员工具。 打开“ Chrome开发者工具”窗口后，按住CTRL + SHIFT + P打开下面所示的过滤器栏。
不管你在哪个选项卡(元素、控制台、源等等)都无关紧要， 在过滤器框中，输入coverage，它将显示如下所示的选项。
您应该选择第一个选项，即绘制显示覆盖率（Drawer Show Coverage），它将为您显示两个面板，如下所示。
在任一面板中，单击重新加载按钮(Click to reload button)，这将刷新页面并开始向底部面板填充数据，如下例所示。
除了页面上加载的所有脚本的URL（此处未显示，但通常会显示在最左侧）之外，我们还得到脚本的类型，文件的总大小和未使用的字节数。 右侧的条显示了已使用和未使用代码之间的划分，红色部分显示了百分比的可视表示。
在屏幕的左下角，您还将看到页面上加载的未使用代码的总百分比。
从上面的例子中可以看出，2.3 MB的CSS和JS 1.5 MB(64%)在初始加载时没有在这个特定的页面上使用。通过单击底部窗格中的单个行，您还可以看到顶部页面中没有使用的特定代码块。
也可以使用Headless Chrome和Puppeteer获取此信息。 您可以在此处找到有关此内容的更多信息。这是一种更复杂的方法，但是如果您需要批量获取数据，则可伸缩性更高。 我们将在以后的文章中进一步讨论这种方法。
