消除渲染阻塞 css
Eliminate render blocking css
我的 CSS 文件导致我的页面呈现缓慢，这就是我将它们移到页脚的原因。然而，这会产生一个用户体验问题，因为当页面加载时，它最初是完全没有样式的。
我想到了两个解决这个问题的方法，想知道哪个是最好的：
将导航栏和页面标题的 CSS 声明移动到新的 CSS 文件中，该文件将放置在 header 中。虽然这将是一个相对较小的文件，但它有创建另一个 HTTP 请求的缺点
在 header 本身中内联导航和页面标题的 CSS。虽然这不会创建另一个 HTTP 请求并会解决问题，但 CSS 不会像我将它放在外部文件中那样被缓存。
这个问题的最佳解决方案是什么？是否有良好的实践指南？
是的，这个问题的解决方案是将 css 的关键部分（或全部）直接嵌入到文件中，例如 (index.html)，因为如果你有更多文件，那就是一个新的请求它们中的每一个，因此加载页面需要更多时间:)
根据Google，最好的选择是第二个。
良好做法指南是：
- 尽可能少写css，避免写不必要的css属性。
- 始终尝试为所有样式创建一个 css 文件，除非有必要使用多个 css 文件。即使这样，也不要创建超过 3 个 css 文件。
- 使用 CDN link 包含框架、工具包。
- 避免编写内联 css 样式，使用外部 css 文件。
- 正确使用html标签。 html5 引入了一些新标签，如页眉、主要、旁边、导航、页脚。正确使用这些标签。它给出了一个清晰的结构。所以没有必要手动为这些标签创建div class。
我的问题是，您如何知道您的 css 文件导致您的页面呈现缓慢？您在使用任何 javascript/jQuery 插件吗？
我的 CSS 文件导致我的页面呈现缓慢，这就是我将它们移到页脚的原因。然而，这会产生一个用户体验问题，因为当页面加载时，它最初是完全没有样式的。
我想到了两个解决这个问题的方法，想知道哪个是最好的：
将导航栏和页面标题的 CSS 声明移动到新的 CSS 文件中，该文件将放置在 header 中。虽然这将是一个相对较小的文件，但它有创建另一个 HTTP 请求的缺点
在 header 本身中内联导航和页面标题的 CSS。虽然这不会创建另一个 HTTP 请求并会解决问题，但 CSS 不会像我将它放在外部文件中那样被缓存。
这个问题的最佳解决方案是什么？是否有良好的实践指南？
是的，这个问题的解决方案是将 css 的关键部分（或全部）直接嵌入到文件中，例如 (index.html)，因为如果你有更多文件，那就是一个新的请求它们中的每一个，因此加载页面需要更多时间:)
根据Google，最好的选择是第二个。
良好做法指南是：
- 尽可能少写css，避免写不必要的css属性。
- 始终尝试为所有样式创建一个 css 文件，除非有必要使用多个 css 文件。即使这样，也不要创建超过 3 个 css 文件。
- 使用 CDN link 包含框架、工具包。
- 避免编写内联 css 样式，使用外部 css 文件。
- 正确使用html标签。 html5 引入了一些新标签，如页眉、主要、旁边、导航、页脚。正确使用这些标签。它给出了一个清晰的结构。所以没有必要手动为这些标签创建div class。
我的问题是，您如何知道您的 css 文件导致您的页面呈现缓慢？您在使用任何 javascript/jQuery 插件吗？