假设我有一个相当大的JavaScript文件,压缩到大约100kb左右。这里的文件指的是一个外部文件,可以通过<script src="…">,而不是粘贴到HTML本身。

在HTML中把它放在哪里最好?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

每个选项之间是否有任何功能差异?


当前回答

脚本应该包含在body标记的末尾,因为这样HTML将被浏览器解析并在脚本加载之前显示出来。

其他回答

最好的地方是在你需要它之前,而不是更早。

另外,根据用户的物理位置,使用类似Amazon S3服务的服务可以帮助用户从物理上比您的服务器更近的服务器上下载。

你的js脚本是一个常用的库像jQuery或原型?如果是这样,有许多公司,如谷歌和Yahoo,有工具可以在分布式网络上为您提供这些文件。

把javascript放在顶部似乎更整洁,但从功能上讲,最好是HTML。这样,javascript就不会在加载HTML元素之前运行并试图引用它们。这类问题通常只有在通过实际的互联网连接加载页面时才会显现出来,尤其是在速度较慢的互联网连接上。

你也可以尝试通过从其他javascript代码中添加头元素来动态加载javascript,尽管这只有在你没有一直使用所有代码的情况下才有意义。

Yahoo !出色的性能团队建议将脚本放在页面的底部,因为浏览器下载组件的方式不同。

当然,李维的评论“就在你需要它之前,而不是更早”确实是正确的答案,即。“看情况”。

就像其他人说的那样,它应该放在一个外部文件中。我更喜欢在<head />的末尾包含这样的文件。这个方法比机器友好,但这样我总是知道JS在哪里。它只是不像在其他地方包含脚本文件那样可读(恕我冒昧)。

如果你真的需要挤出每一个毫秒,那么你可能应该做雅虎说的。

答案取决于你如何使用javascript的对象。正如已经指出的,在页脚而不是页眉加载javascript文件肯定会提高性能,但应该注意,所使用的对象的初始化时间要晚于在页脚加载它们。还有一种方法是加载文件夹中的“js”文件 所有文件都可以使用。