<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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
Convert Seconds To Hours
Jun 16 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
js 幻灯片的实现
Dec 06 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 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
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
ES6的新特性概览
2016/03/10 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
Vue中props的详解
2019/05/16 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
Python下载网络小说实例代码
2018/02/03 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python应用库大全总结
2018/05/30 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
Python 音频生成器的实现示例
2019/12/24 Python
python sorted函数原理解析及练习
2020/02/10 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
opencv实现图像平移效果
2021/03/24 Python
客房主管岗位职责
2013/12/09 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
党课培训主持词
2014/04/01 职场文书
法学专业求职信范文
2015/03/19 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
青涩记忆观后感
2015/06/18 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技