如何查看页面中js脚本加载的顺序

Question

如何查看页面中js脚本的顺序？

我目前查看了源 html 并浏览了脚本声明。但是有没有更好的方法来查看加载顺序？

Answer 1

html 代码中的脚本顺序可能不会给出确切的顺序，因为可能存在脚本位于远程服务器上并且出现故障或速度缓慢的情况。最好的了解方法是使用 Chrome 内置的开发人员工具在时间轴上进行直观分析。

enter image description here

Answer 2

2024 年更新

到目前为止，几乎每个浏览器都提供了开发者控制台。无需额外的插件/扩展。

通常可以在 Windows/Linux 上通过 F12 访问这些内容。

enter image description here

初始

您也可以使用 Firebug 的 NET 控制台或其他开发工具的挂件。这会给你类似下面的东西：

example

Answer 3

使用简单的控制台，试试这个：

$(function(){
    $('script',document).each(function(){
          console.log($(this).attr('src') || $(this).text());   
    });
})

Answer 4

脚本标签按照它们出现的顺序依次加载。

这意味着它们会按照它们在 HTML 中出现的顺序一一加载。

Answer 5

脚本标签按照它们在 dom 中出现的顺序加载，这是正确的。但仅限于 dom 中静态的那些。

不适合那些被其他 JavaScript 注入的人。你也必须考虑发起者。

这在跟踪等领域很常见。

因此假设以下 html 来自服务器：

<html>
<script>A</script>
<script>B</script>
<script>C</script>
</html>

所有内容加载完毕后，html 看起来像这样：

<html>
<script>1</script>
<script>A</script>
<script>B</script>
<script>2</script>
<script>C</script>
<script>3</script>
</html>

脚本 1 是在脚本 B 之前加载的吗？

如果脚本 1 可能是由脚本 A 注入的。但如果脚本 1 是由脚本 C 注入的，则绝对不是。

所以这不是那么容易判断的。

所以chrome的网络选项卡是一个非常好的方法。在这里你可以看到 Sirko 和 Vinit 的答案中的真相