javascript延迟加载及异步(defer和async)
一直以来写代码的时候的常用习惯就是吧所有的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)的更多相关文章
- JavaScript标记上的defer与async的作用与区别
当浏览器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档.但是我们可以将脚本标记为 defer,这样就不会停止文档解析,等到文档解析完成才执行脚本,也可 ...
- JavaScript <script>标签的位置、延迟脚本(defer属性)与 异步脚本(async属性)
一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...
- javascript中的defer和async学习+javascript执行顺序
一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...
- javascript的defer和async(转载)
http://ued.ctrip.com/blog/?p=3121 我们常用的javascript标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自http ...
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
- 【javascript基础】 JavaScript defer和async区别
defer该属性用来通知浏览器,这段脚本代码将不会产生任何文档内容.例如 JavaScript代码中的document.write()方法将不会骑作用,浏览器遇到这样的代码将会忽略,并继续执行后面的代 ...
- JS文件延迟和异步加载:defer和async属性
-般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件.这意味着必须等到全部 JavaScript 代码都被加载.解析和执行完以 ...
- javascript的defer和async的区别。
我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...
- 异步加载script,提高前端性能(defer和async属性的区别)
一.异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的j ...
随机推荐
- with 与 debugger
with在严格模式下是禁止使用的,而debugger是在调试模式下才有效果的,目测作者自己在用的脚本压缩工具在有dubugger语句的情况下会影响压缩结果,导致失败. with(varible)实际上 ...
- Lightoj1009 Back to Underworld(带权并查集)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud Back to Underworld Time Limit:4000MS ...
- html label 标签的 for 属性
如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上. 有两种使用方法: 方法1 使用for属性 <label for ...
- phantomjs初入门
对DOM操作,而调试过程必不可少,对于那些微乎其微的方法,总显得余力不足.在这里PhantomJS就就行了很好的实现. PhantomJS是一个拥有JavaScript API的无界面WebKit 正 ...
- Ftp不能登陆的解决方法
ftp登陆不了是很经常碰到的事,很多人常常是不加分析就发贴询问.老实说,这样既浪费自己时间,又浪费别人精力,还常常不能得到满意的回答.因此每一位希望从ftp站点发现资源的朋友都有必要学会分析登陆失败的 ...
- mysql查询unicode字符串
mysql查询的时候会将\干掉,可以用mysql的like通配符来做like '%\u5f20\u4e09%'变成like '%_u5f20_u4e09%'
- 第一个程序 - Windows程序设计(SDK)001
愉快的开始 让编程改变世界 Change the world by program 编译器安装 我们经常说的 VS 指的就是 Microsoft Visual Studio 的简称,它是微软开发工具的 ...
- [linux] linux知识积累(不断更新中…)
一.vim知识 f(find)命令也可以用于移动,fx将找到光标后第一个为x的字符,3fd将找到第三个为d的字符. D 删除当前字符至行尾.D=d$ :split或new 打开一个新窗口,光标停在顶层 ...
- Bootstrap 模态对话框 remote指定内容加载
第一个页面: .....其他内容..... <div class="modal" id="ID_ReformDetail"> <div cla ...
- ng-repeat 与ng-switch的简单应用
效果如下图所示: 使用表格显示用户信息,当点击某条用户信息时,在其下方展开一行进行展示. index.html <!DOCTYPE html> <html ng-app=" ...