假设我有一个相当大的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>

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


当前回答

你的javascript链接既可以放在头部也可以放在正文标签的末尾,将链接放在正文标签的末尾确实可以提高性能,但除非性能是一个问题,否则将它们放在头部更便于人们阅读,你知道链接的位置,也可以更容易地引用它们。

其他回答

使用cuzillion,您可以使用不同的方法测试脚本标签的不同位置对页面加载的影响:内联,外部,“HTML标签”,“文档”。“JS DOM元素”,“iframe”,“XHR eval”。有关差异的解释,请参阅帮助。它还可以测试样式表,图像和iframe。

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

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

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

对于100k的Javascript,永远不要把它放在文件中。使用外部脚本Javascript文件。您绝对不可能只在一个HTML页面中使用这么多代码。很可能您正在询问应该在哪里加载Javascript文件,对此您已经得到了满意的答案。

但我想指出的是,现代浏览器通常接受gzip的Javascript文件!只需将x.js文件gzip到x.js.gz,并在src属性中指向它。它不能在本地文件系统上工作,你需要一个web服务器来让它工作。但是传输字节的节省是巨大的。

我已经成功地在Firefox 3, MSIE 7, Opera 9和谷歌Chrome中测试了它。在Safari 3中显然不是这样工作的。

要了解更多信息,请参阅这篇博客文章,以及另一个非常古老的页面,尽管如此,它仍然很有用,因为它指出,web服务器可以检测浏览器是否可以接受gzip的Javascript。如果您的服务器端可以动态地选择发送gzip或纯文本,那么您就可以使页面在所有web浏览器中都可用。

你的javascript链接既可以放在头部也可以放在正文标签的末尾,将链接放在正文标签的末尾确实可以提高性能,但除非性能是一个问题,否则将它们放在头部更便于人们阅读,你知道链接的位置,也可以更容易地引用它们。