Script标签的async和defer

之前有写过HTML页面渲染过程，知道了JavaScript是会阻塞DOM解析的，所以我们会把script标签放到底部防止阻塞HTML解析。其实script还有两个属性，async和defer，也是可以使得JavaScript和DOM和css同步加载。

说着两个属性之前先简单说一下DOMContentLoaded和load。

DOMContentLoaded：DOM内容加载完毕，页面会展示内容，但是图片、音视频等资源还未加载就触发DOMContentLoaded事件。

Load：在DOMContentLoaded触发之后触发，这时候图片、音视频等资源也已经加载完毕了。

知道了这两个事件之后，我们来说说async和defer。这两个都是用来控制外部脚本文件的，就是使用script引入，有src属性，在script标签没有src属性的内联脚本是无效的。这两个都不会阻塞HTML的解析。

Defer：开启新的线程下载脚本，使HTML解析完成后执行。如果多个脚本同时生命defer，会按顺序下载和执行，同时会在DOMContentLoaded和load之前执行。意思就是如果HTML解析完成了，脚本还没加载完成，那么一定会等脚本加载完成了才触发DOMContentLoaded。（网上有说defer也不一定按顺序，这个不知道什么情况下不按顺序）

Async：H5新增属性，也是用于异步加载脚本，下载完毕立即执行。有多个脚本使用async的时候，不能保证顺序，如果脚本直接有依赖，是不能使用这个属性。Async会在load之前执行，但是不保证和DOMContentLoaded的执行顺序。

另外说一个跟HTML渲染的小知识点，我们在网络很卡的情况下，标签出来了，样式没有出来，之前说的是DOM和css构建出render树才能渲染页面，然后就觉得很矛盾，突然看见有文章说现代浏览器为了更好的用户体验，渲染引擎尽快渲染内容，现在已经不会等所有HTML解析之前开始构建和布局render树，部分内容将提前渲染，就是说并不是一定要DOM和css都解析加载完成构建render树之后才渲染页面。

欢迎关注Coding个人笔记公众号

转载于:https://juejin.im/post/5c4ad7a6e51d45299a08c5f8

Script标签的async和defer相关推荐

script标签中async与defer的区别
script标签内未设置async或者defer时: (1)script放在<head>,会阻塞HTML代码的解析和渲染,而放在<body>底部时,不会阻塞HTML代码的解析和 ...
script标签属性sync和defer
<script src="a.js" defer></script> 加了defer属性script标签的页面,运行流程如下: 1.浏览器开始解析HTML页 ...
script 标签中async 属性和defer 属性作用以及区别？
接下来我们对比下 defer 和 async 属性的区别: 其中蓝色线代表JavaScript加载:红色线代表JavaScript执行:绿色线代表 HTML 解析. 1)情况1 <scripts ...
html script 放置位置,script标签应该放在HTML哪里，总结分享
几年前,有经验的程序员总是让我们将很明显,现在浏览器有了更加酷的兼容方式,这篇文章,俺将跟大家一起来学习script标签的async和defer新特性,探讨script应该放在哪里更好. 页面加载方 ...
php中script标签,关于 script 标签你应该知道的
script标签用来在网页中执行JavaScript,它可以直接包含JavaScript代码,也可以直接通过src指向一个同域或者不同域的外链. 1. script标签默认会阻塞页面解析,并按照它们出 ...
javascript 的script标签
script元素 script标签的作用就是将js插入到HTML 属性表示不同的场景 async defer src type crossorigin charset 使用script标签的注意点不 ...
script标签中写html,html中script标签的详细介绍
大家好,欢迎关注支持,谢谢!本篇将介绍html中script标签的详细用法,有兴趣的朋友可以了解一下! 一.前言在html中,为了实现动态交互效果,我们经常会嵌入其它脚本语言(如:JavaScrip ...
浅谈script标签中的async和defer
script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了. 直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲 ...
script标签中的async和defer
在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. ja ...

Script标签的async和defer

Script标签的async和defer相关推荐

最新文章

热门文章