深入理解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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
在vue组件中使用axios的方法
Mar 16 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
js 图片懒加载的实现
Oct 21 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
测试您的 PHP 水平的题目
2007/05/30 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
用python登录Dr.com思路以及代码分享
2014/06/25 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
写自荐信要注意什么
2013/12/26 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
门店业绩提升方案
2014/06/08 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL
JAVA springCloud项目搭建流程
2022/05/11 Java/Android
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server