`

Javascript的Defer属性

 
阅读更多
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>
分享到:
评论

相关推荐

    javascript按顺序加载运行js方法

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

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

    defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性,从字面上来看,二者的功能很好理解,分别是”延迟脚本”和”异步脚本”的作用。然而,以defer为例,一些细节问题可能开发者却并不一定...

    js的[defer]和[async]属性

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

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

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

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

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

    JavaScript_DOM编程

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

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

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

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

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

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

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

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

    将脚本放在页面底部、使用 defer 属性或使用 async 都无法实现这一点。 该脚本实际上确保脚本在页面加载完成后才加载。 只需将脚本从 defer.js 文件中复制出来,并将其放置在结束正文标记之前的脚本标记中(当然,...

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

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

    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属性

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

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

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

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

    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中规范以上两个脚

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

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

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

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

    浅谈HTML5 defer和async的区别

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

Global site tag (gtag.js) - Google Analytics