深入理解javascript中defer的作用


Posted in Javascript onDecember 11, 2013

很多人都已经把 Javascript的用的炉火纯青了,但见到defer未必就知道他是做什么用的;很多人也都遇到过这样的问题,需要直接执行别且操作DOM对象的js 总是报找不到对象的错误,原因大家也都知道就是页面还有没有加载完毕,js的操作对象还在下载中。但很多人都不知道,添加defer标签就能轻而易举的解决这个问题。

<script src="../CGI-bin/delscript.js" defer></script>

中的defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题---有点问题

<button id="myButton" onclick="alert('ok')">test</button>
<script>
myButton.click();
</script>
<script>
myButton.click();
</script>
<button id="myButton" onclick="alert('ok')">test</button>
<script defer>
function document.body.onload() {
alert(document.body.offsetHeight);
}
</script>

加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活!

defer是脚本程序强大功能中的一个“无名英雄”。它告诉浏览器Script段包含了无需立即执行的代码,并且,与SRC属性联合使用,它还可以使这些脚本在后台被下载,前台的内容则正常显示给用户。

--但是 文档加载完毕了再执行脚本

请注意两点:

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

2、而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

一个常用的优化性能的方法是:当脚本不需要立即运行时,在<SCRIPT>标签中设置“defer”属性。 (立即脚本没有被包含在一个function块中,因此会在加载过程中执行。) 设置“defer”属性后,IE就不必等待该脚本装载和执行完毕。这样页面加载会更快。一般来说,这也表明立即脚本最好放在function块中,并在 document或者body对象的onload 句柄中处理该函数。在有一些脚本需要依赖用户操作而执行时----例如点击按钮,或者移动鼠标到某个区域----使用该属性非常有用。但当有一些脚本需要在页面加载过程中或加载完成后执行,使用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脚本块中的变量,否则的话会导致脚本错误的产生。

Javascript 相关文章推荐
用javascript操作xml
Nov 04 Javascript
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
actionscript与javascript的区别
May 25 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 #Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 #Javascript
jquery动态加载select下拉框示例代码
Dec 10 #Javascript
关于jquery中全局函数each使用介绍
Dec 10 #Javascript
jquery对ajax的支持介绍
Dec 10 #Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 #Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 #Javascript
You might like
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
yii用户注册表单验证实例
2015/12/26 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
python实现反转部分单向链表
2018/09/27 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
详解用python生成随机数的几种方法
2019/08/04 Python
python中return的返回和执行实例
2019/12/24 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
python中的yield from语法快速学习
2020/11/06 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
会展中心部门工作职责
2013/11/27 职场文书
房产销售经理职责
2013/12/20 职场文书
服装设计专业自荐书范文
2013/12/30 职场文书
入党思想汇报
2014/01/05 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
继承权公证书
2014/04/09 职场文书
法学求职信
2014/06/22 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技