<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 setTimeout 参数传递使用介绍
Aug 13 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
vuex存储token示例
Nov 11 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 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代码
2007/03/03 PHP
php创建多级目录代码
2008/06/05 PHP
phpize的深入理解
2013/06/03 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
php图片裁剪函数
2018/10/31 PHP
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
Python深入学习之内存管理
2014/08/31 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
python模块导入的细节详解
2018/12/10 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python线程join方法原理解析
2020/02/11 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
python 6种方法实现单例模式
2020/12/15 Python
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
体育课课后反思
2014/04/24 职场文书
大学生在校表现评语
2014/12/31 职场文书
安全教育第一课观后感
2015/06/17 职场文书
食堂管理制度范本
2015/08/04 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android