今天要介绍的让脚本延迟加载，让脚本延迟加载的方式有多种，最简单粗暴的方法就是将 <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. 使用selenium 模拟人操作请求网页

    首先要 pip install selenium  安装插件 然后要下载驱动驱动根据你的浏览器 Chrome  selenium 驱动下载地址 http://chromedriver.storage. ...

  2. Day18--Python--面向对象--类与类之间的关系

    1. 依赖关系 在方法中引入另一个类的对象 (最不紧密的一种关系) 依赖关系都是把另一个对象当做参数 class Elephant: def __init__(self, name): self.na ...

  3. 通过$.ajax设置预加载动画加强用户体验

    以前在jquery请求数据时,总喜欢用简洁的$.get与$.post提交数据,但有时发现由于网速的问题,有些时候网站加载js获得的数据会非常慢,于是就想能不能请求数据中间,给加载数据一个提示,增加用户 ...

  4. （线性dp 最大连续和）POJ 2479 Maximum sum

    Maximum sum Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 44459   Accepted: 13794 Des ...

  5. C# 数据库批量插入数据之 —— SqlBulkCopy、表值参数

    创建了一个用来测试的Student表: CREATE TABLE [dbo].[Student]( [ID] [int] PRIMARY KEY NOT NULL, ) NULL, ) NULL, [ ...

  6. Go-day05

    今日概要: 1. 结构体和方法 2. 接口 一.go中的struct 1. 用来自定义复杂数据结构 2. struct里面可以包含多个字段(属性) 3. struct类型可以定义方法,注意和函数的区分 ...

  7. flask models循环使用和migrate迁移脚本

    使用models目的是为了将创建数据库模型的代码与主程序代码分离,migrate的作用就是在数据库字段改变时不用drop表直接做更新操作 新建 models.py  exts.py manage.py ...

  8. C++回顾day01---<命名空间>

    一:namespace是指标识符的各种控件范围(类java中package) C++语言引入命名空间(Namespace)这一概念主要是为了避免命名冲突,其关键字为 namespace 二:iostr ...

  9. JAVA核心技术I---JAVA基础知识（异常处理类）

    一:异常分类 Throwable:所有错误的祖先. Error:系统内部错误或者资源耗尽.不用我们管 Exception: 程序有关的异常.重点关注 –RuntimeException: 程序自身的错 ...

  10. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...