深入理解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 相关文章推荐
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
12条写出高质量JS代码的方法
Jan 07 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 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
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
php常用字符函数实例小结
2016/12/29 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
JavaScript的this关键字的理解
2016/06/18 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python中type的构造函数参数含义说明
2015/06/21 Python
python入门教程之识别验证码
2017/03/04 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
python实现飞机大战小游戏
2019/11/08 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
金属材料工程个人求职的自我评价
2013/12/04 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
javascript之Object.assign()的痛点分析
2022/03/03 Javascript