JS文件延迟和异步加载：defer和async属性
—般情况下，在文档的 <head> 标签中包含 JavaScript 脚本，或者导入的 JavaScript 文件。这意味着必须等到全部 JavaScript 代码都被加载、解析和执行完以后，才能继续解析后面的 HTML 部分。如果加载的 JavaScript 文件很大， HTML 文档解析就容易出现延迟。
为了避免这个问题，在开发 Web 应用程序时，建议把导入 JavaScript 文件的操作放在 <body> 后面，让浏览器先 将网页内容解析并呈现出来后，再去加载 JavaScript 文件，以便加快网页响应速度。
延迟执行 JavaScript 文件
<script> 标签有一个布尔型属性 defer，设置该属性能够将 JavaScript 文件延迟到页面解析完毕后再运行。
示例
在下面示例中，外部文件 test.js 包含的脚本将延迟到浏览器解析完网页之后再执行。浏览器先显示网页标题和段落文本，然后才弹出提示文本。如果不设置 defer 属性，则执行顺序是相反的。
test.html 源码：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <script type="text/javascript" defer src="test.js"></script>
- </head>
- <body>
- <h1>网页标题</h1>
- <p>正文内容</p>
- </body>
- </html>
test.js 源码：
- alert("外部文件");
注意：defer 属性适用于外部 JavaScript 文件，不适用于 <script>签包含的 JavaScript 脚本。
异步加载JavaScript文件
在默认情况下，网页都是同步加载外部 JavaScript 文件的，如果 JavaScript 文件比较大， 就会影响后面 HTML 代码的解析。上面提到一种解决方法：就是最后加载 JavaScript 文件。
现在可以为 <script> 标签设置 async 属性，让浏览器异步加载 JavaScript 文件，即在加载 JavaScript 文件时，浏览器不会暂停，而是继续解析。这样能节省时间，提升响应速度。
示例
如果为 <script> 标签设置 async 属性，然后在浏览器中预览，则会看到网页标题和段落文本同步，或者先显示出来，然后同步弹出提示文本。如果不设置 async 属性，则先弹出提示文本，然后才开始解析并显示网页标题和段落文本。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <script type="text/javascript" async src="test.js"></script>
- </head>
- <body>
- <h1>网页标题</h1>
- <p>正文内容</p>
- </body>
- </html>
async 是 HTML5 新增的布尔型属性，通过设置 async 属性，就不用考虑 <script> 标签的放置位置，用户可以根据习惯继续把很多大型 JavaScript 库文件放在 <head> 标签内。
JS文件延迟和异步加载：defer和async属性的更多相关文章
- JavaScript 文件延迟和异步加载
JavaScript 文件延迟和异步加载 -般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件. 这意味着必须等到全部 Jav ...
- js异步加载 defer和async 比较
网上说法很多,很少一句话能总结清楚的,终于找到两句一针见血的描述,很到位: 相同点:都不阻塞DOM解析 defer :顺序:保证先后顺序.解析:HTML 解析器遇到它们时,不阻塞(脚本将被异步下载) ...
- Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块
传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...
- ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...
- JS的同步和异步加载
引言 JS的“加载”不能理解为下载,它是分为两个部分:下载,执行.默认的JS加载是同步的,因为浏览器需要一个稳定的DOM结构,而执行JS时可能会对DOM造成改变,所以在执行JS时一定会阻塞HTML的渲 ...
- H5+JS+JQuery+ECharts实现异步加载
这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...
- Vue.js 子组件的异步加载及其生命周期控制
前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...
- asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度
介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中 ...
- jquery.datatable.js与CI整合 异步加载（大数据量处理）
http://blog.csdn.net/kingsix7/article/details/38928685 1.CI 控制器添加方法 $this->show_fields_array=arra ...
随机推荐
- JVM_ 动态链接
虚拟机栈: -> 栈帧---对应每个方法----> 包含: 局部变量表, 本地方法栈, 动态链接, 方法出口, 动态链接: 每个栈帧都保存了 一个 可以指向当前方法所在类的 运行时常量池, ...
- Java如何利用for循环在控制台输出正方形对角线图形
1 /* 2 利用循环在控制台输出如下正方形对角线图形 3 * * * * * * * * * * * 4 * * * * 5 * * * * 6 * * * * 7 * * * * 8 * * * ...
- 不懂就问」CPU 到底是怎么识别代码的？
近读到这样一篇文章,从底层硬件角度出发剖析了一下CPU对代码的识别和读取,内容之精彩,读完感觉学到的很多东西瞬间联系起来了,分享给猿们. 首先要开始这个话题要先说一下半导体.啥叫半导体? 半导体其实就 ...
- Luat Inside | 致敬经典，使用Air724UG制作简易贪吃蛇
作者简介: 打盹的消防车--活跃于Luat社群的新生代全能开发者,东北小伙儿爽朗幽默.好学敏思,更是实力行动派.幼年曾手握火红炽铁而后全然无恙,堪称魔幻经历:如今热衷于各类嵌入式软硬件研究,快意物联江 ...
- 试着给VuePress添加登录授权支持，基于v-dialogs
背景介绍 VuePress是个不错的能基于Markdown快速构建静态网站的框架,初步来说,对外访问都是透明的. 但是可能因为一些保密需要,有些站点的文档,我们希望控制一下访问,所以我们借着别人的轮子 ...
- Android Studio用上国产杰出代表夜神模拟器
背景介绍 在Windows上除了官方的AVD(Android Virtual Device)我们还可以使用更加便捷的国产安卓模拟器,比如杰出的代表就是夜神模拟器. 我们现在是假设你已经安装好了Andr ...
- Gitlab触发jenkins并获取项目post参数
jenkins -- Generic Webhook Trigger插件 此插件是git webhook的高阶应用,安装后会暴露出来一个公共API,GWT插件接收到 JSON 或 XML 的 HTTP ...
- (C++)戳西瓜
写在前面的话: 请不要吝啬你的点赞!!! 题目描述 有 n 个西瓜,编号为0 到 n-1,每个西瓜上都标有一个数字,这些数字存在数组 nums 中. 现在要求你戳破所有的西瓜.每当你戳破一个西瓜 i ...
- Java并发之ReentrantReadWriteLock源码解析（二）
先前,笔者和大家一起了解了ReentrantReadWriteLock的写锁实现,其实写锁本身实现的逻辑很少,基本上还是复用AQS内部的等待队列思想.下面,我们来看看ReentrantReadWrit ...
- 利用ONT测序检测真核生物全基因组甲基化状态
摘要 甲基化在真核生物基因组序列中广泛存在,其中5mC最为普遍,在真核生物基因组中也有发现6mA.捕获基因组中的甲基化状态的常用技术是全基因组甲基化测序(WGBS)和简化甲基化测序(RRBS),而随着 ...