<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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
原生js+ajax分页组件
Jan 30 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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python itertools模块详解
2015/05/09 Python
python对url格式解析的方法
2015/05/13 Python
如何用Python合并lmdb文件
2018/07/02 Python
代码详解django中数据库设置
2019/01/28 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
会计电算化专业毕业生自荐信
2013/12/20 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
晚会邀请函范文
2014/01/24 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
部分武汉产收音机展览
2022/04/07 无线电