2010-12-09 79 views
21

我看到Javascript代码通常在HTML代码的标题部分。将JavaScript代码放在HTML代码中的任何位置都可以吗?

<head> 
<script type="text/javascript" language="javascript" src="core.js"></script> 
... 
</head> 

可以将Javascript代码放入HTML代码的正文部分吗?我测试了它,但它似乎工作。

<body> 
<script type="text/javascript" language="javascript" src="core.js"></script> 
... 
</body> 

如果是这样,为什么Javascript书籍的例子将JavaScript代码放在标题部分? 如果不是,将JavaScript代码放在body/heading部分之间有什么区别?

+0

这个问题在覆盖主题方面做得很好:http://stackoverflow.com/questions/143486/unobtrusive-javascript-script-at-the-top-or-the-bottom-of-the-html-代码 – wsanville 2010-12-09 14:10:34

+0

我很感激,如果有人也会提到包含Javascript的最佳实践,它会影响页面的外观,为的是不让用户在加载过程中看到“半渲染的,没有JS处理的”页面。 – Kos 2010-12-09 14:34:47

+2

@Kos:Google for FOUC(无版内容的闪光)对于你所说的,我会给这些元素一个可见性:hidden;样式,在dom:ready上执行样式,并在事件处理程序结束时删除隐藏的样式。 – 2010-12-09 14:56:12

回答

16

它不仅可以,it's actually better,因为它让内容第一。

如果您的观看者的连接速度较慢(例如移动),最好先发送实际内容,以便他们在浏览器下载Javascript时可以阅读它。

+2

完全没问题,他接受了我的这个答案,但我真的希望这不是因为他认为SLaks提倡在所有地方泼洒脚本标记 – 2010-12-10 00:16:31

1

根据规范,它是合法

大多数示例在头文件中使用它们,因为头文件会先出现,浏览器将能够更快地解析引用并下载JS文件。

此外,这些链接并不是显示的一部分,所以传统上,放在标题中。

3

你可以做到这一点,人们经常这样做。

例如,人们喜欢在关闭</body>之前放置script标签,以使网页渲染速度更快。另外,如果在创建元素后执行脚本块,则不需要等待DOM就绪。

即使被警告,不要添加,或从标记树一个未关闭的祖先(不包括脚本块的直接父元素)删除元素,或者你会得到可怕的Operation Aborted错误的IE浏览器。

1

这是完全合法的,但似乎有一些不同的意见。那些说把所有的javascript引用放在头部的人都认为脚本是在页面其余部分变得可见并依赖它之前下载的。所以你的用户不会在屏幕上看到一个对象,试图与它交互,并获得一个错误,因为JavaScript代码尚未加载。

另一方面,有争论的是,在用户看到页面之前加载所有脚本需要更长的时间,并且会对网站的感知速度产生负面影响。

+0

@Vincent:但是,如果在用户尝试与外部脚本加载之前的页面,这意味着页面作者正在使用`onclick`等,并且应该是LART。 – cdhowie 2010-12-09 14:16:05

+0

@cdhowie true。我希望你能避免我提到的错误,我只是指出了这个论点,并不一定同意它。 – 2010-12-09 14:17:50

10

所有人都说这样更好只适用于你在页面底部讨论(这是一个争论的事情)从代码质量的角度来看,它是不好的,撒上脚本标签通过你的HTML。对JavaScript的所有引用应在页面上的一个地方,无论是头部(他们应该是),或最底部(作为PERF优化)

编辑:

基本上,一个网页是由3件组成;样式(css),结构(html)和行为(javascript)。这些作品都非常独特,所以尽可能将它们分开是有意义的。这样,如果你需要改变一些JavaScript,它是在一个地方。如果它通过文件分散,找到你正在查找的代码变得更加困难,而且当你只是在查看结构时,代码基本上变成了噪声。

这与为什么不在您的页面上散布数据库访问代码的原因相同。它与技术原因无关,纯粹是建筑/设计决定。 ,做不同的事情代码应该是分开的可读性,可维护性,并推而广之,refactorability(不知道这最后一个实际上是一个字......)

1

只是要加上:

我有首选在</body>之前添加Javascript文件。我的理由是:

  • 内容可以加载并首先显示。如果您首先加载大量的Javascript文件,这些文件在页面加载之前几乎毫无意义,那么在加载JS文件之前,用户将无法看到任何内容。
  • 大多数Javascript代码需要与UI一起工作,只能在加载UI后运行。将代码放置在html文件的末尾可减少使用onload事件处理程序的需求。
  • 把JavaScript片段放在整个HTML文件中是非常不好的习惯。将所有文件放在HTML文件的后面,可以让您更有效地管理Javascript。体内
1

的JavaScript将被立即执行,而页面加载到浏览器

在体内的最终配售的JavaScript将推迟JavaScript的负载(即:页面会呈现更快),但请记住,任何用于事件的javascript函数应该在事件声明之前加载,这主要是因为用户可能能够在页面完全加载之前触发事件(所以在加载函数之前)!

0

我曾经把它放在脑海中,然后我听说加载页面需要更长的时间,所以我开始将脚本放在最下面。但是,我发现最“干净”的方式是将它放在头部,但是将脚本放置在document.ready函数中。这样你就拥有了两全其美的优点。它更清洁,因为它在头部,并且在内容加载之前不加载,所以在性能方面也没有任何问题。

使用jQuery,例如,你可以像这样做:当页面已经被完全加载

$(document).ready(function() { 
    alert('test'); 
}); 

警报才会弹出,即使脚本是在头部。

相关问题