<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 相关文章推荐
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 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-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
php实现微信支付之现金红包
2018/05/30 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
python读取oracle函数返回值
2016/07/18 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
python文本数据处理学习笔记详解
2019/06/17 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
西部世纪面试题
2014/12/05 面试题
个人自荐书
2013/12/20 职场文书
给交警的表扬信
2014/01/12 职场文书
新学期班主任寄语
2014/01/18 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
服务口号大全
2014/06/11 职场文书
个人授权委托书格式
2014/08/30 职场文书
心理健康教育主题班会
2015/08/13 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
Elasticsearch 配置详解
2022/04/19 Java/Android