javascript附加代码的最佳位置

时间:2013-03-04 16:34:41

标签: php javascript html

我的问题是 - 是否可以在<script>...</script>部分的顶部某处放置javascript附加代码(<body>标记包含验证等简单内容 - 不链接到任何外部源代码?

将它放在那里并将代码放在<head>部分之间有什么区别吗?

我想用一个头部创建一个布局文件。每个模板都有不同的js代码部分 - 创建.js文件的外部链接将禁用添加PHP标记的可能性,所以我必须找到另一种方式。

3 个答案:

答案 0 :(得分:6)

不仅可以将script标记放在body元素中,除非您有充分理由将其放入head,它是首选将其放在body元素中,理想情况是在结束</body>标记之前。这样,您的主要内容(您的标记)将尽快呈现给用户,而不是等待脚本文件加载/启动JavaScript引擎并执行脚本。

参考文献:


评论的旁注:

  

每个模板都有不同的js代码部分 - 创建.js文件的外部链接将禁用添加PHP标记的可能性,所以我必须找到另一种方式。

理想情况下,尝试找到一种方法,使您只加载一个文件而不是一堆文件。每个HTTP请求都有大量的开销。您将在上面的第一个链接中看到的建议之一是最小化HTTP请求的数量。

答案 1 :(得分:1)

事实上,拥有它在顶部的人数较少,并且是一个冒险的地方:

在关闭身体标签之前

http://developer.yahoo.com/performance/rules.html#js_bottom

  

将脚本放在底部   标签:javascript   脚本引起的问题是它们阻止了并行下载。 HTTP / 1.1规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像,则可以并行执行两次以上的下载。但是,在下载脚本时,即使在不同的主机名上,浏览器也不会启动任何其他下载。   在某些情况下,将脚本移到底部并不容易。例如,如果脚本使用document.write插入页面内容的一部分,则无法在页面中向下移动。可能还存在范围问题。在许多情况下,有办法解决这些问题。   经常出现的另一种建议是使用延迟脚本。 DEFER属性指示脚本不包含document.write,并且是浏览器可以继续呈现的线索。不幸的是,Firefox不支持DEFER属性。在Internet Explorer中,脚本可能会延迟,但不是所需的。如果可以延迟脚本,也可以将其移动到页面底部。这将使您的网页加载速度更快。

答案 2 :(得分:1)

只要在您的页面上调用javascript代码之前包含它,如果它位于正文的头部或上部,则不应该有所不同。如果您正在构建一个公共标题,那么将它分开是一个好主意。这样,您就不会调用未使用的代码。