- 浏览: 1645021 次
- 性别:
文章分类
- 全部博客 (2929)
- 非技术 (18)
- Eclipse (11)
- JAVA (31)
- 正则表达式 (0)
- J2EE (4)
- DOS命令 (2)
- WEB前端 (52)
- JavaScript (69)
- 数据库 (8)
- 设计模式 (0)
- JFreechart (1)
- 操作系统 (1)
- 互联网 (10)
- EasyMock (1)
- jQuery (5)
- Struts2 (12)
- Spring (24)
- 浏览器 (16)
- OGNL (1)
- WebService (12)
- OSGi (14)
- 软件 (10)
- Tomcat (2)
- Ext (3)
- SiteMesh (2)
- 开源软件 (2)
- Hibernate (2)
- Quartz (6)
- iBatis (2)
最新评论
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>
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>
myButton.click();
</script>
<script defer>
myButton.click();
</script>
<button id="myButton" onclick="alert('ok')">test</button>
myButton.click();
</script>
<button id="myButton" onclick="alert('ok')">test</button>
<script>
myButton.click();
</script>
<button id="myButton" onclick="alert('ok')">test</button>
myButton.click();
</script>
<button id="myButton" onclick="alert('ok')">test</button>
发表评论
-
Javascript评估用户输入密码的强度的方法 代码
2009-07-28 17:50 706用Javascript评估用户输入密码的强度密码已经是我们生活 ... -
图片和文字放一起,不能居中的解决方法
2009-07-29 14:47 950<td align="center" ... -
解开JavaScript生命的达芬奇密码
2009-08-05 17:56 741解开JavaScript生命的达芬奇密码 ——如何使用Jav ... -
掌控上传进度的AJAX Upload(转贴)
2009-08-05 17:59 713掌控上传进度的AJAX Uploa ... -
Javascript跨域访问解决方案
2009-08-11 20:11 632由于安全方面的考虑,Javascript被限制了跨域访问的能力 ... -
不唐突的JavaScript的七条准则(转载)
2009-08-12 13:18 633经过多年的开发、教学 ... -
浅谈Javascript中的事件流和事件绑定
2009-08-13 16:31 789事件流 浏览器中的事 ... -
JavaScript继承详解(二)
2009-08-17 17:04 623转自:http://www.cnblogs.com/sansh ... -
JavaScript继承详解(一)
2009-08-17 17:04 696转自:http://www.cnblogs.com/sansh ... -
javascript实用技巧--数组.
2009-08-17 17:08 660数组和字符串类型对象的方法我特容易搞混淆,所以把他列出来,免得 ... -
IE和Firefox之间的JavaScript差异
2009-08-17 17:18 584尽管 JavaScript 历史上使用冗长而令人生厌的代码块来 ... -
常见的JavaScript错误
2009-08-17 17:19 736作者: Richardy, 出处:IT ... -
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
2009-08-17 17:19 660网页可见区域宽:document.body.clientWid ... -
最佳的"addEvent"是怎样诞生的
2009-08-18 13:47 640IE的 JScript 存在内存泄露的bug 想必大家都清楚或 ... -
值得推荐的事件捕获函数AddEvent()
2009-08-18 13:56 7731, 下面是JQuery之父推荐的添加移除事件方法。 ... -
随滚动条移动的层
2009-08-20 15:55 728<!DOCTYPE html PUBLIC &qu ... -
javascript 获取滚动条高度
2009-08-20 16:02 782/******************** * 取窗口滚动 ... -
如何去掉ie里面的关闭按钮,和屏蔽ALT+F4 (转载)
2009-09-01 17:46 788去掉关闭按钮可以使用无边框窗口设计,不过IE6中已经不支持了。 ... -
(window.onunload)只有点击浏览器右上角关闭按钮才执行
2009-09-01 18:31 865<html> <head> &l ... -
带关闭按钮的页面漂浮的代码(IE/FF)
2009-09-01 18:34 657带关闭按钮的页面漂浮的代码,兼容火狐和IE,只需要把Javas ...
相关推荐
首先如果大家对JS动态加载有不理解的地方可以参阅: javascript动态加载实现方法 动态加载JS文件的三种方法 如何你的 script 上没有任何 异步,阻塞 等标注: ...但是defer属性在各个浏览器中支持程度有点不同,就是
<title>Defer属性演示 <h1>Defer属性演示 下面的段落将在脚本执行后动态插入。 <script src="script1.js" defer> <script src="script2.js" defer> ``` 在这个示例中,`script1.js`和`script2.js`将按照...
在网页开发中,`defer` 属性是一个与 `<script>` 标签紧密相关的特性,它主要用在外部JavaScript文件的加载上。`defer` 属性的目的是改变脚本的执行时机,以优化页面加载性能。当`defer`属性被设置在`<script>`标签...
这意味着,如果文档中有多个使用defer属性的脚本,它们的执行顺序将与他们在文档中出现的顺序相同,但执行会在整个文档解析完毕后进行。 适用场景: - 当脚本的执行依赖于整个文档结构时,应当使用defer属性。 - ...
defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性,从字面上来看,二者的功能很好理解,分别是”延迟脚本”和”异步脚本”的作用。然而,以defer为例,一些细节问题可能开发者却并不一定...
JavaScript中的`defer`属性是一个用于`<script>`标签的关键特性,尤其在优化页面加载性能和控制脚本执行顺序方面起到重要作用。它主要适用于外部脚本(即通过`src`属性引用的JavaScript文件),而非内联脚本。下面将...
总结来说,defer属性是JavaScript脚本加载和执行中一个非常有用的特性,尤其在处理页面加载性能优化时。开发者应该根据实际需求合理使用defer属性,并注意避免在defer脚本中使用document.write和立即执行的全局变量...
`type="text/javascript"`这一属性值用来表明该脚本是用JavaScript语言编写的。随着HTML5的发展,`type`属性默认值已经被设置为`application/javascript`,因此现代浏览器中不再需要显式地指定`type="text/...
- `type`:默认值为 "text/javascript",但现代浏览器通常可以省略此属性,因为 "text/javascript" 是默认类型。 - `async`:如果设置为 "async",脚本将在可用时异步加载,不会阻塞页面渲染。 - `defer`:如果设置...
JavaScript中的`defer`属性是一种延迟加载机制,它允许开发者控制脚本执行的时机,以便优化网页性能。在HTML文档解析到`<script>`标签时,通常会暂停文档的解析,执行脚本,然后继续解析。这可能导致页面加载变慢,...
JavaScript Defer属性 安装 在CMS Joomla中安装Standart-上传包文件-plg_dvstr_minifysource.zip 信息 版本:1.0 执照:麻省理工学院执照 作者:谢尔盖·奥西波夫(Sergey Osipov) 网址: : 电子邮件: ...
总之,虽然Vue不像Svelte那样直接提供defer transition功能,但我们可以通过巧妙地组合Vue的`transition-group`组件和JavaScript钩子,以及自定义CSS和JavaScript动画,来实现类似的效果。这个过程可能比Svelte的...
- 使用`defer`属性可以告诉浏览器在文档解析完毕后再执行脚本,提高页面加载速度。 3. **包括JavaScript文件**: - JavaScript文件通常使用`.js`作为扩展名,并且只包含JavaScript代码。 - 即便`<script>`标签中...
通过添加`async`或`defer`属性,可以实现非阻塞加载。例如: ```html <script async src="path/to/your/script.js"></script> ``` `async`属性使得脚本在可用时立即加载,但不保证执行顺序。`defer`属性则确保...
因此,在[removed]元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。在XHTML文档中,要把defer属性设置为defer=“defer 异步脚本 html5为[removed]定义了async属性。整个属性与defer属性类似,都用于...
**defer属性** 与`async`不同,`defer`属性保证了脚本会按照在HTML文档中的顺序执行,但脚本的执行会等到整个HTML文档解析完毕,DOM构建完成,即在`DOMContentLoaded`事件触发之前。这样既保持了执行顺序,又避免了...
- 延迟加载(defer):`defer`属性保证脚本按照在HTML中的顺序执行,但允许它们在文档解析完成后、DOMContentLoaded事件触发前加载。 2. 访问HTML页面: - DOM(Document Object Model):JavaScript通过DOM来...
总结来说,`async`和`defer`属性都允许JavaScript脚本的并行加载,从而不会阻塞页面的渲染,但两者在脚本执行时机上有所区别。`defer`属性保证了脚本按顺序执行,而`async`属性则不保证脚本的执行顺序,即哪个脚本先...