今天要介绍的让脚本延迟加载，让脚本延迟加载的方式有多种，最简单粗暴的方法就是将 <script> 标签放在 <body> 标签的最下面，这样就可以按照先后顺序依次执行了，但是你有些情况还是想放在 <head> 标签的下面，但是这个时候就要让脚本延迟执行，因为页面要先解析DOM再执行脚本。

方法一：使用HTML4.01为 <script> 标签定义的 defer 属性，IE4~7支持

方法二： 使用HTML5为 <script> 定义的 async 属性，IE8己以上支持

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script type="text/javascript" defer="defer" src="example1.js"></script>

  <script type="text/javascript" defer="defer" src="example2.js"></script>

</head>

<body>

  <div>hello world</div>

</body>

</html>

注意上面两个脚本都使用了  defer 属性，但是这两个脚本文件执行的先后顺序是不确定，所以一个页面最好只使用一个脚本延迟，除非他们没有依赖关系才会这么用。 async 属性也同样存在这样的问题，他们两唯一的区别就是兼容性问题了。如果想安先后顺序依次执行，唯一的办法就是放在 body 里面才是更好的选择。

今天是父亲节，祝天下所有的父亲节日快乐·！

区分defer和async的更多相关文章

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

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

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

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

  3. script的defer和async

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

  4. javascript的defer和async（转载）

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

  5. javascript的defer和async的区别。

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

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

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

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

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

  8. JavaScript 的 defer 与 async

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

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

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

随机推荐

  1. 四种不同的SNP calling算法call低碱基覆盖度测序数据时，SNVs数量的比较（Comparing a few SNP calling algorithms using low-coverage sequencing data）

    摘要:如果不设置任何过滤标准的话,SOAPsnp会call出更多的SNVs:AtlasSNP2算法比较严格,因此call出来的SNVs数量是最少的,GATK 和 SAMtools call出来的数量位 ...

  2. vue 本地存储数据 sessionStorage

    在vuex 下的 action下的userAction.js中添加 export function login(from, self) { axPost('/api/login', from, fun ...

  3. 安装webpack-dev-server始终不成功

    先安装了webpack,后来安装webpack-dev-server会一直出现这个问题,我把webpack提示的1.0.0 , 2.0.0 ,3.0.0全都在全局装了一遍都没用,还是会出现这个问题.最 ...

  4. diff和patch

    diff -u:the unified format会将不同的地方放在一起,紧凑易读 . diff original.txt updated.txt c表示在original文件中的m,n行的内容将要 ...

  5. 使用 windows 下的 secureCRT 软件的 通过 sftp 上传和下载文件到远端 linux 设备

    secureCRT 按下ALT+P就开启新的会话进行ftp操作. 输入:help命令,显示该FTP提供所有的命令 pwd:  查询linux主机所在目录(也就是远程主机目录) lpwd: 查询本地目录 ...

  6. Shell 同步时间脚本

    Linux系统同步时间脚本 Linux操作系统,如果时间和网络时间差距太大的话.可能会导致程序,进程启动不了.所以linux系统时间同步显得尤为重要,本文在借鉴网上众多资料后,以centos_6.X系 ...

  7. Java Web之上传文件

    本篇文章你会学到 1. Apache FileUpload组件 2.上传文件保存的路径和名称问题 3.缓存大小和临时目录 4.控制文件上传的格式 先讲一个简单的例子,一个注册页面,有账号,邮箱,和头像 ...

  8. python mysql 视图 触发器 事物 存储过程 用户授权 数据备份还原

    ###################总结########### 视图是一个虚拟表(非真实存在) 是跑在内存中的表,真实表是在硬盘上的表 使用视图我们可以把查询过程中的临时表摘出来,保存下来,用视图去 ...

  9. layui(八)——轮播图常见用法总结

    carousel 是 layui 2.0 版本中新增的全新模块,主要适用于跑马灯/轮播等交互场景.它可以满足任何类型内容的轮播式切换操作,更可以胜任 FullPage (全屏上下轮播)的需求,简洁而不 ...

  10. HDU - 3642 Get The Treasury（线段树求体积交）

    https://cn.vjudge.net/problem/HDU-3642 题意 求立方体相交至少3次的体积. 分析 三维的呢..首先解决至少覆盖三次的问题.则用三个标记,更新时的细节要注意. 注意 ...