Question

加载javascript文件最理想的方式是什么？另外，我想确保应该维护javascript文件的顺序。如果我有

<script src="javascript1.js">
<script src="javascript2.js">

在我的页面上，然后javascript1.js应该在javascript2.js之前加载

感谢。

编辑：感谢您的回答，但我的问题不仅与js文件的顺序有关。我想在不使用任何第三方js库的情况下尽快加载js文件。类似的解决方案可以在www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/找到，但使用此解决方案并不能保证文件的顺序我，至少。

Answer 1

没有单一的“最佳”加载Javascript文件的方式。不同的方式在不同的场景中效果最佳。

加载Javascript文件的常规方法是将script标记放在head标记中。

您可以在script标记内放置一些body标记，以便稍后加载。这样做的一个常见原因是无需等待脚本加载即可显示页面内容。

脚本以标记放置在代码中的方式执行。在script标记下面执行代码会等待首先执行Javascript。

在您的问题中，您说您希望一个脚本在另一个脚本之前加载，这在代码中仅使用script标记无法保证。然后，您必须在第一个Javascript中生成第二个脚本标记，并使用document.write将其放入页面中。要按照该顺序生成脚本执行，您可以按照自己的方式使用script标记，并保证订单。

注意：您应在type标记中指定script属性，以便标记无错误地验证。您需要包含script代码的结束标记。

<script type="text/javascript" src="javascript1.js"></script>
<script type="text/javascript" src="javascript2.js"></script>

Answer 2

正如其他人所说，脚本是按照页面上的位置顺序加载的（除非它们用javascript包装以便稍后加载）

将脚本标记放在页面底部可以帮助新旧浏览器的加载过程。虽然某些脚本可能（比如modenizer）需要在此过程中先加载。索引代码示例的http://html5boilerplate.com/可以看到一个很好的例子。

编辑：

在您进行编辑之后，有这些信息可以提供帮助

<script type="text/javascript">
  document.writeln("<script type='text/javascript' src='Script1.js'><" + "/script>");
  document.writeln("<script type='text/javascript' src='Script2.js'><" + "/script>");
</script>

关于这方面的完整文档可以在这里阅读（包括其他方法的crevets）http://blogs.msdn.com/b/kristoffer/archive/2006/12/22/loading-javascript-files-in-parallel.aspx

Answer 3

HTML是一种自上而下的过程语言，因此首先发布的任何内容都会先被执行。因此，您所写的顺序是正确的。

Answer 4

您的网络浏览器将按照声明的顺序执行javascript文件，因此在您的示例中：

<script src="javascript1.js">
<script src="javascript2.js">

javascript1.js将在javascript2.js之前执行。

至于最理想的方式，这都是非常主观的。我更喜欢使用javascript进行渐进式增强，因此将我的javascript声明为页面上的最后一个元素，因为网站不需要运行，任何用户都可以看到内容并使用网站，即使在下载javascript时也是如此。

我还希望以缩小的形式将所有脚本捆绑在一起，因此浏览器只需要发出一个请求来获取我的javascript。

Answer 5

有一种思想流派使用parallel loading is good。这意味着脚本像Google使用JS提供的GA片段一样加载。这样做的好方法是使用modernizr。此脚本使您可以在需要时加载脚本。您需要以传统方式包含modernizr脚本，然后在需要时编写一些JS来加载其他脚本。

Answer 6

可以在这里找到最佳答案：Here:http://www.html5rocks.com/en/tutorials/speed/script-loading/

理想情况下，如果您需要按特定顺序加载它们（如果动态添加脚本），请执行此操作：

`

function changeImage(bild)
        {   
            alert('clicked');

            $('#bild').attr('usemap','');
            $('#bild').fadeOut('slow', function()
            {   
                $('#bild').attr('src', bild);
                $('#bild').fadeIn('slow');
            });
        }

`

这是没有订单的：

`

['//other-domain.com/1.js',
  '2.js']
   .forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});

`

但是，如果您只需要静态脚本，那么就像其他许多人所建议的那样，在身体的末端加上这个：

['//other-domain.com/1.js',
  '2.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
});

加载javascript文件最理想的方式是什么？

6 个答案: