<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 模拟气泡屏保效果代码
Jul 10 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
javascript表单验证大全
Aug 12 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
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
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
详解Angular 自定义结构指令
2017/06/21 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
vue生成随机验证码的示例代码
2017/09/29 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python数组定义方法
2016/04/13 Python
Django内容增加富文本功能的实例
2017/10/17 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
python help函数实例用法
2020/12/06 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
2014年道德讲堂实施方案
2014/03/05 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
博士给导师的自荐信
2015/03/06 职场文书
学校证明范文
2015/06/24 职场文书