`
fang9159
  • 浏览: 47165 次
  • 性别: Icon_minigender_1
  • 来自: 湖北
社区版块
存档分类
最新评论

关于对defer的理解.

IE浏览器ASPHTML5HTC 
阅读更多
<script defer></script>
defer作用是文档加载完毕了再执行脚本内容.
我也一直是这样认为的。所以有的时候在提高性能上会去考虑它.比如有时可以在整个文档加载完后再去执行它.

但请大家看一下这样的一个例子,大家说一下它的执行顺序是什么样子的呢. 
<body>
<script defer>
alert(1);
</script>
<script>
alert(2);
</script>
<script>
alert(3);
</script>
</body>


运行之后就会觉得很怪了。但我一直找不到原因,我不知道是不是我对defer的理解有问题.
所以要请各位.
分享到：
| 一晃两年过去了,现在是否续签呢?
评论
14 楼 hax 2007-07-03  
正在制定的html5有极大可能会完善script标签的定义。

会有两个属性，async和defer。

其中defer将明确为在整个page的parsing结束之后执行（执行时机差不多就是DOMContentLoad或者IE htc的ondocumentready）。并且会严格按照所有defer的script的顺序执行。

13 楼 rocwang 2007-07-03  
defer只是告诉浏览器你的这段脚本不会向文档输出内容，有的浏览器可以进行优化，还是不要用这个来控制执行顺序的好。
12 楼 hax 2007-07-02  
Lucas Lee 写道
查了一下MSDN的DHTML Reference不就知道了？
这是一个符合w3c标准的属性，所以解释是通用的。
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/defer.asp

defer，我的理解是，等下载完所有的页面后再执行。



如前所述，千万不要以为msdn的描述是可靠的，通用的。实际上msdn经常会有自己打自己耳光的事情。
11 楼 hax 2007-07-02  
defer的含义并不是这样的。

在w3c标准中defer的本意只是表示这段脚本不会输出文档内容，所以可以继续解析和呈现。至于执行顺序，完全语焉不详。而且这个属性只是一个hint，没有说必须如此，所以许多浏览器根本不睬这个属性。

但是在defer属性的创造者ms那里，是有execute顺序的，关于defer的稀奇古怪的行为请看：http://www.websiteoptimization.com/speed/tweak/defer/

显然defer是个讨厌的东西，需要慎用。
10 楼 ueseu 2007-07-02   
<script defer>
function init(){
document.getElementById("div").innerHTML="OK";
}
init();
</script>
<div id="div">如果你能看到这一句,那就是说没有达到我所要的效果
<img src="http://icon.ajiang.net/icon_0.gif" />
</div>


在IE6和FIREFOX2下完全不一样
9 楼 j2eeqk 2007-03-12  
希望zkj_beyond之js大拿能出来给点说发~~~
8 楼 fang9159 2006-11-09  
所以还是少用这个为好.
平时写程序的时候注意顺序也没什么问题.
7 楼 ixiaoyong 2006-11-08  
该代码如果在本地执行 和 部署到远程服务器再打开后再执行 的顺序也不同。。。
我的机器是win2k
应用程序服务器是tomcat
6 楼 BIGN 2006-11-07  
其实这跟使用什么样的浏览器有关系的,我用Firefox都没这样的效果
5 楼 fang9159 2006-11-07  
liuyxit 写道
要注意是基于什么标准： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
<script defer = true> 
alert(1); 
</script> 
<script> 
alert(2); 
</script> 
<script> 
alert(3); 
</script>
</BODY>
</HTML>
我调试过,不过它执行的顺序仍然有问题.
4 楼 liuyxit 2006-11-07  
要注意是基于什么标准： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
<script defer = true> 
alert(1); 
</script> 
<script> 
alert(2); 
</script> 
<script> 
alert(3); 
</script>
</BODY>
</HTML>
3 楼 LucasLee 2006-11-07  
fang9159 写道
to Lucas Lee:
更怪的是
你直接把这一段拷贝过去执行看看?
记住,不要<body>标签
<script>
<script defer = true> 
alert(1);  
</script> 
<script> 
alert(2);  
</script> 
<script> 
alert(3);  
</script>
它的顺序又变成正常了。但是前提是你要删掉body标签.


我试验了，将<script>放在<body>之外可以得到期望的顺序。
2 楼 fang9159 2006-11-07  
to Lucas Lee:
更怪的是
你直接把这一段拷贝过去执行看看?
记住,不要<body>标签
<script>
<script defer = true> 
alert(1);  
</script> 
<script> 
alert(2);  
</script> 
<script> 
alert(3);  
</script>
它的顺序又变成正常了。但是前提是你要删掉body标签.
1 楼 LucasLee 2006-11-07  
查了一下MSDN的DHTML Reference不就知道了？
这是一个符合w3c标准的属性，所以解释是通用的。
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/defer.asp

defer，我的理解是，等下载完所有的页面后再执行。

结果我试了一下楼主的代码，结果真不是这样，就是有没有defer，都按出现的顺序执行！
在ff上一样。
我修改了一下代码： 
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
 <script defer=true>  
 alert(1);  
 </script>  
111

 <script>  
 alert(2);  
 </script>  
222
 <script>  
 alert(3);  
 </script>
333
</BODY>
</HTML>


在FF上执行跟以前一样，但在IE上执行结果很有趣：
111在alert(1)之前出现，说明了defer起了一点用，让alert(1)在11后被执行；而alert(2)在222出现前执行的，333同样。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    【JavaScript源代码】如何在Vue中实现Svelte的Defer Transition.docx

    　最近观看了Rich Harris的视频，惊叹于Svelte框架的高效同时，还发现了Vue所不具备的一些关于动画的原生支持—defer transitions.　先看看Svelte所谓的defer transition的效果吧。　这是使用Svelte做的Todo Demo...

    go代码-defer_defer.go

    go代码-defer_defer.go

    defer的基本使用.go

    defer的基本使用.go

    The way to go

    go程序设计语言 Contents Preface................................................................................................................................. xix PART 1—WHY LEARN GO—GETTING ...

    [Go语言入门（含源码）] The Way to Go (with source code)

    The Way to Go，: A Thorough Introduction to the Go Programming Language 英文书籍，已Cross the wall，从Google获得书中源代码，分享一下。喜欢请购买正版。 目录如下： Contents Preface......................

    golang中defer的关键特性示例详解

    本文主要给大家介绍了关于golang中defer的关键特性，分享出来供大家参考学习，下面话不多说，来一起看看详细的介绍： 一、defer 的作用和执行时机 go 的 defer 语句是用来延迟执行函数的，而且延迟发生在调用函数 ...

    06-defer和async.md

    大厂前端面试|# 开始 前端工程师有很多，而是技能全面、独当一面的前端工程师到哪里都是“香饽饽”，企业争抢。所以，技术广度将决定你的稀缺性，以及未来的发展空间。本章将通过多个面试题，讲解前端面试常考的...

    go-tflite:绑定TensorFlow Lite

    defer model . Delete () options := tflite . NewInterpreterOptions () defer options . Delete () interpreter := tflite . NewInterpreter ( model , options ) defer interpreter . Delete () interpreter . ...

    requestz:Zig的HTTP客户端

    defer client. deinit (); var response = try client. get ( "http://httpbin.org/get" , .{}); defer response. deinit (); 发送带有标头的请求 const Headers = @import ( "http" ).Headers; var headers = ...

    Defer.jl：简化julia的资源清理

    Defer.jl：简化julia的资源清理

    async与defer的区别

    形象的描述了async与defer的区别，简单易懂的理解 async是异步执行，异步下载完毕后就会执行，不确保执行顺序，一定在 onload前，但不确定在 DOMContentLoaded事件的前或后 defer是延迟执行，在浏览器看起来的效果像...

    dgejrmine-defer-background.rar_负荷 混沌_负荷预测

    用混沌理论和广义回归神经网络进行短期负荷的预测,取得了满意的效果

    go-avx:用于golang的AVX（高级矢量扩展）绑定

    defer avx . MmFree ( x ) defer avx . MmFree ( y ) defer avx . MmFree ( z ) for i := 0 ; i &lt; dim ; i ++ { x [ i ] = float32 ( i ) y [ i ] = float32 ( i + 1 ) } avx . Add

    go语言中匿名返回值和命名返回值对defer的影响

    匿名返回值顾名思义，未对函数的返回值作命名，是隐藏的，如下代码： func anonymousReturnValues() int { var res int defer func() { res++ fmt.Println(defer) }() return res } 上述函数中返回值只指定...

    go代码-defer_filo.go

    go代码-defer_filo.go

    go代码-defer_impact.go

    go代码-defer_impact.go

Magicbox
Global site tag (gtag.js) - Google Analytics