<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 建立对象的方法
Apr 21 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
vue v-on监听事件详解
May 17 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
详解Node.js异步处理的各种写法
Jun 09 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中adodbzip类实例
2014/12/08 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python中的日期时间处理详解
2016/11/17 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
对Python3 序列解包详解
2019/02/16 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
企划经理的岗位职责
2013/11/17 职场文书
数学检讨书1000字
2014/02/24 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书