<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中json使用自己总结
Aug 13 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
微信小程序图片自适应实现解析
Jan 21 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
JS数组的常用方法整理
Mar 31 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学习 计数器实例代码
2008/06/15 PHP
php实现网站插件机制的方法
2009/11/10 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
php实现搜索类封装示例
2016/03/31 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
cakephp常见知识点汇总
2017/02/24 PHP
javascript深入理解js闭包
2010/07/03 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
freemarker判断对象是否为空的方法
2015/08/13 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
工作表现自我评价
2014/02/08 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
体育教师求职信
2014/05/24 职场文书
写得不错的求职信范文
2014/07/11 职场文书
毕业生党员个人总结
2015/02/14 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
售房协议书范本
2015/08/11 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js