今天要介绍的让脚本延迟加载，让脚本延迟加载的方式有多种，最简单粗暴的方法就是将 <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. 遍历HTML DOM 树

    <!-- NodeIterator --> <!DOCTYPE html> <html> <head> <meta charset="u ...

  2. 区间最深LCA

    求编号在区间[l, r]之间的两两lca的深度最大值. 例题. 解:口胡几种做法.前两种基于莫队,第三种是启发式合并 + 扫描线,第四种是lct + 线段树. ①: 有个结论就是这个答案一定是点集中D ...

  3. 【洛谷P4318】完全平方数

    题目大意:求第 K 个无平方因子数. 题解:第 k 小/大的问题一般采用二分的方式,通过判定从 1 到当前数中满足某一条件的数有多少个来进行对上下边界的转移. 考虑莫比乌斯函数的定义,根据函数值将整数 ...

  4. 使用T4模板动态生成邮件内容并储存到任意位置

    一.基础概念介绍 T4模板是扩展名为 .tt 的文本文件. 他分为设计时模板 和运行时模板.主要区别在于在vs中右键点击文件,打开“属性”,在“自定义工具”一栏中的值分别如下: 设计时模板: Text ...

  5. C++基础知识--DAY1

    1. C语言是面向过程的语言,C++是面向对象的语言,相对于C语言来说,C++语法规则更为严格,其存在类型增强的问题. 类型增强,顾名思义就是C++相对于C语言来说有更加严格的类型检查,很多C语言的语 ...

  6. Codeforces Round #525 (Div. 2)

    Codeforces Round #525 (Div. 2) 哎,忍不住想吐槽一下,又要准备训练,又要做些无聊的事,弄得我都想退出了. 好好的训练不好么???? 只能做出两道水题,其实C题,感觉做出来 ...

  7. vue proxyTable 接口跨域请求调试

    在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: requir ...

  8. TODO monkey笔记，PC端执行和手机端执行

    微博不给力啊 吞我笔记,还好我有txt... 1.环境准备:安装Android sdk, 配置环境变量:platfrom_tools,tools,aapt;java:2.查询当前apk信息: aapt ...

  9. BSGS与exBSGS学习笔记

    \(BSGS\)用于解决这样一类问题: 求解\(A^x ≡B(modP)\)的最小\(x\),其中\(P\)为质数. 这里我们采用分块的方法,把\(x\)分解为\(i *t-b\)(其中\(t\)是分 ...

  10. mysql的定时任务

    参考博客:https://blog.csdn.net/qq_26562641/article/details/53301407 查看event是否开启: show variables like '%s ...