引用JavaScript文件时的两个属性defer和async

<script src="js1.js" defer></script>
<script src="js2.js" async></script>

defer 延迟脚本
立即下载,延迟执行
这个属性的用途是表明脚本在执行时不会影响页 面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行
HTML5 规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于 DOMContentLoaded 事件执行。
在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发 前执行,因此最好只包含一个延迟脚本
IE4、Firefox 3.5、Safari 5 和 Chrome 是最早支持 defer 属性的浏览器。其他浏览器会忽略这个属 性,像平常一样处理脚本。为此,把延迟脚本放在页面底部仍然是最佳选择

async 异步脚本 
立即下载,立即执行
指定 async 属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容
标记为 async 的脚本并不保证按照指定它们的先后顺序执行
异步脚本一定会在页面的 load 事件前执行,但可能会在 DOMContentLoaded 事件触发之前或之 后执行。
支持异步脚本的浏览器有 Firefox 3.6、Safari 5 和 Chrome

http://www.cnblogs.com/jzm17173/p/3619621.html

【JS】defer / async的更多相关文章

  1. -_-#【JS】defer / async

    引用JavaScript文件时的两个属性defer和async <script src="js1.js" defer></script> <scrip ...

  2. 【js】appendChild

    appendChild主要是用来追加节点插入到最后:循环的时候由于不停的搬家导致length在改变.     使用for循环 <!Doctype html> <html xmlns= ...

  3. 【JS】AJAX跨域-被调用方与调用方解决方案(二)

    解决跨域问题 跨域问题说明,参考[JS]AJAX跨域-JSONP解决方案(一) 实例,使用上一章([JS]AJAX跨域-JSONP解决方案(一))的实例 解决方案三(被调用方支持跨域-服务端代码解决) ...

  4. 【js】Leetcode每日一题-制作m束花所需的最少天数

    [js]Leetcode每日一题-制作m束花所需的最少天数 [题目描述] 给你一个整数数组 bloomDay,以及两个整数 m 和 k . 现需要制作 m 束花.制作花束时,需要使用花园中 相邻的 k ...

  5. 【js】Leetcode每日一题-完成所有工作的最短时间

    [js]Leetcode每日一题-完成所有工作的最短时间 [题目描述] 给你一个整数数组 jobs ,其中 jobs[i] 是完成第 i 项工作要花费的时间. 请你将这些工作分配给 k 位工人.所有工 ...

  6. 【js】Leetcode每日一题-数组异或操作

    [js]Leetcode每日一题-数组异或操作 [题目描述] 给你两个整数,n 和 start . 数组 nums 定义为:nums[i] = start + 2*i(下标从 0 开始)且 n == ...

  7. 【js】Leetcode每日一题-解码异或后数组

    [js]Leetcode每日一题-解码异或后数组 [题目描述] 未知 整数数组 arr 由 n 个非负整数组成. 经编码后变为长度为 n - 1 的另一个整数数组 encoded ,其中 encode ...

  8. 【js】Leetcode每日一题-叶子相似的树

    [js]Leetcode每日一题-叶子相似的树 [题目描述] 请考虑一棵二叉树上所有的叶子,这些叶子的值按从左到右的顺序排列形成一个 叶值序列 . 举个例子,如上图所示,给定一棵叶值序列为 (6, 7 ...

  9. 【js】Leetcode每日一题-子数组异或查询

    [js]Leetcode每日一题-子数组异或查询 [题目描述] 有一个正整数数组 arr,现给你一个对应的查询数组 queries,其中 queries[i] = [Li, Ri]. 对于每个查询 i ...

随机推荐

  1. erase() 返回的是删除此元素之后的下一个元素的迭代器 .xml

    pre{ line-height:1; color:#f0caa6; background-color:#2d161d; font-size:16px;}.sysFunc{color:#e54ae9; ...

  2. C++中 类的构造函数理解(一)

    C++中 类的构造函数理解(一) 写在前面 这段时间完成三个方面的事情: 1.继续巩固基础知识(主要是C++ 方面的知识) 2.尝试实现一个iOS的app,通过完成app,学习iOS开发中要用到的知识 ...

  3. pycharm出现乱码

    1. 'gbk' codec can't encode character u'\xb8' 解决办法 import sys reload(sys)sys.setdefaultencoding('utf ...

  4. NSRangeFromString 测试

    官网文档 Returns a range from a textual representation. Declaration SWIFT func NSRangeFromString(_ aStri ...

  5. hadoop2.5.2学习及实践笔记(二)—— 编译源代码及导入源码至eclipse

    生产环境中hadoop一般会选择64位版本,官方下载的hadoop安装包中的native库是32位的,因此运行64位版本时,需要自己编译64位的native库,并替换掉自带native库. 源码包下的 ...

  6. Mapreduce执行过程分析(基于Hadoop2.4)——(二)

    4.3 Map类 创建Map类和map函数,map函数是org.apache.hadoop.mapreduce.Mapper类中的定义的,当处理每一个键值对的时候,都要调用一次map方法,用户需要覆写 ...

  7. jquery对象和js对象,以及它们的互相转换

    jq对象无法使用DOM对象的方法,互相都不能用 ***jq对象转换成DOM对象的2中方法 1.$('div')[0下标]:jq对象是类似数组对象有长度,所以可以通过下标查找到它的DOM对象 2.$(' ...

  8. Spark RDD概念学习系列之RDD的操作(七)

    RDD的操作 RDD支持两种操作:转换和动作. 1)转换,即从现有的数据集创建一个新的数据集. 2)动作,即在数据集上进行计算后,返回一个值给Driver程序. 例如,map就是一种转换,它将数据集每 ...

  9. (mac)Android Studio安装以及Fetching android sdk component information超时的解决方案

    解决Mac下面Fetching android sdk component information加载过久问题, 关于windows中可以参考前面一篇文章 关于安装和下载可以百度一下地址.安装完成后, ...

  10. TcxGrid导出EXCEL

    function ExportExcel(grid: TcxGrid; const fileName: string = '1.xls'): Boolean;var  sd: TSaveDialog; ...