<script>标签 async与defer详解
来源:互联网 发布:网络保护软件 编辑:程序博客网 时间:2024/05/01 09:24
首先,我们要知道浏览器的渲染过程,在网页渲染过程中,如果遇到<script>
标签是立即下载的,会阻塞页面的解析,显而易见的效果就是,你会发现页面有一段时间是空白的,因为浏览器只有等待js下载执行完毕后才会继续渲染。这样的用户体验是很差的,也是大多数开发者会把 <script>
放在</body>
之前的原因。
延迟脚本
HTML4.01为<script>
标签增加了defer属性,这个属性是告诉浏览器脚本会立即被下载,但是等待页面解析之后再运行。
HTME5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会优于第二个执行。但是现实中,它们执行的先后顺序并不一定。(JaveScript高级程序设计),因此把延迟脚本最好只有一个,并放在页面底部仍是最佳选择
异步脚本
HTML5定义了<script>
标签的async属性,与defer属性一样,仅适用于外部脚本,它告诉浏览器立即下载,但async并不保证执行的顺序,如果有两个异步脚本,那么请确保它们之间没有依赖关系,因为第二个可能先于第一个执行。在下载期间,页面解析会继续,异步脚本一定会在页面onload事件之前执行。
0 0
- <script>标签 async与defer详解
- HTML5中<script>标签中的defer与async属性详解
- 理解html中script标签的defer与async属性
- JavaScript标签<script>中的defer和async
- script标签中的async和defer属性
- HTML5 <script>标签中的async和defer
- script标签的defer和async属性
- script标签的defer和async属性
- js之script属性async与defer
- js之script属性async与defer
- script标签不带属性与带async、defer的区别
- async,defer for script
- script标签中async,defer两个属性的区别
- script标签中defer和async属性的使用
- script标签中defer和async属性的区别
- script标签的属性 async 和 defer 的区别
- JS中script标签defer和async属性
- script的defer和async
- Redis 3.2.6 Sentinel部署
- 1115. Counting Nodes in a BST (30)
- JKTEBOP在Windows下的运行
- 指针作为函数返回值
- 制作多功能播放器
- <script>标签 async与defer详解
- tensorflow 最小二乘拟合详细代码注释
- struct和typedef struct
- 文章标题
- jquery下拉框操作
- 下载多版本Xcode工具
- 【WPF】退出应用时的提示弹窗
- iOS自己写的一些容易忘记的小知识
- XShell5从windows上传文件到linux