<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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
vue组件vue-esign实现电子签名
Apr 21 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
php笔记之:php数组相关函数的使用
2013/04/26 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
js字符串转成JSON
2013/11/07 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
JavaScript DOM基础
2015/04/13 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
python读取并写入mat文件的方法
2019/07/12 Python
Python的形参和实参使用方式
2019/12/24 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
如何理解Python中包的引入
2020/05/29 Python
python中温度单位转换的实例方法
2020/12/27 Python
毕业设计计划书
2014/01/09 职场文书
中学教师教育感言
2014/02/21 职场文书
买房委托公证书
2014/04/08 职场文书
应届生求职信
2014/05/31 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
先进集体申报材料
2014/12/25 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
找规律教学反思
2016/02/23 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang