`
hlbng
  • 浏览: 177953 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JavaScript中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 src="script2.js" defer&gt; ``` 在这个示例中,`script1.js`和`script2.js`将按照...

    深入理解javascript中defer的作用

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

    js的[defer]和[async]属性

    这意味着,如果文档中有多个使用defer属性的脚本,它们的执行顺序将与他们在文档中出现的顺序相同,但执行会在整个文档解析完毕后进行。 适用场景: - 当脚本的执行依赖于整个文档结构时,应当使用defer属性。 - ...

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

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

    javascript中的用法与意思

    ### JavaScript中的`&lt;script type="text/javascript"&gt;`标签...随着技术的发展,虽然`type="text/javascript"`这一属性已经不再是必须的,但在实际项目中仍然可以看到它的身影,特别是为了确保与老版本浏览器的兼容性。

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

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

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

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

    javascript延时加载之defer测试

    JavaScript中的`defer`属性是一种延迟加载机制,它允许开发者控制脚本执行的时机,以便优化网页性能。在HTML文档解析到`&lt;script&gt;`标签时,通常会暂停文档的解析,执行脚本,然后继续解析。这可能导致页面加载变慢,...

    JavaScript 教程.doc

    - `type`:默认值为 "text/javascript",但现代浏览器通常可以省略此属性,因为 "text/javascript" 是默认类型。 - `async`:如果设置为 "async",脚本将在可用时异步加载,不会阻塞页面渲染。 - `defer`:如果设置...

    JS脚本defer的作用示例介绍

    总结来说,defer属性是JavaScript脚本加载和执行中一个非常有用的特性,尤其在处理页面加载性能优化时。开发者应该根据实际需求合理使用defer属性,并注意避免在defer脚本中使用document.write和立即执行的全局变量...

    Javascript权威指南学习笔记二

    - 还可以在HTML元素的事件属性中直接编写JavaScript代码,如`onclick="someFunction()"`。 - 特殊情况下,还可以通过`javascript:`协议在URL中直接执行JavaScript代码。 2. **`&lt;script&gt;`标记详解**: - `...

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

    defer属性** `defer`属性的作用是声明脚本在不影响页面解析的情况下执行。当`defer`属性被设置在`&lt;script&gt;`标签上,浏览器会立即下载脚本文件,但会等到整个HTML文档解析完成(即DOM构建完毕)后,按照脚本在页面中...

    【第八章】JavaScript【Script标签与访问HTML页面(2)】

    - 延迟加载(defer):`defer`属性保证脚本按照在HTML中的顺序执行,但允许它们在文档解析完成后、DOMContentLoaded事件触发前加载。 2. 访问HTML页面: - DOM(Document Object Model):JavaScript通过DOM来...

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

    HTML中的`&lt;script&gt;`标签允许我们引入JavaScript代码到页面中,它提供了`defer`和`async`两个属性,来控制脚本的加载和执行方式,以优化页面的加载性能。 首先,我们来看一下`&lt;script&gt;`标签的基本用法。通常有两种...

    javascript按顺序加载运行js方法

    首先如果大家对JS动态加载有不理解的地方可以参阅: javascript动态加载实现方法 动态加载JS文件的三种方法 如何你的 script 上没有任何 异步,阻塞 等标注: ...但是defer属性在各个浏览器中支持程度有点不同,就是

    1.14 JavaScript基础.pdf

    对象属性 JavaScript 中的对象把属性名映射为任意的属性值。继承机制 JavaScript 中的面向对象继承机制是基于原型的。 JavaScript 核心 一个完整的 JavaScript 应该由下列三个不同的部分组成:1.核心(ECMAScript...

    javascript函数动态加载javascript文件

    在HTML中,我们可以创建一个`&lt;script&gt;`标签,并将其`src`属性设置为要加载的JavaScript文件的URL。通过添加`async`或`defer`属性,可以实现非阻塞加载。例如: ```html ...

Global site tag (gtag.js) - Google Analytics