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 操作Word和Excel的实现代码
Oct 26 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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 中的批处理的实现
2007/06/14 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
微信支付开发维权通知实例
2016/07/12 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
python进程类subprocess的一些操作方法例子
2014/11/22 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
利用Python实现图书超期提醒
2016/08/02 Python
实用自动化运维Python脚本分享
2018/06/04 Python
用Python解决x的n次方问题
2019/02/08 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
毕业生动漫设计求职信
2013/10/11 职场文书
工商管理专业应届生求职信
2013/11/04 职场文书
电气自动化求职信
2014/06/24 职场文书
个人授权委托书模板
2014/09/14 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
先进个人总结范文
2015/02/15 职场文书
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL