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 相关文章推荐
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
Node 自动化部署的方法
Oct 17 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
JS如何把字符串转换成json
Feb 21 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实现的获取URL信息的类
2007/01/02 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
用js实现in_array的方法
2013/11/05 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
详解Python中的四种队列
2018/05/21 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
小学教师岗位职责
2013/11/25 职场文书
写给女朋友的道歉信
2014/01/08 职场文书
管理人员岗位职责
2015/02/14 职场文书
教师师德工作总结2015
2015/07/22 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python