为什么在加载页面时先加载 HTML 和 CSS 会更快？ [复制]答案

【问题标题】：Why is it faster to load HTML and CSS first while loading a page? [duplicate]为什么在加载页面时先加载 HTML 和 CSS 会更快？ [复制]
【发布时间】：2014-12-16 09:42:50
【问题描述】：

为什么在加载页面时先加载 HTML 和 CSS 会更快。此一般规则有哪些例外情况（如果有）？

【问题讨论】：

如果你真的关心速度，你可以将它们都缩小。您还可以删除任何不必要的声明和元素。如果它是单页应用程序，您还可以将整个 CSS 粘贴到文档的 head 中的 style 元素中。根据 StackOverflow 的工作方式，我必须投票结束这个问题，因为它是 Primally Opinion Based。
这个问题似乎离题了，因为它似乎与help center 中定义的范围内的编程无关。可能更适合Webmasters.SE。

标签： css html pagespeed page-load-time

【解决方案1】：

注意：这个问题可能更适合Webmasters.SE

您的问题标题和内容不同：p

不是“更快”，而是“更好”。而且它看起来对用户来说更快。

原因是，首先加载 HTML 至关重要，因为它将内容呈现在用户面前。

加载 CSS 然后让它看起来很漂亮。理想情况下，加载 CSS 应该花费零时间，这就是为什么 CSS 通常是一个阻塞请求，以避免否则可能发生的 FOUC（无样式内容的 Flash）。

最后，JavaScript。这是最后加载的，因为它不应该对页面的外观产生影响。至少，不是马上。不是在用户交互之前。而且由于用户极不可能在最初的十分之几秒内产生终结者反应并与您的页面进行交互，所以稍后再加载它是可以的。

请注意，我在上面说“不应该”，但这并不意味着“不能”。在我自己的项目中，JavaScript 实际上负责呈现导航栏和其他页眉/页脚内容 - 这样做是为了可以缓存内容并为每个页面加载节省高达 8Kb 的带宽 - 每个页面加载数百万天，加起来很快！但是在这种情况下，已经为页眉/页脚保留了空间，这意味着即使在页眉/页脚内容加载之前的几分之一秒内，内容本身也可以开始读取 - 这一切都是为了获取重要内容首先向上可见

【讨论】：

"但它是"更好"" --- 好奇你能否指出任何遵循这种“更好”理念的现代网站
这个答案绝对正确，非常简洁准确。它应该被标记为答案。我在这里学到了一些东西！
@zerkms 是我的，我收到了自然反馈（即自发的），祝贺我拥有一个“似乎在你点击链接之前就已经加载”的网站，因为它看起来就像诸如此类的优化的结果。
@trnelson 我可以摆脱它，因为实际上所有的导航都是与游戏相关的，因此无论如何都不会被索引。唯一真正可索引的东西是主页、个人资料和论坛，所有这些都可以从论坛本身反向链接。作弊之类的。在一般情况下，您可以使用站点地图或robots.txt 文件来帮助搜索引擎。
@zerkms 啊，我明白了 - 我的意思是 CSS 应该留在头部，因为这将允许页面加载 FOUC-less...ly。但我实际上并没有说 XD

【解决方案2】：

CSS 文件可以与 HTML 并行加载。这就是为什么它们通常首先在要加载的文档的头部声明。浏览器被分配了几个流，它们可以从同一个域并行加载文档。为了获得更好的性能，如果您可以从不同的域或子域加载文件，您甚至可以获得更好的性能，因为您可以并行加载更多的文档。

JavaScript 文件的不同之处在于它们被认为是阻塞的，并且不一定以与 CSS 文件相同的方式并行加载。这就是为什么在可能的情况下在文档末尾附近加载 JavaScript 文件通常是最佳做法。

【讨论】：

这个有什么例外吗？
我能想到的唯一例外是当您想要动态更改 CSS 时。 HTML 允许您在运行时加载和更改 CSS 声明，并且更改将立即应用。
@MHOOS 凡事都有例外。即使是“你不可杀人”，因为它几乎紧随其后的是“杀人者将被处死”，这意味着“杀人者不被处死”的假设，否则一桩谋杀案将导致到人类的灭绝......无论如何...... PageSpeed 提供见解。见解的评价可能低于“建议”，因为它们完全取决于上下文和要求。

【解决方案3】：

对SEO 更有利，因为Crawlers 扫描了数千个网站。它读取您的 HTML 源代码只需几秒钟。无论如何，即使您的网站没有完全加载。所以最好先用有用的关键字加载部分。

【讨论】：