浏览 4905 次
|
锁定老帖子 主题：<script>标签的位置/和延迟脚本
精华帖 (0) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-04-03
1、标签的位置
按照惯例，所有<script>元素都应该放在页面的<head>元素中，例如： <html> <head> <title> New Document </title> <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script> </head> <body> <!--这里放内容--> </body> </html> 这种做法的目的是把所有外部文件（包含CSS文件和javascript文件）的引用都放在相同的地方。可是，在文档<head>元素中包含所有的js文件，意味着必须等到全部javascript代码都被下载、解析和执行完成之后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些需要很多javascript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代web应用程序一般都把全部javascript引用放在<body>元素中，放在页面的内容后面，如下例所示： <html> <head> <title> New Document </title> </head> <body> <!--这里放内容--> <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script> </body> </html> 这样，在解析包含的javascript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。 2、延迟脚本 HTML4.0为<script>标签定义了defer的属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会延迟到整个页面都解析完毕后在执行。因此，在<script>元素中设置defer属性（如下面的例子），实际上与上面介绍的把<script>元素放在页面底部的效果是一样的。 <html> <head> <title> New Document </title> <script type="text/javascript" defer="defer" src="example1.js"></script> <script type="text/javascript" defer="defer" src="example2.js"></script> </head> <body> <!--这里放内容--> </body> </html> 这个例子中，虽然我们把<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后在执行。 不过，问题是并非所有浏览器都支持defer属性，IE和firefox3.0是目前唯一支持defer属性的主流浏览器。其他浏览器则会忽略这个属性，不延迟脚本的执行 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-04-05
引用 不过，问题是并非所有浏览器都支持defer属性，IE和firefox3.0是目前唯一支持defer属性的主流浏览器。其他浏览器则会忽略这个属性，不延迟脚本的执行
其它浏览器可以使用async="true"属性，声明脚本异步加载。 |
| 返回顶楼 | |
|
发表时间：2011-04-06
amwjx 写道 引用 不过，问题是并非所有浏览器都支持defer属性，IE和firefox3.0是目前唯一支持defer属性的主流浏览器。其他浏览器则会忽略这个属性，不延迟脚本的执行 其它浏览器可以使用async="true"属性，声明脚本异步加载。 嗯嗯，谢谢。 这是在《javascript高级编程》 图灵 的书里面的一些个人感觉到时很细节的问题，不过还是实践中得到的才是真理来的。 谢谢amwjx ，又学到了新知识 |
| 返回顶楼 | |
|
发表时间：2011-04-08
经过实际测试
defer="defer" 很多情况下会导致非Firefox浏览器其他js出现问题。 以DZ为例，在header加defer="defer" 后，有些版块会出现打不开现象（非Firefox内核） 所以慎用。 |
| 返回顶楼 | |
|
发表时间：2011-04-08
async和defer是不一样的概念，Firefox这两者都支持
defer在DOM Tree Parse完成之后，DOMContentLoaded事件之前，一个特定的时期执行，拥有确定性 async则啥时候下载完啥时候执行，保证顺序，但与DOM并没有关系，无确定性 |
| 返回顶楼 | |
|
发表时间：2011-04-10
如果这 两个 都 有 些:"慎用":, 那还是不如该放哪就放哪....
|
| 返回顶楼 | |
|
发表时间：2011-04-12
还不是很确定，那就先放在body里面吧。
|
| 返回顶楼 | |
|
发表时间：2011-04-12
我尝试把一个写了很多js的页面中，所有的js都迁移到</body>标签的前面 怎么没用啊 页面还是一样的慢。其中js里面有用jquery给页面注册了装载事件。。。感觉没用。
|
| 返回顶楼 | |
