为什么在加载页面时首先加载HTML和CSS会更快?

Why is it faster to load HTML and CSS first while loading a page?

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

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


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

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

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

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

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

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

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


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

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


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