HTML5可以更快速加载页面,为什么在加载页面时首先加载HTML和CSS会更快？

本问题已经有最佳答案，请猛点这里访问。

为什么在加载页面时先加载HTML和CSS会更快？一般规则的例外情况是什么(如果有的话)？

如果你真的关心速度，你可以把它们都缩小。您还可以删除任何不必要的声明和元素。如果它是单页应用程序，您还可以将整个CSS粘贴到文档的head中的style元素中。根据StackOverflow的工作方式，我必须投票结束这个问题，因为它主要基于意见。

这个问题似乎不是主题，因为它似乎与帮助中心定义的范围内的编程无关。它可能更适合webmasters.se。

注意：这个问题可能更适合于webmasters.se。

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

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

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

然后加载CSS使它看起来很漂亮。理想情况下，加载CSS应该花费零时间，这就是为什么CSS通常是一个阻止请求，以避免可能发生的FOUC(非样式内容的闪烁)。

最后是javascript。这是最后加载的，因为它不应影响页面的外观。至少，不是马上。在用户交互之前。而且，由于用户极不可能在前十分之几秒钟内有终止符反射并与您的页面交互，所以可以稍后再加载它。

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

但它是"更好的"--好奇你是否能指出任何遵循这个"更好的"想法的现代网站

这个答案绝对是正确的，非常简洁和准确。应标记为答案。我在这里学到了一些东西！

@Zerkms Mine是这样做的，而且我得到了有机的反馈(即未经允许的)，祝贺我有一个"似乎在你点击链接之前就加载"的网站，因为这样的优化让它看起来很快。

@naet the dark absol:stackoverflow.com在我看来是即时的，它在头中加载CSS。所以可能不是瓶颈？

这个缓存的导航想法不是我以前听过的，但绝对是很棒的。你有没有遇到过从搜索引擎爬行的问题？我必须假设您使用的是站点地图和规范URL，可能没有问题。

@所以Zerkms有非常强大的服务器支持它。大多数网站都没有，因此"看起来很快"变得更具挑战性：)

@暗淡的absol：如果你有慢服务器/慢脚本，那么你的浏览器会因为等待第一个字节而不停地旋转。在生成响应之后-提供内容的速度将仅取决于延迟+网络速度。所以说实话，我看不出渲染速度和服务器的CPU功率之间的联系。

@Trnelson我可以摆脱它，因为实际上所有的导航都与游戏相关，因此无论如何都不会被索引。唯一真正可索引的东西是主页、个人资料和论坛，所有这些都可以从论坛本身进行反向链接。有点作弊。在一般情况下，您可以使用站点地图或robots.txt文件来帮助搜索引擎。

@没错，这就是为什么优化道路的每一步很重要。因此，需要最后加载脚本，因为到用户已经等待服务器响应和填充的时候，他们最不需要的是由于次优的CSS/脚本顺序而需要更多的等待时间。

@黑漆漆的absol："这就是为什么优化道路的每一步很重要的原因"——不清楚为什么这是一个"优化"。由于fouc，用户体验肯定会更糟。所以从这个角度来看，它是退化，而不是优化。"css in the top"的性能并不仅仅因为css文件在第一次请求后被缓存而变得更差。所以把它们放在头上基本上是自由的。我甚至没有在他们的性能指南中提到谷歌建议把CSS放在最前面(developers.google.com/web/fundamentals/performance/&hellip；)

@Zerkms也许我在早上很难正确地表达自己，xd我想说的是页面需要以一种尽可能快的方式加载。虽然这意味着拥有足够强大的服务器来处理您的网站，但这也包括一些小的事情，比如以最佳方式加载页面以达到预期效果。整个问题是关于首先加载HTML和CSS，大概是在JavaScript之前——我一直想给出的答案是，首先加载HTML和CSS，然后JS提供了更快加载的外观，因为内容占用更少。

@zerkms啊，我明白了-我的意思是CSS应该保持在头部，因为这将允许页面加载更少的fouc…ly。但我并没有说xd

@现在整个讨论对我来说是有意义的。

@泽克小姐，你在讲道理！D

@zerkms:google对javascript的想法，部分解释了为什么把css放在javascript文件之前更好。

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

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

有什么例外吗？

我能想到的唯一例外是，当您想要动态地动态更改CSS时。HTML允许您在运行时加载和更改CSS声明，这些更改将立即应用。

@哦，一切都有例外。甚至"你不应该杀人"，因为"杀人的人应该被处死"，这意味着"杀人的人应该免于被处死"，否则一次谋杀会导致人类灭绝……总之…pagespeed提供洞察力。见解可能比"建议"评级低，因为它们完全取决于上下文和需求。

它对搜索引擎优化更有利，因为爬虫可以扫描数千个网站。它只读取你的HTML源代码几秒钟。不管怎样，即使你的网站没有完全加载。所以最好先用有用的关键字加载部件。