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作用域与变量提升
Dec 09 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
angularjs 页面自适应高度的方法
Jan 17 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 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
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
jQuery select的操作实现代码
2009/05/06 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
Python中apply函数的用法实例教程
2014/07/31 Python
Python编程入门的一些基本知识
2015/05/13 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
使用python去除图片白色像素的实例
2019/12/12 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
纪检监察建议书
2014/05/19 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
2015年工商所工作总结
2015/05/21 职场文书
承兑汇票延期证明
2015/06/23 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python