深入理解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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
python 判断自定义对象类型
2009/03/21 Python
python字符串对其居中显示的方法
2015/07/11 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
Python实现图像的垂直投影示例
2020/01/17 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
婚前协议书标准版
2014/10/19 职场文书
质量保证书格式模板
2015/02/27 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers