深入理解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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
jquery.post用法示例代码
Jan 03 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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简明安装教程
2008/08/01 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
javascript 动态添加表格行
2006/06/22 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python检测某个变量是否有定义的方法
2015/05/20 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
python学生信息管理系统
2018/03/13 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Python Selenium参数配置方法解析
2020/01/19 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
宝宝周岁宴答谢词
2014/01/26 职场文书
团拜会策划方案
2014/06/07 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书