`

script中defer属性[转]

    博客分类:
  • html
阅读更多

转自:http://blog.csdn.net/jianan19860/archive/2009/10/20/4705566.aspx

 

Js代码 
<button id= "myButton1" onclick= "alert('ok1')" >test1</button>   
<script>   
myButton1.click();   
</script>   
  
  
<script defer>   
myButton2.click();   
</script>   
<button id= "myButton2" onclick= "alert('ok2')" >test2</button>   
  
  
<script>   
myButton3.click();   
</script>   
<button id= "myButton3" onclick= "alert('ok3')" >test3</button>  
<button id="myButton1" onclick="alert('ok1')">test1</button>
<script>
myButton1.click();
</script>

<script defer>
myButton2.click();
</script>
<button id="myButton2" onclick="alert('ok2')">test2</button>

<script>
myButton3.click();
</script>
<button id="myButton3" onclick="alert('ok3')">test3</button>Script中的Defer属性
如果你是一个对系统性能比较关心和在意的人,我想你应该会对Script脚本中的defer属性感兴趣的。
script中的defer属性默认情况下是false的。按照DHTML编程宝典中的描述,对于Defer属性是这样写的:
Using the attribute at design time can improve the download performance of a page because the browser does not need to parse and execute the script and can continue downloading and parsing the page instead.
也就是说:如果是编写脚本的时候加入defer属性,那么浏览器在下载脚本的时候就不必立即对其进行处理,而是继续对页面进行下载和解析,这样会提高下载的性能。
这样的情况有很多种。比如你定义了很多javascript变量,或者在引用文件(.inc)中写了很多的脚本需要处理,那不妨在这些脚本中加入defer属性,对性能的提高肯定有所帮助。
举例如下:

<script language="javascript" defer>
var object = new Object();
....
</script>

因为defer属性默认是为false的,那么在这里

<script language="javascript" defer>
显式声明defer属性后等同于

<script language="javascript" defer=true>

声明了defer属性之后,需要判断是否有别的变量引用了defer脚本块中的变量,否则的话会导致脚本错误的产生。

引用

DEFER是脚本程序强大功能中的一个“无名英雄”。你可能从没有使用过它,但是看完这里的介绍后,相信你就离不开它。它告诉浏览器Script段包含了无需立即执行的代码,并且,与SRC属性联合使用,它还可以使这些脚本在后台被下载,前台的内容则正常显示给用户。

最后请注意两点:

1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。

2、而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活!

分享到:
评论

相关推荐

    浅析script标签中的defer与async属性

    竟然同时有async和defer属性,心想着肯定是前辈老司机的什么黑科技,两个一块儿肯定会发生什么神奇化学反应,于是赶紧怀着一颗崇敬的心去翻书翻文档,先复习一下各自的定义。 二、调查一番 先看看async和defer各自...

    关于Script的Defer属性 原创

    1、没有defer属性的运行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]2、 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]PS:运行后再查看一下源文件,你会发现里面的代码都已经执行过了。

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签。... script标签存在两个属性,defer和async,因此script标签的使用分为三种情况:  1.[removed][removed]  没有defer或async属性,

    js的[defer]和[async]属性

    可以在[removed]中加入defer属性,告诉浏览器这段script不必立即执行,那么浏览器就会在完全载入文档之后再执行这个script,相当于[removed],但它比[removed]更灵活。 代码如下:  [removed][removed] [async] ...

    script的async属性以非阻塞的模式加载脚本

    1.HTML5实现了script的async属性,这个新的属性可以让js在浏览器中以非阻塞的模式加载,另外script还有一个defer属性,这个属性目前所有浏览器都已实现(除了firefox和chrome的早期版本),IE这方面做得好,从一开始...

    JS script脚本中async和defer区别详解

    可以看到在script标签中,存在async与defer两个属性,首先这两个属性并共存,说直白点,你一个都不加,或者加两个属性其一,脚本加载规则都会不同,这点我在之前确实没仔细了解过,导致我在实际开发中遇到了这样一个...

    浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    本文结合已有的一些文章以及MDN文档中对两个特性的阐述,对defer和async进行更全面的研究和总结,希望能够帮助开发者更好地掌握这两个特性。 1 引言 在《浏览器环境下JavaScript脚本加载与执行探

    HTML5 script元素async、defer异步加载使用介绍

    异步加载,可以理解为无阻塞并发处理,过去我们使用各种JavaScript技巧来做这种事情,现在WebKit为HTML5实现了SCRIPT标签的async异步属性,感兴趣的朋友可以了解下

    HTML5 对各个标签的定义与规定:script

    script 标签用于定义客户端脚本,比如 JavaScript。 除全局属性之外有如下属性 src 定义指向包含脚本的文件的 URL(这样您就可以引用某个包含脚本的文件,而不是直接把脚本插入您的 HTML 文档中) async 定义脚本...

    defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法

    在一个aspx页面中使用了JQuery,但当IE6浏览器打开这个页面的时候会报“Internet Explorer cannot open the Internet site ...script src=”Jquery/DatePicker/WdatePicker.js” type=”te

    让插入到 innerHTML 中的 script 跑起来的实现代码

    如果你读过 MSDN,你会发现并非所有插入到 innerHTML 中的脚本都不能执行,如果这段脚本的 script 标签中包含了 defer 属性,IE 会正确的执行这些脚本程序。但不幸的是,Moziila/Firefox 和 Opera 可不吃这一套,...

    javascript按顺序加载运行js方法

    首先如果大家对JS动态加载有不理解的地方可以参阅: javascript动态加载实现方法 ...也就是说defer属性的 script 就类似于将 script 放在body中的加载 效果一致. 但是defer属性在各个浏览器中支持程度有点不同,就是

    javascript学习笔记(一)基础知识

    因此,在[removed]元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。在XHTML文档中,要把defer属性设置为defer=“defer 异步脚本 html5为[removed]定义了async属性。整个属性与defer属性类似,都用于...

    浅谈HTML5 defer和async的区别

    HTML4.01为[removed]定义了6个属性,包括defer和async。defer和async都是可选的,且只对外部脚本文件有效。 一、当浏览器解析到script脚本,没有defer或async时: [removed][removed] 浏览器会立即加载并执行指定...

    JavaScript_DOM编程

    ·defer 属性:该属性无值,设置该属性使得本标签在装置完后再执行,否则会在浏览器装载时局执行。 aaa &lt;script language="javascript" defer&gt; document.write("bbb"); &lt;/script&gt; ccc 其结果为bbb,因为在...

    js实现延迟加载的几种方法详解

    这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助于提高页面的加载速度) 主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一...defer属性在IE

    github-corners:为Github Corners嵌入脚本

    github-corners 为的嵌入脚本。例子用法在网页上添加: &lt;!-- insert before `&lt;/body&gt;... 使用async或defer属性改善页面加载: &lt; script async defer src =" https://unpkg.com/github-c

    JavaScript中的noscript元素属性位置及作用介绍

    一、[removed]元素属性 向XHTML页面中插入JavaScript的主要方法,就是使用[removed]元素,该元素有5个属性分别为charset、defer、language、src、type,经常使用的是type、src、defer这三个。 1、type属性的值一般都...

Global site tag (gtag.js) - Google Analytics