2013-03-04 67 views
0

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

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

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

+0

“创建外部链接到.js文件将禁用添加PHP标记的可能性” - 不是如果您将JavaScript文件托管在服务器上,并且配置服务器以在通过PHP运行.js文件之前提供服务。 – 2013-03-04 16:43:05

回答

6

它不仅是优良把script标签在body元素,除非你有一个很好的理由把它在head,这是首选把它在body元素,最好刚闭幕</body>标记之前。这样,您的主要内容(您的标记)就会尽快呈现给用户,而不是等待脚本文件加载/ JavaScript引擎启动并执行脚本。

参考文献:


附注您的评论:

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

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

+0

我把我所有的jquery放在页面的最底部。我喜欢将顶部的所有标记和底部的所有脚本都放在一起。更容易让我看到我想看到的。 – 2013-03-04 16:37:09

+0

哦,这很酷,谢谢! – user2124857 2013-03-04 16:37:15

+0

根据你的编辑 - 是的,但是,几乎每个文件都包括jquery,验证插件,日期小部件和其他类似的东西 - 这一切都会产生相当多的http请求,并且我不知道是否有办法尽量减少这个... – user2124857 2013-03-04 16:43:50

1

事实上,有它的顶部是每个共振峰和一个危险的地方,把它少:

就在在结束标记

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

认沽脚本底部 标记:javascript 脚本导致的问题是它们会阻止并行下载。 HTTP/1.1规范建议浏览器每个主机名并行下载至少两个组件。如果您从多个主机名提供图像,则可以同时发生两个以上的下载。然而,当脚本正在下载时,浏览器将不会启动任何其他下载,即使是在不同的主机名上。 在某些情况下,将脚本移动到底部并不容易。例如,如果脚本使用document.write插入页面内容的一部分,则不能在页面中移动较小的内容。也可能存在范围问题。在很多情况下,有办法解决这些情况。 另一个经常出现的建议是使用延迟脚本。 DEFER属性指示该脚本不包含文档。写入,并且是浏览器可以继续呈现的线索。不幸的是,Firefox不支持DEFER属性。在Internet Explorer中,该脚本可能会延迟,但不如预期的那么多。如果脚本可以被延期,它也可以被移动到页面的底部。这会让你的网页加载速度更快。

+0

但是这并不适用于OP的情况,因为OP在'