2015-09-01 29 views
3

我有一大堆的JSP文件和10-12 javascipt的文件,这我包括在每个JSP文件中使用包括标记,如下所示:将<script>标记放入JSP文件中的最佳位置是什么?

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

我已经看到Where should I put <script> tags in HTML markup?

按照该给出的答案,许多人同意将<script>标签放在结束标签之前。我期待这会减少页面加载时间,但它不会改变加载时间。上述链接中仅提及HTML页面的情况吗?那么JSP页面呢?

请提出是否有更好的方法来处理JSP页面中的常见JavaScript文件。

在此先感谢。

+2

JSP生成HTML,从浏览器的角度来看,静态HTML,PHP,JSP,ASP ......没有区别。因此,如果最佳做法是将脚本放在''标签之前,请将它放在那里。 –

回答

3

在浏览器JSP将被转换成/解释为HTML,所以最好的做法是既JSPHTML一样,说:

许多Web开发者推荐加载JavaScript代码放在页面底部以提高响应速度,这对于HTML服务来说更为重要。在NATIVE沙箱模式中,您加载的所有脚本都会在客户端进行扫描和清理,这可能需要几秒钟的时间。

将标记移动到页面的末尾将使HTML内容在处理JavaScript之前呈现,从而允许向用户呈现微调或其他消息。

,并为进一步的阅读来看看:

2

解决此问题的旧方法是将标记放在您的底部,因为这可确保解析器在最后才会被阻止。

这种方法有其自身的问题:浏览器无法开始下载脚本,直到整个文档被解析。对于大型脚本&样式表的大型网站,能够尽快下载脚本对于性能非常重要。如果您的网站在2秒内未加载,用户将转到其他网站。

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

的现代转型

今天,浏览器都支持异步和推迟的脚本属性。这些属性告诉浏览器在下载脚本时继续解析是安全的。

异步

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

与异步属性的脚本被异步地执行。这意味着脚本在下载后立即执行,同时不会阻止浏览器。 这意味着它的脚本1.

根据http://caniuse.com/#search=async之前执行的可能脚本2下载&,所有的浏览器的80%支持这一观点。

延迟

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

脚本与defer属性,以便执行(即第一脚本1,脚本然后2)。这也不会阻止浏览器。

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

根据http://caniuse.com/#search=defer,所有浏览器中有80%支持此功能。 88%至少部分支持它。

关于浏览器兼容性的一个重要提示:在某些情况下,IE < = 9可能会按顺序执行延迟脚本。如果您需要支持这些浏览器,请先阅读本文!

结论

当前国家的最先进的是把脚本标记和使用异步或推迟属性。这可以让您的脚本尽快下载,而不会阻塞您的浏览器。

好处是您的网站仍然可以正确加载不支持这些属性的20%的浏览器,同时加快其他80%的浏览器速度。

Source

相关问题