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

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


当前回答

对于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浏览器中都可用。

其他回答

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

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

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

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

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

根据经验,放置<script>标记的最佳位置是页面底部,就在</body>标记之前。就像这样:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

Why?

脚本造成的问题是它们会阻塞并行下载。HTTP/1.1规范建议浏览器在每个主机名上并行下载不超过两个组件。如果从多个主机名提供映像,则可以同时进行两次以上的下载。然而,在下载脚本时,浏览器不会启动任何其他下载,即使是在不同的主机名上。更多…

CSS

有点跑题了,但是…把样式表放在顶部。

在Yahoo!之后,我们发现将样式表移动到文档HEAD会使页面加载更快。这是因为将样式表放在HEAD中允许页面逐步呈现。更多…

进一步的阅读

雅虎发布了一个非常酷的指南,列出了加快网站速度的最佳实践。绝对值得一读: https://developer.yahoo.com/performance/rules.html

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

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