Question

在过去的几天里我花了几个小时来重新处理我的一些javascript文件，所以它们都可以在源代码的末尾加载（或者，如果它们必须放在前面，它们会等待定义jQuery ，它在页脚中加载但是我的大多数脚本都需要它。然后我移动了所有可以移动到源代码末尾的脚本。

这是一个变化的粗略例子..

原件：

<html>
<head>
    <title>This is still an awesome web page</title>
    <script type="text/javascript" src="/path/to/script.js"></script>
    <script type="text/javascript" src="//www.example.com/path/to/another/script.js"></script>
    <script type="text/javascript" src="/path/to/jQuery/or/some/other/important/library.js"></script>
</head>
<body>
    <p>lots of great content</p>
    <script type="text/javascript" src="/this/script/must/be/located/in/the/body.js"></script>
    <p>more great content</p>
</body>
</html>

更新：

<html>
<head>
    <title>This is an awesome web page</title>
</head>
<body>
    <p>lots of great content and maybe lots of images too</p>
    <script type="text/javascript" src="/this/script/must/be/located/in/the/body.js"></script>
    <p>more great content</p>
    <script type="text/javascript" src="/path/to/script.js"></script>
    <script type="text/javascript" src="//www.example.com/path/to/another/script.js"></script>
    <script type="text/javascript" src="/path/to/jQuery/or/some/other/important/library.js"></script>
</body>
</html>

所以当我重新加载某些页面时，我做了这个更改并查看了Chrome的网络流量。我很惊讶地发现Chrome在加载图片之前仍会加载我的javascripts。

我做了一些阅读，看起来这是因为Chrome的预加载器（https://plus.google.com/+IlyaGrigorik/posts/8AwRUE7wqAE）提前扫描并加载重要文件。

如果Chrome（以及我认为的其他现代浏览器）会这样做，那么有没有理由继续将javascripts放在源代码的末尾？

Answer 1

您希望将脚本放在HTML的末尾if;

1 - 您的脚本需要访问DOM / CSSOM节点，因此必须在JS之前解析它们。

2 - 您希望在JS仍在下载并针对该页面执行时显示该页面。

浏览器预加载扫描和Javascript文件放置

1 个答案: