今天要介绍的让脚本延迟加载，让脚本延迟加载的方式有多种，最简单粗暴的方法就是将 <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. hdu 3415"Max Sum of Max-K-sub-sequence"（单调队列）

    传送门 题意: 给出一个有 N 个数字([-1000 , 1000],N ≤ 105)的环状序列: 让你求一个和最大的连续子序列,并记录起始点. 要求这个连续子序列的长度小于等于K,加和相同的不同区间 ...

  2. php如何判断数组是一维还是多维

    php>4.2 int count ( mixed $var [, int $mode ] )  --  计算数组中的单元数目或对象中的属性个数  如果可选的 mode 参数设为 COUNT_R ...

  3. JS学习笔记Day3

    一.什么是循环结构 满足一定条件,(((重复)))执行一段相同的代码 二.循环思想是什么(循环三要素) 开始 结束 步长(步进) 三.可以实现循环语句的有哪些 while do while for 四 ...

  4. 基于LVM卷的MYSQL快照恢复

    在mysql数据库环境中,如果数据库数据很重要,可以使用LVM卷管理的方式,通过对数据卷进行快照,得到快速备份的目的, 首先回顾一下LVM卷管理的几个概念: 物理磁盘PD,physical disk, ...

  5. ELK大流量日志分析系统搭建

    1.首先说下EKL到底是什么吧? ELK是Elasticsearch(相当于仓库).Logstash(相当于旷工,挖矿即采集数据).Kibana(将采集的数据展示出来)的简称,这三者是核心套件,但并非 ...

  6. （map string）Crazy Search hdu1381

    Crazy Search Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  7. go的net/rpc用法

    一:PRC是什么? RPC(Remote Procedure Call) 远程过程调用,是一个计算通信协议.该协议允许一台计算机上的程序调用另外一台计算机上的程序.远程过程调用就是2个不在同一台计算机 ...

  8. plsql无法正常显示汉字

    首先执行语句 select * from V$NLS_PARAMETERS  查看第一行中PARAMETER项中为NLS_LANGUAGE 对应的VALUE项中是否为SIMPLIFIED CHINES ...

  9. 创建免密码sudo用户

    创建免密码sudo用户 #!/bin/bash c1=`grep -w 'bkuser' /etc/passwd | wc -l` ]; then echo "bkuser已经存在" ...

  10. 增删改查的SSM小项目

      经过将近一个月的摸索,终于算是勉强完成了关于增删改查的SSM项目. github源码地址:https://github.com/123456abcdefg/Login 好了,话不多说,写一下具体代 ...