defer

  • HTML4.01定义的
  • 只适用于外部脚本（IE4~7会支持内嵌脚本的defer属性）
  • 告诉浏览器立即下载，延迟执行，脚本会延迟到整个页面全部解析完毕之后才运行
  • HTML5规范要求脚本按照他们出现的先后顺序执行，第一个延迟脚本先于第二个延迟脚本执行，这两个脚本会先于DOMContentLoaded事件执行，而在现实浏览器中，延迟脚本不一定会按照顺序执行，也不一定在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。

async

  • HTML5定义的
  • 只适用于外部脚本
  • 与defer不同的是，标记为async的脚本不保证按照指定他们的先手顺序执行，因此确保多个脚本之间互不依赖非常重要，指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议脚本不要在加载期间修改DOM。
  • 指定了async属性的脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行

defer 与 async的更多相关文章

  1. javascript的defer和async的区别。

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

  2. script标签中defer和async属性的区别

    这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...

  3. defer 和 async 本地对象和宿主对象

    <script async></script> 没有defer和async的情况下是"同步执行"的,浏览器解析到这里的时候,会先加载资源完成后立即执行,并阻 ...

  4. JavaScript 的 defer 与 async

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

  5. 脚本引用中的defer和async的用法和区别

    之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...

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

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

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

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

  8. defer和async的区别

    先来试个一句话解释仨,当浏览器碰到 script 脚本的时候: <script src="script.js"></script> 没有 defer 或 a ...

  9. script的defer和async

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

  10. javascript延迟加载及异步(defer和async)

    一直以来写代码的时候的常用习惯就是吧所有的js文件直接加载在文档的head标签里面,在写js文件的时候有时候获取一些文件对象的时候为空对象,这是由于文档结构还没有加载完,但是js文件已经加载完.也就是 ...

随机推荐

  1. English is very important!

    Well, as a college student,I haven't realized how important the English is . But as a web programmer ...

  2. oracle_解锁表_解锁用户

    1.解锁用户 以dba身份登录   sqlplus / as sysdba alter user scott account unlock; 2.解锁表 alter   system   kill   ...

  3. Appium：通过wifi连接Android设备

    1.首先用USB连接你的Android设备,然后在终端运行命令,它可以启动设备的5555端口使其在网络上可以连接. adb tcpip 2.现在断开USB连接,然后确保设备和你的电脑连接同一个无线网络 ...

  4. Java多线程的~~~Lock接口和ReentrantLock使用

    在多线程开发.除了synchronized这个keyword外,我们还通过Lock接口来实现这样的效果.由Lock接口来实现 这样的多线程加锁效果的优点是非常的灵活,我们不在须要对整个函数加锁,并且能 ...

  5. Java-继承特性

    继承的特点: 1.提高了代码的复用性. 2.让类与类之间发生了关系,有了这个关系,才有了多态的特性. (注意:千万不要为了获取其他类的功能,简化代码而继承:必须是类与类之间有所属关系才可以继承,所属关 ...

  6. AngularJS应用开发思维之1：声明式界面

    这篇博客之前承接上一篇:http://www.cnblogs.com/xuema/p/4335180.html 重写示例:模板.指令和视图 AngularJS最显著的特点是用静态的HTML文档,就可以 ...

  7. Struts2_2_第一Struts2应用

    web.xml文件的配置与1同样. 1)HelloWorld类的代码: public class HelloWorldAction { private String message; public S ...

  8. asp.net mvc3 数据验证（三）—自定义数据注解

    原文:asp.net mvc3 数据验证(三)-自定义数据注解         前两节讲的都是asp.net mvc3预先设定的数据注解,但是系统自由的数据注解肯定不适合所有的场合,所以有时候我们需要 ...

  9. Windows下一个ROracle安装与使用

    ROracle一个简短的引论: ROracle这是R连接到接入Oracle数据库DBI(Oracledatabase interface)介面.这是基于OCI一个DBI兼容Oracle司机. 具体见说 ...

  10. JS自动化测试 单元测试之Qunit

    前言 因为公司开发了一套javascript SDK需要测试,在网上找了很久,找到了JQuery团队开发的QUnit,和基于JUnit的JsUnit,还有一些还没有看,先讲讲QUnit吧 下载 登录J ...