use*_*338 3 code-coverage google-chrome-extension google-pagespeed
我使用 Coverage 来识别登陆页面上未使用的 CSS 和 JavaScript 代码。这极大地减少了加载时间。但现在我遇到了一个问题，当我在小型设备上查看页面时，下拉菜单似乎缺少 css 代码（或不确定的 javascript 代码），该下拉菜单应该转换为汉堡菜单。
所以我的问题是覆盖率如何计算未使用的代码。它是否仅在当前浏览器视图中执行此操作（在响应式设计的情况下可能不会使用所有 css 代码？）
如果这是真的，我怎样才能找出真正没有使用的东西。尝试不同的分辨率并多次运行覆盖？
有人遇到同样的问题吗？
覆盖面板是“实时”的，当您使用页面时，将会使用更多的 CSS 和 JS。
我的意思是，当您第一次加载页面时，渲染和交互所需的所有 CSS 和 JS 都会突出显示为绿色且需要。如果您随后打开菜单，则 CSS 在使用时会变成绿色。如果您从未在运行覆盖面板的情况下打开菜单，它将不会根据需要计算 CSS。
因此，因为当您运行覆盖面板时不需要菜单 CSS 代码，并且删除了菜单的 CSS，所以显然会遇到问题。
你有点滥用覆盖率面板，它更多的是为了帮助你优化你的关键 CSS或找到完全未使用的库。
如果您想使用它来识别根本不使用的 CSS 和 JS ，您必须将屏幕大小调整到每个断点（以考虑不同的屏幕尺寸以及您用于移动设备、平板电脑等的不同布局），打开每个菜单项、网站所有区域的选项卡、正确和错误填写所有表格等，以确保涵盖所有状态并使用相关的 CSS 和 JS。
如果您确实成功地完成了上述操作，则会显示一页的覆盖范围，但其他页面呢？您必须在那里重复该过程，以确保您没有删除所需的样式。正如您可以想象的那样，如果没有错误，这不可能成功！
相反，您应该使用覆盖面板来识别“首屏”内容所需的项目，因为这意味着您可以在初始页面 HTML 中内联任何关键的 CSS 和 JS，并获得不到 1 秒的首次内容绘制等。（您再次需要在此处调整屏幕大小以适应不同的断点，但不需要打开菜单等。）
不要用它来尝试识别未使用的东西，除非您绝对确定不需要它们（例如，如果错误地包含了一个未使用的整个库，您可以安全地删除它。）