JS脚本defer的作用示例介绍


Posted in Javascript onJanuary 02, 2014
<script src="../cgi-bin/delscript.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属性得到的好处就不太大。

都是defer惹的祸,这两天网站查看全文出错的原因

<p style='line-height: 150%;text-indent: 15pt;'>上周末,本站投放了Google广告,当时为了防止广告的投入延长页面导入的时间,修改了下Google Ad代码,<script>使用了defer延迟导入广告,我一直使用的是FireFox浏览器,一直没发现有问题,今天,有朋友上本站查资料,她用的是Maxthon,告诉我一查看文章,页面就一闪就过去了,这才知道有问题,我说这两天这么网站的访问一直在掉呢,一查原因,才发现是defer的原因,因为在Firfox中defer好象是失效的,页面实际还是原始内容一起载入了,而在IE中,由于延后载入脚本,对于Google Ad脚本来说,其使用的是Document.write的写入方法,并且因为defer的原因,Google AD的脚本检测为iframe了,所以当获取到Google 广告的实际内容的时候就把整个页面给覆盖了,也就造成了查看全文一闪而过的现象。</p>

<p style='line-height: 150%;text-indent: 15pt;'>这都怪我修改了代码没这么测试,以后不管改什么都需要在IE和FireFox中都测试通过才可以,对于这两天造成大家的访问困难致以最最真挚的道歉!</p>
<p style='line-height: 150%;text-indent: 15pt;'>另:推荐大家使用FireFox访问本站,访问和解析速度以及页面布局的一致性都更好!</p>

Javascript 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 #Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 #Javascript
ParseInt函数参数设置介绍
Jan 02 #Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 #Javascript
JavaScript中Math对象方法使用概述
Jan 02 #Javascript
javascript数组快速打乱重排的方法
Jan 02 #Javascript
利用进制转换压缩数字函数分享
Jan 02 #Javascript
You might like
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
js的with语句使用方法
2007/09/21 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
python利用datetime模块计算时间差
2015/08/04 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
Python IDLE入门简介
2017/12/08 Python
python3.4爬虫demo
2019/01/22 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python 实现简单的FTP程序
2019/12/27 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
python一些性能分析的技巧
2020/08/30 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
办理生育手续介绍信
2014/01/14 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
医药销售自我评价200字
2014/09/11 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL