<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 相关文章推荐
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
javascript 写类方式之四
2009/07/05 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
Vue.js用法详解
2017/11/13 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python os模块学习笔记
2015/06/21 Python
Apache如何部署django项目
2017/05/21 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Python制作exe文件简单流程
2019/01/24 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
python numpy数组中的复制知识解析
2020/02/03 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
详解python datetime模块
2020/08/17 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
python opencv肤色检测的实现示例
2020/12/21 Python
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
2014年宣传部工作总结
2014/11/12 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android