<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 相关文章推荐
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
js实现目录定位正文示例
Nov 14 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 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常见的魔术方法详解
2014/12/25 PHP
php集成开发环境详解
2019/09/24 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
利用Python破解验证码实例详解
2016/12/08 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
python list转矩阵的实例讲解
2018/08/04 Python
python 格式化输出百分号的方法
2019/01/20 Python
Python shelve模块实现解析
2019/08/28 Python
python实现简单猜单词游戏
2020/12/24 Python
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
学年自我鉴定范文
2013/10/01 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
幼儿老师求职信
2014/06/30 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
ubuntu下常用apt命令介绍
2022/06/05 Servers