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

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


当前回答

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

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

其他回答

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

这个问题的答案要视情况而定。在这种情况下,有两种情况,您需要根据合适的情况做出选择。

场景1 -关键脚本/必用脚本

如果你使用的脚本对加载网站很重要,建议放在HTML文档的顶部,即<head>。一些例子包括-应用程序代码,引导,字体等。

场景2 -不太重要的/分析脚本

还有一些脚本不会影响网站的视图。这样的脚本建议在所有重要的片段加载后加载。答案会在文档的底部,也就是<body>的底部,在结束标签之前。一些例子包括-谷歌分析,hotjar等。

奖励-异步/延迟

您还可以告诉浏览器,脚本加载可以与其他脚本同时进行,并且可以使用脚本代码中的defer / async参数根据浏览器的选择进行加载。

如。<script async src="script.js"></script> .js

我想说的是,这取决于你打算用Javascript代码实现什么:

如果你计划插入外部JS脚本,那么最好 位置在页首 如果你打算在智能手机上使用页面,那么在页面底部, 就在标签之前。 但是,如果你计划组合HTML和JS(动态 创建和填充HTML表,例如),然后你必须放 在你需要的地方。

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

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

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