`

JavaScript中的defer 属性解释

 
阅读更多

<script language="JavaScript" defer>....</script>中defer起什么作用的?

我想知道还有别的参数没?

defer更多的与脚本的执行效率有关。
使用defer属性可以让脚本在整个页面装载完成之后再解析,而非边装载边解析。
这对于只包涵事件触发的js脚本而言,可以提高整个页面的加载速度。

在实际使用中意义不大

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 更灵活!

比较下面的3个例子:

<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>
| 引用(0)
引用功能被关闭了。

分享到:
评论

相关推荐

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

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

    js的[defer]和[async]属性

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

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

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

    javascript按顺序加载运行js方法

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

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

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

    JavaScript_DOM编程

    直接在JavaScript代码中设置元素对象的事件属性 &lt;script type="text/javascript"&gt; document.oncontextmenu = hideContextmenu; function hideContextmenu(){ return false; } 3.在标签对中用for属性...

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

    向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余...

    javascript学习笔记(一) 在html中使用javascript

    1.延时脚本运行的方法: 方法一:把全部javascript引用放在&lt;body&gt;元素中,页面内容后,如 代码如下: &lt;... &lt;head&gt;... 方法二:为[removed]元素定义defer属性defer=”defer”,如 代码如下: &lt;

    Defer-JS:将脚本的加载推迟到页面加载完成后

    延迟JS 将脚本的加载推迟到页面完成加载之后。 将脚本放在页面底部、使用 defer 属性... 只需将脚本从 defer.js 文件中复制出来,并将其放置在结束正文标记之前的脚本标记中(当然,将您的脚本添加到数组并删除注释)。

    js异步加载的三种解决方案

    (1) defer,只支持IE defer属性的定义和用法(我摘自w3school网站) defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。 有的 javascript 脚本 [removed] 方法来创建当前的文档内容,其他脚本就不一定是了...

    JavaScript高级程序设计(第三版)学习笔记1~5章

    [removed]标签有一个defer属性可以延迟脚本执行,但是并不保证会按脚本排列顺序执行 建议:将脚本引入放在&lt;body&gt;标签的所有内容之后,而不放在&lt;head&gt;标签中进行引入,加快页面响应 &lt;noscript&gt;&lt;/...

    defer.js::1st_place_medal:超小型,超高效的库,可帮助您延迟加载几乎所有内容,例如图像,视频,音频,iframe,样式表和JavaScript

    软件包@ shinsenter / defer.js :1st_place_medal: 一个超小型,超高效的库,可帮助您延迟加载几乎所有... 但是在各种情况下,使用async或defer属性不会提供比更快的页面速度。 此外, defer.js还为您提供了非常简单

    High Performance JavaScript(高性能JavaScript)读书笔记分析

    第一章:加载和执行 浏览器的JavaScript的引擎是编译器层的优化; 当浏览器执行JavaScript代码时,不能同时做其他任何事情(单一进程),意味... defer属性可延迟脚本(只有IE4 和FF3.5 支持) 第二章:数据访问 JavaSc

    Javascript无阻塞加载具体方式

    看了《高性能JavaScript》的读书笔记 几个原则: 1、将脚本放在底部 &lt;link&gt;还是在head中,用以保证在js加载前,能加载出正常显示的页面。 [removed]放在&lt;/body&gt;前。...由于每个[removed]标签...带defer属性

    p-defer:建立延期承诺

    安装$ npm install p-defer用法import pDefer from 'p-defer' ;function delay ( milliseconds ) {const deferred = pDefer ( ) ;setTimeout ( deferred . resolve , milliseconds , ':unicorn:' ) ;return deferred...

    JavaScript高级程序设计学习笔记(一)

    最近为了补js的基础,开坑javascript高程,这书基础部分写得很详细很好读...延迟脚本:定义defer属性,表明脚本在执行时不会影响页面的构造,也就是脚本会被延迟到整个页面都解析完毕再运行。 HTML5中规范以上两个脚

    浅谈HTML5 defer和async的区别

    在HTML页面中插入Javascript的主要方法,就是使用[removed]元素。这个元素由Netscape创造并在Netscape Navigator 2中首先实现。后来,这个元素就被加入到正式的HTML规范中。HTML4.01为[removed]定义了6个属性,包括...

    Devstratum-JMP-Minify-Source:用于最小化CMS JoomlaCSS和JavaScript源代码的插件-css source code

    JavaScript Defer属性 安装 在CMS Joomla中安装Standart-上传包文件-plg_dvstr_minifysource.zip 信息 版本:1.0 执照:麻省理工学院执照 作者:谢尔盖·奥西波夫(Sergey Osipov) 网址: : 电子邮件: ...

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

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

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

    除全局属性之外有如下属性 src 定义指向包含脚本的文件的 URL(这样您就可以引用某个包含脚本的文件,而不是直接把脚本插入您的 HTML 文档中) async 定义脚本是否异步执行。 defer 指示脚本不会生成任何文档内容。...

Global site tag (gtag.js) - Google Analytics