`
fang9159
  • 浏览: 48212 次
  • 性别: 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

    在Vue中实现Svelte的Defer Transition涉及到对Vue的Transition和Transition-Group组件的理解以及如何模拟Svelte中的动画效果。Svelte的defer transition提供了一种平滑过渡的方式，特别是处理列表项的移动时，它使得...

    go代码-defer_defer.go

    - `README.txt`文件可能包含了对这个例子的解释和使用`defer`的注意事项。 理解并熟练运用`defer`是编写可靠、易于维护的Go代码的关键。它帮助我们遵循“打开资源后必须关闭”的原则，确保资源的正确管理，特别是...

    06-defer和async.md

    在前端技术领域，理解`&lt;script&gt;`标签的`defer`和`async`属性的区别是开发中常见的需求，这关系到页面加载性能和脚本执行顺序。本篇文档围绕这两个属性进行解释，并扩展到前端面试相关的知识点。 ### defer和async的...

    go代码-defer_impact.go

    在分析`go代码-defer_impact.go`时，我们可以深入理解`defer`的工作原理及其对程序的影响。 首先，`defer`语句通常用于资源的释放，如关闭文件、数据库连接等。它的主要特点是，无论函数正常结束还是通过panic异常...

    go代码-defer_parameters.go

    - 这个文件通常包含关于`defer_parameters.go`的额外信息，如代码的用途、示例说明或作者的注释。它可能提供了使用该代码的指导或者对`defer`特性的更深入解释。 通过`defer`，Go语言提供了一种优雅的方式来处理...

    总结Go语言中defer的使用和注意要点

    `defer`非常适合用于处理那些必须成对出现的操作，比如文件的打开与关闭、连接的建立与断开以及锁定与解锁等。这样可以确保即便在异常情况下，相应的清理工作也能得到执行。 ##### 示例 一个常见的用法是在数据库...

    深入理解javascript中defer的作用

    1. **不适用于内联脚本**：`defer`仅对`src`属性有外部脚本文件生效，无法应用于直接在`&lt;script&gt;`标签内写的内联脚本。 2. **避免`document.write`**：在`defer`脚本中使用`document.write`可能会导致问题，因为`...

    Go使用defer函数要注意的几个点

    在Go语言中，`defer`关键字是一个...以上就是关于Go语言中使用`defer`函数需要注意的关键点，理解这些细节可以帮助我们编写更可靠、更易于维护的代码。在实际编程中，合理利用`defer`可以提升代码的健壮性和可读性。

    GO语言Defer用法实例分析

    本文将对Go语言的defer用法进行详细分析，并通过实例来展示其实际使用方法。 首先，要理解的是defer语句后紧跟的函数调用不会立即执行，而是当它所在的函数执行完毕（即将返回的时刻）时才执行。这个特性使得我们...

    zig-string:用Zig制作的字符串库

    Zig字符串（UTF-8字符串库） 我这样做的唯一目的是增进我对zig的经验和理解。 对于将来需要进行某些项目的某些人（包括我自己），它也可能很有用。基本用法 const String = @import ( "./zig-string.zig" ).String;/...

    掌握Go语言的异常处理：defer、panic和recover的协同艺术

    ### 掌握Go语言的异常处理：defer、panic和...通过深入理解`defer`、`panic`和`recover`这三个关键字/函数的作用及其协同工作的机制，开发者可以更好地控制程序的异常处理流程，编写出更加稳定可靠的Go应用程序。

    读Ext之六(延迟任务的执行)

    2. **启动任务（start）**：开始延迟任务的执行，这通常涉及到对浏览器的`setTimeout`或`setInterval`函数的封装。`start`方法会根据设定的延迟时间和任务回调来安排任务的执行。 3. **取消任务（cancel）**：如果...

    PyPI 官网下载 | dash_defer_js_import-0.0.2.tar.gz

    《PyPI官网下载：dash_defer_js_import-0.0.2.tar.gz——Python库的高效使用与理解》 PyPI（Python Package Index）是Python开发者的重要资源库，它为全球的Python用户提供了丰富的第三方库，便于代码复用和项目...

    导入、导出或修复leveldb_Go_下载.zip

    leveldb是一个由Google开发的高性能、键值对存储系统，它主要用于数据库和日志记录等场景。在Go语言中，leveldb被广泛应用于数据持久化存储，...通过理解这些基本概念，开发者可以构建高效、可靠的键值存储解决方案。

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

    因此，`defer`中对`res`的修改不会影响返回值，函数返回`0`。 ### 二、命名返回值 命名返回值允许我们在函数定义时为返回值赋予一个名称。这样，我们可以在函数体中直接引用这个名称，而不需要在`return`语句中...

    浅谈HTML5 defer和async的区别

    理解`defer`和`async`的区别很重要，因为它们影响到脚本的加载和执行策略。通常，将`defer`用于那些不依赖于文档解析顺序的脚本，`async`用于完全独立的脚本，而无`defer`或`async`的脚本则应尽可能优化以减少阻塞...

    swift中defer几个简单的使用场景详解

    以下是对`defer`的详细解释以及几个使用场景。 **defer 的作用** `defer`的作用在于，它将放在`defer`块内的代码延迟到当前作用域（通常是函数或闭包）结束时执行，无论函数是通过正常途径返回、抛出错误还是遇到`...

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