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

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

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


当前回答

如果您使用的是jQuery,那么将JavaScript代码放在您认为最好的地方,并使用$(document).ready()确保在执行任何函数之前正确加载。

附带说明:我喜欢<head>部分中的所有脚本标记,因为这似乎是最干净的地方。

其他回答

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

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

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

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

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

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

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

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

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

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

如果您使用的是jQuery,那么将JavaScript代码放在您认为最好的地方,并使用$(document).ready()确保在执行任何函数之前正确加载。

附带说明:我喜欢<head>部分中的所有脚本标记,因为这似乎是最干净的地方。

放置<script>标记的最佳位置是在关闭</body>标记之前,因此下载和执行它不会阻止浏览器解析文档中的HTML,

此外,从外部加载JavaScript文件也有其自身的优点,比如它将被浏览器缓存,可以加快页面加载时间,它将HTML和JavaScript代码分开,有助于更好地管理代码库。

但现代浏览器还支持其他一些最佳方式,如异步和延迟加载外部JavaScript文件。

异步和延迟

通常HTML页面的执行是逐行开始的。当遇到外部JavaScript<script>元素时,HTML解析将停止,直到下载JavaScript并准备好执行。可以使用defer和async属性更改正常的页面执行。

推迟

当使用defer属性时,JavaScript将与HTML解析并行下载,但只有在完成完整的HTML解析后才能执行。

<script src="/local-js-path/myScript.js" defer></script>

异步

当使用async属性时,一旦遇到脚本,就会立即下载JavaScript,在下载之后,它将与HTML解析一起异步(并行)执行。

<script src="/local-js-path/myScript.js" async></script>

何时使用哪些属性

如果您的脚本独立于其他脚本并且是模块化的,请使用异步。如果使用异步加载script1和script2,则两者都将运行与HTML解析并行,一旦下载并且可用。如果您的脚本依赖于另一个脚本,则对这两个脚本都使用defer:当script1和script2以延迟的顺序加载时,然后,script2将在script1完全执行后执行。如果script2依赖于script1,则必须执行此操作。如果您的脚本足够小并且依赖于另一个脚本然后使用不带属性的脚本,并将其置于所有异步脚本之上。

参考:外部JavaScript JS文件–优点、缺点、语法、属性