<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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
node.js使用express框架进行文件上传详解
Mar 03 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
Function eregi is deprecated (解决方法)
2013/06/21 PHP
php中socket通信机制实例详解
2015/01/03 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
javascript常用方法汇总
2014/12/02 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
JavaScript类的写法
2016/09/17 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
pytorch 数据集图片显示方法
2018/07/26 Python
python实现抖音点赞功能
2019/04/07 Python
NumPy统计函数的实现方法
2020/01/21 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
毕业自荐信
2013/12/16 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
开学典礼决心书
2014/03/11 职场文书
小学生新年寄语
2014/04/03 职场文书
小学评语大全
2014/04/22 职场文书
异地年检委托书范本
2014/09/24 职场文书
婚育证明格式
2015/06/17 职场文书