关于javascript：放置的最佳位置是什么＆lt; script＆gt;


What is the best place to put <script> tag in a JSP file?

我有一堆JSP文件和大约10-12个javascript文件，我使用include标记在每个JSP文件中包括这些文件，如下所示：

1
   <%@ include file="common_js_files.jsp"%>

我已经看到在HTML标记中应该把标记放在哪里了？

根据给出的答案，许多人同意将标签放在结束体标签之前。我本来以为这样可以减少页面加载时间，但是它并没有改变加载时间。上述链接中提到的情况是否仅适用于HTML页面？JSP页面呢？

请建议是否有更好的方法来处理JSP页面中的此类常见JavaScript文件。

事先谢谢。

相关讨论

在浏览器中，JSP将转换为/解释为HTML，因此，JSP和HTML的最佳实践相同，表示：

Many web developers recommend loading JavaScript code at the bottom of the page to increase responsiveness, and this is even more important with the HTML service. In the NATIVE sandbox mode, all scripts you load are scanned and sanitized client-side, which may take a couple of seconds.

Moving your tags to the end of your page will let HTML content render before the JavaScript is processed, allowing you to present a spinner or other message to the user.

进一步阅读请看：

  • HTML服务：最佳实践，"最后加载javascript"部分。
  • 最佳实践：在哪里包含您的标签。

解决这个问题的旧方法是将标记放在您的底部，因为这样可以确保解析器直到最后才被阻塞。

这种方法有其自身的问题：在分析整个文档之前，浏览器无法开始下载脚本。对于具有大型脚本和样式表的大型网站，能够尽快下载脚本对于性能非常重要。如果你的网站在2秒内没有加载，人们会转到另一个网站。

在最佳解决方案中，浏览器将尽快开始下载脚本，同时分析文档的其余部分。

现代方法

现在，浏览器支持脚本上的异步和延迟属性。这些属性告诉浏览器在下载脚本时继续解析是安全的。

异步的

1
2
<script type="text/javascript" src="path/to/script1.js" async>
<script type="text/javascript" src="path/to/script2.js" async>

具有async属性的脚本是异步执行的。这意味着脚本一下载就执行，同时不会阻塞浏览器。这意味着脚本2可能在脚本1之前被下载和执行。

根据http://canius.com/search=async，80%的浏览器都支持这一点。

推迟

1
2
<script type="text/javascript" src="path/to/script1.js" defer>
<script type="text/javascript" src="path/to/script2.js" defer>

具有defer属性的脚本按顺序执行(即先执行脚本1，然后执行脚本2)。这也不会阻止浏览器。

与异步脚本不同，延迟脚本只在加载整个文档之后执行。

根据http://caniuse.com/search=defer，80%的浏览器都支持这一点。88%的人至少部分支持它。

关于浏览器兼容性的一个重要注意事项：在某些情况下，ie<=9可能会执行延迟的脚本。如果您需要支持这些浏览器，请先阅读本文！

结论

当前最先进的技术是将脚本放入标记中，并使用异步或延迟属性。这样就可以在不阻塞浏览器的情况下尽快下载脚本。

好的是，您的网站仍然应该正确地加载到20%不支持这些属性的浏览器上，同时加速其他80%的浏览器。

来源