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. AspNet.WebAPI.OData.ODataPQ实现WebAPI的分页查询服务-（个人拙笔）

    AspNet.WebAPI.OData.ODataPQ 这是针对 Asp.net WebAPI OData 协议下,查询分页.或者是说 本人在使用Asp.Net webAPI 做服务接口时写的一个分页 ...

  2. iOS开发分析&quot;秘密&quot;App内容页面的效果(两)

    @我前几天写的"秘密"的Cell制品的效果,想要的效果还是有差距,并且扩展性非常不好,于是重写封装,把总体视图都放到scrollView中,基本是和secret app 一模一样的 ...

  3. Asp.Net+Easyui实现重大CRUD

    今天周四称,这应该给自己一个休息,好好休息休息,但无奈自己IT这是痴迷.甘心的想加加班把目标功能实现,功夫不负有心人.经过6个小时的鏖战,我最终成功了. 在此和大家分享下成果,希望大家给个赞. 我的目 ...

  4. CSS3 制作向左、向右及关闭图标的效果 (另一种思路)

    最终效果 制作步骤 1.边框 CSS及Html代码 显示效果 2.向左的标志 CSS及Html代码,增加的代码在黄色范围内 显示效果 方向不对了,马上修改一下方向,逆时针旋转45度调整一下 CSS及H ...

  5. Web API 2：Action的返回类型

    Web API 2:Action的返回类型 Web API控制器中的Action方法有如下几种返回类型: void HttpResponseMessage IHttpActionResult 其它类型 ...

  6. Ionic项目中使用极光推送-android

    对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin ...

  7. IOS发展--他们控制的定义

    有没有这样的要求,,自定义panel,里面放几个控件,在多个页面中使用此panel. 有三个观点来解决这个问题: 1.自己继承UIView写一个类,在它是在代码的形式加入需要控制.完成布局. 2.使用 ...

  8. HDU 5045 Contest

    pid=5045">主题链接~~> 做题感悟:比赛时这题后来才写的,有点小尴尬.两个人商议着写写了非常久才写出来,I want to Powerful ,I believe me ...

  9. 安卓MonkeyRunner源码分析之工作原理架构图及系列集合

    花了点时间整理了下MonkeyRunner的工作原理图,请配合本人博客里面MonkeyRunner其他源码分析文章进行阅读.下面整理成相应系列列表方便大家阅读: MonkeyRunner源码分析之-谁 ...

  10. CentOS上安装WordPress搭建博客平台

    前两天在服务器上搭建了AMP,今天试着在上面安装了一个WordPress(中文:http://cn.wordpress.org/,英文:http://wordpress.org/),我安装的是英文最新 ...