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 相关文章推荐
JavaScript修改css样式style
Apr 15 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
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 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
自我检讨书怎么写
2015/05/07 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python