浏览器如何加载网站内容的视觉演示

Question

有没有人知道浏览器如何加载内容的直观表示？一些可能解释不同场景的视频，例如如何加载JS文件。 html首先加载然后加载JS还是加载它们。

一般来说，我遵循标准，我的JS被添加到页面底部，但我从未很好地掌握浏览器如何加载内容，我希望看到像慢动作视频这样的视觉表现各种各样的例子。

谢谢！

Answer 1

我认为YSlow presentation就是你想要的。我亲眼看到了不同的版本，所以你可以稍微挖一下，看看你是否能找到一个非常棒的视觉效果。另外，尝试使用YSlow插件或其他分析器，例如Safari的Web Inspector。

Answer 2

您可以使用Firebug或Chrome's Dev Tools中的网络标签，这些标签会显示加载内容的瀑布。

此外，您可以通过Charles之类的连接测试加载页面并限制连接速度。