<script defer> defer 是什么意思


Posted in Javascript onMay 10, 2009

程序下载完后再进行解析和执行。
文档上说defer中的代码不立即执行,页面会继续载入,那defer中的代码具体在什么时候执行呢?在全部javascript代码载入之后?页面载入之后?onload之前还是之后?

答案是:

并不是说在网页载入时不执行,可以在网页写一个SCRIPT.然后定义它,但是在载入时它还是执行了,
后来在找其它的东东时发现,因为它不有个子, 不知它是如何用,
原来它是在你的网页已截入完成后,你想动态添加一个新的<script>时用的,如果你只是object.innerHTML = "<script" + ">"..."</script" + ">";
那么当你调用你这个新定义的东东就会出错,说还未定义,当你在上面的代码加入defer时那么你就能成功调用它,
在下面的代码中你可以试下把它去掉, defer>";,那么你就会发现问题!
<HTML>
<SCRIPT>
function insertScript(){
var sHTML="<input type=button onclick=" + "go2()" + " value='Click Me'><BR>";
var sScript="<SCRIPT defer>";
sScript = sScript + "function go2(){ alert('Hello from inserted script.') }";
sScript = sScript + "</SCRIPT" + ">";
ScriptDiv.innerHTML = sHTML + sScript;
}
</SCRIPT>
<BODY onload="insertScript();">
<DIV ID="ScriptDiv"></DIV>
</BODY>
</HTML>

//defer属性指示该段脚本不会改变文档的内容。在文档完全显示之前,js解释器不执行这段代码。
具体到这个例子,因为js不允许动态生成js代码,所以去掉defer后产生的代码会被认为是非法的。加上defer后的代码,会被解释器认为是载入页面的时候跳过去的,可以执行。

<script src="../js/script.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属性得到的好处就不太大。

Javascript 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
详解如何较好的使用js
Dec 16 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
extjs fckeditor集成代码
May 10 #Javascript
一组JS创建和操作表格的函数集合
May 07 #Javascript
给Function做的OOP扩展
May 07 #Javascript
js arguments.callee的应用代码
May 07 #Javascript
javascript 有用的脚本函数
May 07 #Javascript
JavaScript的parseInt 进制问题
May 07 #Javascript
日期 时间js控件
May 07 #Javascript
You might like
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
PHP 事务处理数据实现代码
2010/05/13 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
PHP中的事务使用实例
2015/05/26 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python刷投票的脚本实现代码
2014/11/08 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
python list的index()和find()的实现
2020/11/16 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
产品质量保证书
2014/04/29 职场文书
辅导员评语
2014/05/04 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
房贷工资证明范本
2015/06/12 职场文书