javascript - 我可以将我的外部 css 文件放在 html 页面的末尾以防止渲染阻塞吗？

Question

我已经完成了谷歌页面速度测试。在报告中，它建议我删除折叠内容上方的渲染阻塞 css 资源。我开始知道我有 14 个外部 CSS 文件，这会导致我的页面加载延迟。那么我可以将我的 CSS 文件放在 HTML 标记的末尾还是有其他方法可以做到这一点？

Answer 1

首屏内容是指您当前在屏幕上看到的内容，无需向下滚动。首屏内容的样式是初始加载所必需的，其他样式可以稍后下载。所以您可以做的是，有两个样式表一个包含初始页面加载的样式，另一个样式表将包含其余样式。您可以通过 javascript 包含第二个样式表

如何优化您的 css 文件以获得更好的性能

1. 与其拥有这么多外部文件，不如将它们合并到一个文件中。这将减少对服务器的请求数量

2. 缩小您的 css 文件(这将删除不需要的空间)

3. 删除未使用的 css。您可能使用过前端框架，例如 twitter bootstrap 和 foundation。有很多插件可以识别未使用的 css 列表。