深入理解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 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
浅析JavaScript中的变量提升
Jun 01 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
用PHP实现维护文件代码
2007/06/14 PHP
php 什么是PEAR?(第二篇)
2009/03/19 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
js word表格动态添加代码
2010/06/07 Javascript
jquery easyui使用心得
2014/07/07 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
angularJS开发注意事项
2018/05/26 Javascript
Python中逗号的三种作用实例分析
2015/06/08 Python
Python序列操作之进阶篇
2016/12/08 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
python多线程并发及测试框架案例
2019/10/15 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
幼儿园小班植树节活动方案
2014/03/04 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
田径运动会通讯稿
2014/09/13 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
实习证明格式范文
2015/06/16 职场文书
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript