在HTML文档中嵌入JavaScript时,在哪里放置<script>标记和包含的JavaScript?我似乎记得,你不应该把这些放在<head>部分,但放在<body>部分的开头也是不好的,因为JavaScript必须在页面完全呈现之前进行解析(或类似的)。这似乎将<body>部分的结尾作为<script>标记的逻辑位置。

那么,哪里是放置<script>标记的正确位置?

(这个问题引用了这个问题,其中建议将JavaScript函数调用从<a>标记移动到<script>标记。我专门使用jQuery,但更一般的答案也是合适的。)


当前回答

我认为这取决于网页的执行。

如果要显示的页面在未加载JavaScript的情况下无法正确显示,则应首先包含JavaScript文件。

但是,如果您可以在不下载JavaScript文件的情况下显示/呈现网页,那么应该将JavaScript代码放在页面底部。因为它将模拟快速的页面加载,并且从用户的角度来看,页面加载速度似乎更快。

其他回答

编写JavaScript代码的最佳位置是在</body>标记之后或之前的文档末尾,以先加载文档,然后执行JavaScript代码。

<script> ... your code here ... </script>
</body>

如果您在jQuery中编写,以下内容可以在头文档中,并且将在文档加载后执行:

<script>
    $(document).ready(function(){
        // Your code here...
    });
</script>

这取决于。如果您正在加载一个脚本,该脚本是设置页面样式所必需的/使用页面中的操作(如单击按钮),那么最好将其放在顶部。如果你的样式是100%CSS,并且你有所有按钮操作的回退选项,那么你可以把它放在底部。

或者最好的做法(如果这不是问题)是,你可以制作一个模态加载框,将JavaScript代码放在页面底部,并在加载脚本的最后一行时使其消失。这样可以避免用户在加载脚本之前在页面中使用操作。也要避免不正确的造型。

雅虎推广的标准建议!卓越性能团队,将<script>标记放在文档的<body>元素的末尾,这样它们就不会阻止页面的呈现。

但有一些新的方法可以提供更好的性能,正如我在另一个关于Google Analytics JavaScript文件加载时间的回答中所描述的:

Steve Souders(客户端性能专家)的一些精彩幻灯片介绍了:并行加载外部JavaScript文件的不同技术它们对加载时间和页面呈现的影响浏览器显示什么样的“正在进行”指示符(例如状态栏中的“加载”、沙漏鼠标光标)。

通常,我们必须在结束体标记之前放置脚本,以期待某些特定场景。

例如:

`<html> <body> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> </body> </html>`

如果您仍然非常关心Internet Explorer版本10之前的支持和性能,那么最好始终将脚本标记设置为HTML正文的最后一个标记。这样,您就可以确定DOM的其余部分已经加载,并且不会阻塞和渲染。如果您不太关心版本10之前的Internet Explorer,您可能希望将脚本放在文档的开头,并使用defer来确保它们仅在加载DOM后运行(<script type=“text/javascript”src=“path/to/script1.js”defer></script>)。如果您仍然希望代码在版本10之前的Internet Explorer中运行,请不要忘记将代码包装在窗口中!