一直以来写代码的时候的常用习惯就是吧所有的js文件直接加载在文档的head标签里面,在写js文件的时候有时候获取一些文件对象的时候为空对象,这是由于文档结构还没有加载完,但是js文件已经加载完。也就是说虽然写了js语句来获取对象,但是由于dom结构还没有加载完成,因此获取到的是空对象,进一步测试发现在firebug的控制台下把赋值语句执行之后可以获得对象,同理是因为在文档已经得到显示之后文档结构已经处于加载完成的状态,所以可以直接获取到对应的文档对象。

解决方法用两种:defer和async。

  • defer="defer":该属性用来通知浏览器,这段脚本代码将不会产生任何文档内容。例如 JavaScript代码中的document.write()方法将不会骑作用,浏览器遇到这样的代码将会忽略,并继续执行后面的代码。属性只能是 defer,与属性名相同。在HTML语法格式下,也允许不定义属性值,仅仅使用属性名。
  • async="true/false":该属性为html5中新增的属性,它的作用是能够异步地下载和执行脚本,不因为加载脚本而阻塞页面的加载。一旦下载完毕就会立刻执行。

script中的defer属性默认情况下是false的,因此在使用时需要显式调用这一属性。
defer既可用于载入js文件,也可用于行内脚本。
加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活!实际上 defer 更接近于 DomContentLoad。
事实上脚本执行于onload事件之前,即文档载入后即执行,不用等于包括图片在内的资源下载完毕。

async和defer一样,都不会阻塞其他资源下载,所以不会影响页面的加载,但在async的情况下,js文档一旦下载完毕就会立刻执行,所以很有可能不是按照原本的顺序来执行,如果js有依赖性,就要注意了。

defer和async的比较

相同点:

  • 加载文件时不阻塞页面渲染;
  • 对于inline的script无效;
  • 使用这两个属性的脚本中不能调用document.write方法;
  • 有脚本的onload的事件回调;
  • 允许不定义属性值,仅仅使用属性名;

不同点:

  • html的版本html4.0中定义了defer;html5.0中定义了async;这将造成由于浏览器版本的不同而对其支持的程度不同;
  • 执行时刻:每一个async属性的脚本都在它下载结束之后立刻执行,同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱 的情况;每一个defer属性的脚本都是在页面解析完毕之后,按照原本的顺序执行,同时会在document的DOMContentLoaded之前执 行。

这两个属性会有三种可能的组合:

  • 如果async为true,那么脚本在下载完成后异步执行。
  • 如果async为false,defer为true,那么脚本会在页面解析完毕之后执行。
  • 如果async和defer都为false,那么脚本会在页面解析中,停止页面解析,立刻下载并且执行。

例子:

<script type="text/javascript" src="js/index.js" defer></script>直接放在head标签中

html的body中代码:
<div id="first_menu">
<ul>
<li class="individual_info">
<div class="menu_content">
<i class="fa fa-user"></i>
<p>个人信息</p>
</div>
</li>
<li class="prizes_amount">
<div class="menu_content">
<i class="fa fa-pencil-square-o"></i>
<p>获奖统计</p>
</div>
</li>
<li class="attendence_management">
<div class="menu_content">
<i class="fa fa-calendar"></i>
<p>考勤管理</p>
</div>
</li>
<li class="expand_tables">
<div class="menu_content">
<i class="fa fa-file-excel-o"></i>
<p>拓展表项</p>
</div>
</li>
</ul>
</div>
js代码:var li_list=$("#first_menu ul li"); 没有添加defer之前获取的li_list为空对象,添加defer属性之后可以正常获取对象
将async属性设置为true之后同样也可以获取到对象 参考资料:http://www.oseye.net/user/kevin/blog/53

javascript延迟加载及异步(defer和async)的更多相关文章

  1. JavaScript标记上的defer与async的作用与区别

    当浏览器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档.但是我们可以将脚本标记为 defer,这样就不会停止文档解析,等到文档解析完成才执行脚本,也可 ...

  2. JavaScript <script>标签的位置、延迟脚本(defer属性)与 异步脚本(async属性)

    一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...

  3. javascript中的defer和async学习+javascript执行顺序

    一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...

  4. javascript的defer和async(转载)

    http://ued.ctrip.com/blog/?p=3121 我们常用的javascript标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自http ...

  5. 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...

  6. 【javascript基础】 JavaScript defer和async区别

    defer该属性用来通知浏览器,这段脚本代码将不会产生任何文档内容.例如 JavaScript代码中的document.write()方法将不会骑作用,浏览器遇到这样的代码将会忽略,并继续执行后面的代 ...

  7. JS文件延迟和异步加载:defer和async属性

    -般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件.这意味着必须等到全部 JavaScript 代码都被加载.解析和执行完以 ...

  8. javascript的defer和async的区别。

    我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...

  9. 异步加载script,提高前端性能(defer和async属性的区别)

    一.异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的j ...

随机推荐

  1. OpenGL ES 2.0 绘制方式

    OpenGL ES 中支持的绘制方式大致分3类,包括点.线段.三角形,每类中包括一种或多种具体的绘制方式. GL_POINTS 传入渲染管线的一系列顶点单独进行绘制. GL_LINES   传入渲染管 ...

  2. ubuntu 下使用mysql

    第一步:安装mysql apt-get install mysql-server 第二步:设置允许远程登录 修改/etc/mysql/my.cnf(此文件为mysql的配置文件).将文件中的bindi ...

  3. 浅析Javascript原型继承(转)

    引自: http://blog.csdn.net/kittyjie/article/details/4380918 原作者解释的浅显易懂,非常不错的JavaScript prototype总结 JS没 ...

  4. keepalived+httpd 做web服务的高可用

    场景: 环境中有两台httpd服务器,一台做主,一台做备用:平时只用主向外提供http服务:当主宕机后,keepalived把vip绑定到备机上去,这样就由备机提供http服务了. **keepalv ...

  5. Linux远程拷贝scp命令

    今天要从admin服务器将测试上修正content和image_count后的数据库更新到dz服务器. 首先需要备份数据库,使用mysqldump命令 整表全部备份:    mysqldump -u ...

  6. css 完美替换图片

    1.css替换简单图标的展示方法 ;display:inline-block;position:absolute;left:11px;top:10px;border-right:6px solid t ...

  7. VS2012 快捷键 VS Resharper 设置

    原文 http://www.cnblogs.com/skyangell/archive/2013/03/24/2979835.html 一直用Resharper插件,最近发现Ctrl+E,C快捷见被R ...

  8. Java面试题之十

    五十六.java中有几种类型的流?JDK 为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类? 主要有字节流,字符流.字节流继承于InputStream .OutputStream,字符流 ...

  9. logstash date插件介绍

    时间处理(Date) 之前章节已经提过, filters/date 插件可以用来转换你的日志记录中的时间字符串,变成 LogStash::Timestamp 对象,然后转存到 @timestamp 字 ...

  10. UML建模工具-火龙果软件

     官网地址:http://code.uml.com.cn/index.asp     Bridge桥梁模式    (待逆向) 桥梁模式,通过增加一个类,将抽象部分与它的实现部分分离,使它们都可以独立 ...