Script 标记的 defer 和 async 属性说明
时间:2022-07-22
本文章向大家介绍Script 标记的 defer 和 async 属性说明,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Script 标记的 defer 和 async 属性可能会显著影响页面加载的性能, 总结说明一下。
没有标记 defer 或 async 时
浏览器立即停止 HTML 渲染,同步获取并执行脚本文件, 然后再继续渲染后续的 HTML 内容。
<header>
<script src="app.js"></script>
</header>
除非特殊情况, 一般不采取这种做法。
标记 defer 时
异步获取脚本, 不会停止 HTML 渲染, 在 DOM 事件 domInteractive 之后, 开始执行脚本, 执行完成之后, 触发 domComplete 事件, 然后是 onLoad 事件。
<header>
<script defer src="app.js"></script>
</header>
标记了 defer 的脚本在执行时会按照页面标记的顺序执行, 多数情况下时最佳选择。
标记 async 时
异步获取脚本, 之后如果 HTML 没有渲染完毕, 中断 HTML 渲染, 执行脚本, 然后继续渲染后续的 HTML 内容。
<header>
<script async src="app.js"></script>
</header>
标记了 async 的脚本在执行时不会按照页面标记的顺序执行。
简单粗暴的做法
将 script 放在 body 的最尾部, 保证 HTML 渲染, 同步执行脚本。
<body>
<!-- 其它的 html 内容 -->
<script src="app.js"></script>
</body>
这种做法确实是简单粗暴, 也是最容易实现的, 所以一些自动化的工具链都采用这种做法。
最后
async 和 defer 都不能保证一定不会中断 HTML 渲染, 所以请确认你的脚本在 onLoad 事件之后才开始运行。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Saltstack_使用指南13_runner的job和manage与execution的saltutil 5.1. master执行5.2. 查看当前活动的jobs
- Saltstack_使用指南14_无master 3.1. 常规信息3.2. grains设置3.3. pillar设置
- 在CDH7.1.1中安装NiFi
- 重学前端(三)-聊聊我们的浏览器的那些事
- Saltstack_使用指南15_多master 3.1. 创建冗余的master3.2. 拷贝主master的key和配置到冗余的master3.3. 启动冗余ma
- Saltstack_使用指南16_syndic 3.1. 部署salt-master3.2. 其他配置与部署4.1. 部署salt-syndic4.2. syndic
- Centos7安装单机版MongoDB
- Saltstack_使用指南17_salt-ssh
- Saltstack_使用指南18_API
- Centos7安装单机版Redis
- Vue3 Composition-Api + TypeScript + 新型状态管理模式探索。
- Saltstack_实战指南01_系统规划
- Saltstack_实战指南02_各主机Pillar信息指定
- TypeScript基础看腻了?进阶实现智能类型推导的简化版Vuex,手把手带你实现。
- Linux下使用 github+hexo 搭建个人博客01-hexo搭建