将JavaScript放在HTML文件中的哪个位置？

Question

将JavaScript放在HTML文件中的哪个位置？

nic*_*ckf 202 html javascript optimization

假设我有一个相当庞大的JavaScript文件,打包到大约100kb左右.通过文件我的意思是它是一个外部文件,将在via中链接<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>

Run Code Online (Sandbox Code Playgroud)

每个选项之间是否存在功能差异？

Answer 1

Wal*_*sby 171

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

当然Levi的评论"就在你需要它之前,不久之后"真的是正确答案,即"它取决于".

此外,雅虎EPT建议将JS置于底部的原因是因为浏览器必须进入单线程模式,而JS加载然后执行.如果脚本在头部或内容中,浏览器将在处理JS时"暂停".通过将JS置于底部,内容将被加载并且通常可见,因此用户可以在浏览器仍然处理JS时开始阅读它. (55认同)
我希望引用**"你的页面底部"**这里不超出`</ body>`？ (7认同)
例如,如果你要做一堆jQuery的东西,你需要在实际尝试使用它之前加载库. (4认同)

Answer 2

Lev*_*sol 75

最好的地方就在你需要它之前,不久之前.

此外,根据用户的物理位置,使用亚马逊S3服务等服务可以帮助用户从物理上比服务器更靠近服务器的服务器下载服务.

你的js脚本是一个常用的lib,比如jQuery还是原型？如果是这样,有许多公司,如谷歌和雅虎,都有工具在分布式网络上为您提供这些文件.

Answer 3

mar*_*nas 57

根据经验,放置<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>

Run Code Online (Sandbox Code Playgroud)

为什么？

脚本引起的问题是它们阻止了并行下载.HTTP/1.1规范建议浏览器每个主机名并行下载不超过两个组件.如果您从多个主机名提供图像,则可以并行执行两次以上的下载.但是,在下载脚本时,即使在不同的主机名上,浏览器也不会启动任何其他下载.更多...

CSS

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

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

进一步阅读

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

“脚本引起的问题是它们会阻止并行下载。” — 这不再是真的：https://www.w3.org/TR/html5/scripting-1.html#attr-script-async (2认同)

归档时间：	17 年，7 月前
查看次数：	123082 次
最近记录：	7 年，2 月前