今天要介绍的让脚本延迟加载，让脚本延迟加载的方式有多种，最简单粗暴的方法就是将 <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. [NOI2018]归程

    今年D1T1,平心而论,如果能想到kruskal重构树还是很简单的. ......苟屁啊!虽然跟其他的比是简单些,但是思维难度中上,代码难度中上,怎么看都很符合NOI T1啊. 本题还有可持久化并查集 ...

  2. MSXML2.ServerXMLHTTP responseText 获取的内容不完整，解决方案

    今天无意发现一个问题, 有个别几个网页使用 MSXML2.ServerXMLHTTP 获取网页源代码的时候,.responseText 总是返回一部分内容,无法获取完整的内容. 经过搜索,找到解决方案 ...

  3. Fiddler安装证书

    1.打开Fiddler,点击工具栏中的Tools——>Fiddler Options…       2.切换到 HTTPS 选项卡,勾选 Capture HTTPS CONNECTs,勾选 De ...

  4. semantic ui框架学习笔记一

    面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...

  5. bcftools或vcftools提取指定区段的vcf文件（extract specified position ）

    下载安装bcftools 见如下命令: bcftools filter 1000Genomes.vcf.gz --regions 9:4700000-4800000 > 4700000-4800 ...

  6. PHP中的数据结构：DS扩展

    PHP7以上才能安装和使用该数据结构扩展,安装比较简单: 1. 运行命令 pecl install ds 2. 在php.ini中添加 extension=ds.so 3. 重启PHP或重载配置 在这 ...

  7. vue 本地存储数据 sessionStorage

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

  8. JS学习笔记Day1

    一.JS概述 1.什么是JS? 是一种基于对象和事件驱动的客户端脚本语言: 运行环境:浏览器(通过浏览器解释执行) 2.JS产生于哪一年,哪个公司,是谁?第一个名字是什么? 1995年,网景公司.布兰 ...

  9. 把菜单栏变成万能工具箱，让你的 Mac 更酷炫

    文章来源:知乎 文章收录于:风云社区 www.scoee.com,提供上千款各类mac软件下载 为了彰显存在感,各路 Mac 应用都喜欢在菜单栏上安置一个图标:其中有的只是用来召唤主界面,也有一些应用 ...

  10. mysql 将一张表的数据更新到另外一张表中

    update 更新表 set 字段 = (select 参考数据 from 参考表 where  参考表.id = 更新表.id); update table_2 m  set m.column = ...