`
jsj_064
  • 浏览: 9290 次
  • 性别: Icon_minigender_1
  • 来自: 宣城
最近访客 更多访客>>
社区版块
存档分类
最新评论

Script标签里的defer属性,你知多少?

阅读更多
先看下面三段代码,写出你认为的输出结果?

<button id="myButton" onclick="alert('ok')">test</button><script>
$('myButton').click();
</script>



<script defer>
$('myButton').click();
</script>
<button id="myButton" onclick="alert('ok')">test</button>



<script>
$('myButton').click();
</script>
<button id="myButton" onclick="alert('ok')">test</button>

你一定对第二种很感兴趣,在第二段代码中,script标签的加载顺序跑在了它下面的button后面,这里要讲解script标签中的defer属性。

先摘录一段貌似官方的说法:

如果是编写脚本的时候加入defer属性,那么浏览器在下载脚本的时候就不必立即对其进行处理,而是继续对页面进行下载和解析,这样会提高浏览器下载的性能。

其实我们一般的写法中也有defer属性的,只不过它的默认值是false,比如

<script src="aaa.js"></script>

它等价于

<script src="aaa.js" defer=false></script>

我们可以显示的定义defer

<script src="aaa.js" defer></script>

或者是

<script src="aaa.js" defer=true></script>

当然了,好处就是那个官方的说法,浏览器不会立即对其进行处理,这样的好处是提高载入代码的性能,不过用defer有几点需要注意的

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

2、而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。
加上defer等于在页面完全在入后再执行,相当于 window.onload,但应用上比window.onload更灵活! 下面举个defer的实际应用,通常我们说eval是邪恶的,eval is evil,那么有了这个defer属性,我们就可以打造属于自己eval方法

var eval = function() {
	var h = document.getElementsByTagName('HEAD').item(0);
	var s = document.createElement( "script" );
	s.language = "javascript";
	s.type = "text/javascript";
	[color=red]s.defer = true;[/color]


	s.text = this;
	h.appendChild( s );
};


具体参见http://pldream.com/b/?post=63
分享到:
评论

相关推荐

    Script中defer的作用

    在JavaScript编程中,`&lt;script&gt;`标签是我们引入外部JavaScript文件的常用方式。然而,为了优化网页加载性能,JavaScript代码的执行时机对页面渲染有着显著的影响。`defer`属性是`&lt;script&gt;`标签的一个可选属性,它...

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

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

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

    在JavaScript的世界里,`&lt;script&gt;`标签是引入和执行脚本的关键。为了优化网页加载性能,HTML5引入了两个重要属性:`defer`和`async`。这些属性为开发者提供了更多的控制,使得JavaScript的加载和执行更加灵活,避免...

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

    下面将详细介绍`&lt;script&gt;`标签的各项属性及其使用方法。 #### `src`属性 - **定义**: 该属性用于定义一个URL,指向包含脚本的外部文件。通过这种方式,可以避免将脚本直接嵌入到HTML文档中,从而使得代码更加清晰、...

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

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

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

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

    js的[defer]和[async]属性

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

    script标签的 charset 属性使用说明

    `charset` 属性是 `&lt;script&gt;` 标签的一个关键特性,它用于指定外部 JavaScript 文件的字符编码,确保浏览器能正确解析和执行其中的文本内容。 在 Web 开发中,字符编码是一个重要的考虑因素,尤其是在涉及到多语言...

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

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

    javascript中的用法与意思

    ### JavaScript中的`&lt;script type="text/javascript"&gt;`标签详解 #### 标签含义与作用 在Web开发中,`&lt;script&gt;`标签是HTML文档中用于嵌入或引用JavaScript代码的关键元素之一。它允许开发者直接在HTML文档内部编写...

    全面了解js中的script标签

    3. script 标签的 language 属性用来声明脚本使用的是哪种脚本语言。在 HTML5 中,这一属性也被废弃,主要是因为 JavaScript 已经成为主流的脚本语言。不过,在早期 HTML 中,可以指定如 "javascript1.2"、...

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

    【第八章】JavaScript【Script标签与访问HTML页面(2)】这一主题主要涵盖了JavaScript在网页中的应用,特别是关于`&lt;script&gt;`标签的使用以及如何通过JavaScript来操作和访问HTML页面内容。JavaScript是一种广泛用于Web...

    06-defer和async.md

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

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

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

    Script标签与访问HTML页面详解

    Script标签是HTML中的一个重要元素,用于在网页中插入可执行的脚本,通常用来引入...正确地使用Script标签,结合DOM操作和事件处理,可以让网页具备丰富的用户交互功能,同时注意性能优化,以提供流畅的浏览体验。

Global site tag (gtag.js) - Google Analytics