`
asgab
  • 浏览: 43687 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

script中defer属性

阅读更多
<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的作用

    &lt;title&gt;Defer属性演示 &lt;h1&gt;Defer属性演示 下面的段落将在脚本执行后动态插入。 &lt;script src="script1.js" defer&gt;&lt;/script&gt; &lt;script src="script2.js" defer&gt;&lt;/script&gt; ``` 在这个示例中,`script1.js`和`...

    关于Script的Defer属性 原创

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

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

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

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

    当`&lt;script&gt;`标签中不包含`defer`或`async`属性时,浏览器会立即加载并执行相应的脚本。在脚本加载和执行完成之前,浏览器会暂停解析后续的HTML文档,这就意味着,如果脚本位于文档中间,浏览器会等待该脚本加载完成...

    js的[defer]和[async]属性

    此外,如果在script标签中同时使用了async和defer属性,浏览器会忽略async属性,将脚本当作defer处理。如果脚本不需要异步加载或保证执行顺序,则不应该在脚本标签中使用这些属性。 总结: 理解并正确使用defer和...

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

    在网页开发中,`defer` 属性是一个与 `&lt;script&gt;` 标签紧密相关的特性,它主要用在外部JavaScript文件的加载上。`defer` 属性的目的是改变脚本的执行时机,以优化页面加载性能。当`defer`属性被设置在`&lt;script&gt;`标签...

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

    **defer属性** 与`async`不同,`defer`属性保证了脚本会按照在HTML文档中的顺序执行,但脚本的执行会等到整个HTML文档解析完毕,DOM构建完成,即在`DOMContentLoaded`事件触发之前。这样既保持了执行顺序,又避免了...

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

    在JavaScript的世界里,`async` 和 `defer` 是两个在`&lt;script&gt;`标签中用于控制脚本加载和执行方式的关键属性。它们主要用来解决脚本阻塞页面渲染的问题,确保网页的加载性能和用户体验。下面将详细讲解这两个属性的...

    深入理解javascript中defer的作用

    JavaScript中的`defer`属性是一个用于`&lt;script&gt;`标签的关键特性,尤其在优化页面加载性能和控制脚本执行顺序方面起到重要作用。它主要适用于外部脚本(即通过`src`属性引用的JavaScript文件),而非内联脚本。下面将...

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

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

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

    ### HTML5中的`&lt;script&gt;`...`&lt;script&gt;`标签是HTML5中非常重要的元素之一,它支持多种属性来控制脚本的行为。合理利用这些属性可以帮助开发者构建出更高效、响应更快的应用程序。了解这些细节对于优化Web性能至关重要。

    &amp;lt;script defer&amp;gt; defer 是什么意思

    当`defer`属性被添加到`&lt;script&gt;`标签中,浏览器会按照脚本在文档中的出现顺序依次下载这些脚本,但不会立即执行。只有在整个HTML文档解析完成(即DOM树构建完成)后,才会按照顺序执行这些带有`defer`属性的脚本。...

    javascript中的用法与意思

    在早期的HTML版本中,`&lt;script&gt;`标签通常会包含一个`type`属性来指定脚本的类型,如`type="text/javascript"`。 #### `type="text/javascript"`的含义 `type="text/javascript"`这一属性值用来表明该脚本是用...

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

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

    JS脚本defer的作用示例介绍

    首先,defer属性是当在&lt;script&gt;标签中使用时,它告诉浏览器延迟执行这个脚本,直到页面的HTML解析完成。这与另外一个属性async不同,async属性允许脚本异步执行,但并不保证脚本按顺序执行。而使用defer的脚本,会...

Global site tag (gtag.js) - Google Analytics