将JavaScript放在HTML文件中的位置?

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

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


雅虎! 由于浏览器下载组件的方式,卓越的性能团队建议将脚本放置在页面底部。

当然,Levi的评论“就在你需要之前并且不早”是真正的答案,即“取决于”。


最好的地方就是在你需要它之​​前和之后。

另外,根据用户的物理位置,使用诸如亚马逊S3服务之类的服务可能会帮助用户从距服务器更近的服务器上下载服务。

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


作为一个经验法则,放置<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>

为什么?

脚本导致的问题是它们会阻止并行下载。 HTTP / 1.1规范建议浏览器每个主机名并行下载至少两个组件。 如果您从多个主机名提供图像,则可以同时发生两个以上的下载。 然而,当脚本正在下载时,浏览器将不会启动任何其他下载,即使是在不同的主机名上。 更多...

CSS

有点偏离主题,但是......将样式表放在顶部。

在研究Yahoo!的性能时,我们发现将样式表移动到文档HEAD中会使页面显示加载速度更快。 这是因为将样式表放在HEAD中允许页面逐步呈现。 更多...

进一步阅读

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

链接地址: http://www.djcxy.com/p/87965.html

上一篇: Where to place JavaScript in an HTML file?

下一篇: HTML attribute with/without quotes