很多人都已经把 Javascript的用的炉火纯青了,但见到defer未必就知道他是做什么用的;很多人也都遇到过这样的问题,需要直接执行别且操作DOM对象的js 总是报找不到对象的错误,原因大家也都知道就是页面还有没有加载完毕,js的操作对象还在下载中。但很多人都不知道,添加defer标签就能轻而易举的解决这个问题。

<script src="../CGI-bin/delscript.js" defer></script>
中的defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题---有点问题

<button id="myButton" οnclick="alert('ok')">test</button>
<script>
myButton.click();
</script>

<script>
myButton.click();
</script>
<button id="myButton" οnclick="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属性得到的好处就不太大。

script中的defer属性默认情况下是false的。按照DHTML编程宝典中的描述,对于Defer属性是这样写的:
Using the attribute at design time can improve the download performance of a page because the browser does not need to parse and execute the script and can continue downloading and parsing the page instead.
也就是说:如果是编写脚本的时候加入defer属性,那么浏览器在下载脚本的时候就不必立即对其进行处理,而是继续对页面进行下载和解析,这样会提高下载的性能。
这样的情况有很多种。比如你定义了很多javascript变量,或者在引用文件(.inc)中写了很多的脚本需要处理,那不妨在这些脚本中加入defer属性,对性能的提高肯定有所帮助。
举例如下:

<script language="javascript" defer>
var object = new Object();
....
</script>

因为defer属性默认是为false的,那么在这里

<script language="javascript" defer>

显式声明defer属性后等同于

<script language="javascript" defer=true>

声明了defer属性之后,需要判断是否有别的变量引用了defer脚本块中的变量,否则的话会导致脚本错误的产生。

转载于:https://www.cnblogs.com/puzi0315/archive/2012/08/27/2658170.html

script language=JavaScript defer相关推荐

  1. [JavaScript] script type=text/javascript /script 和script language=javascript /script区别

    language="javascript" 和type="text/javascript"的区别 (1)<script language="ja ...

  2. script标签的defer属性

    defer 属性规定是否对脚本执行进行延迟,直到页面加载为止. 有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了. 如果您的脚本不会改变文 ...

  3. HTML5 script元素async,defer异步加载

    原文地址:HTML5′s async Script Attribute (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再注: 建议使用 defer,但是经测试发现 defer 属性对页面内 ...

  4. Firebug Tutorial (Section 3): Script Tab :Javascript Debugging

    2019独角兽企业重金招聘Python工程师标准>>> Firebug Tutorial – Script Tab : Javascript Debugging September ...

  5. 感染 <SCRIPT Language=VBScript> DropFileName = “svchost.exe” Ramnit 蠕虫病毒 HTML清除工具

    最近开发一个web项目,html文件在尾部老是自动生成一串乱码,如下图 网上搜了下是电脑已经感染了Ramnit 蠕虫病毒,搜了一遍专杀工具各种收费,基本放弃.无奈电脑有太多东西,重装又浪费时间,时间成 ...

  6. script async和defer

    1.没有async和defer,html解析时遇到script标签,会先去下载js文件,文件加载完成立即执行,执行完了再开始解析后面的html,是一个顺序流的过程 2.async,加载和渲染后续文档元 ...

  7. script标签中defer和async的区别

    defer 和 async属性都是去异步加载外部的JS脚本文件,它们都不会阻塞页面的解析,其区别如下: defer为true:延迟加载脚本,在文档完成解析完成开始执行,并且在DOMContentLoa ...

  8. php怎么加一个透明的菜单栏,window_PHP制作下拉透明菜单,下拉透明菜单 script language= - phpStudy...

    PHP制作下拉透明菜单 下拉透明菜单 var mmenus    = new Array(); var misShow   = new Boolean(); misShow=false; var mi ...

  9. 转换php script类型,javascript如何实现值的类型转换

    本篇文章给大家介绍使用javascript进行值的类型转换的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. JavaScript是松散类型的语言,大多数情况下,运算符和函数会自 ...

最新文章

  1. linux系统 大分区,linux大硬盘怎么分区
  2. 将Numpy加速700倍——CuPy
  3. DNS 隐蔽通道工具资料汇总
  4. linux 内存管理 page fault带来的性能问题
  5. rabbitmq 消息队列 多重绑定
  6. vscode中调试react
  7. EF中的Code First
  8. OpenCV中像素逻辑运算:逻辑或运算
  9. [导入]用Javascript实现interface的类似功能
  10. hexo的yelee主题更换类别以及tags的字体颜色
  11. 在MyEclipse中更换或修改svn的用户名和密码
  12. windows10中屏幕键盘 vs 触摸键盘
  13. 吴恩达深度学习2.1练习_Improving Deep Neural Networks_Regularization
  14. ubuntu lamp环境(阿里云搭建lamp)
  15. 【图像去噪】基于matlab GUI多种滤波器图像去噪【含Matlab源码 1778期】
  16. linux版的微博客户端,推荐Ubuntu Linux下的新浪微博客户端
  17. 数据库缓存一致性解决方案
  18. 大白菜pe 通用pe 安装心得
  19. 第六章金融衍生工具市场
  20. acm-基础数论学习笔记(下)

热门文章

  1. php+psr4和自动加载,php自动加载规范 PSR4 (Thinkphp)
  2. Python面试基础
  3. 不只是新车,2019上海车展还有这些彩蛋 | 一级供应商、科技公司篇
  4. mac环境下安装mysql
  5. SQL*Plus环境下创建PLUSTRACE角色
  6. android 模仿 弹性菜单
  7. github速成手册
  8. ASP.NET基础教程-Server对象
  9. 系统设计和机器学习算法
  10. CNCF Weekly:OCM 成为 CNCF 沙箱项目