script defer async模式

最新推荐文章于 2022-07-02 11:03:39 发布
最新推荐文章于 2022-07-02 11:03:39 发布
阅读量103 收藏
点赞数
分类专栏： 面试题 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43853213/article/details/125472441
版权
本文详细介绍了前端JavaScript加载时，无 defer 和 async 属性、使用 defer 以及 async 属性时的DOM解析和JS执行顺序。无属性时，JS执行会阻塞DOM解析；使用defer，JS下载不阻塞DOM，但会在DOM解析完成后执行；而async则允许JS并行下载，但执行时机不确定，可能打断DOM解析。
摘要由CSDN通过智能技术生成

在这里插入图片描述
前端无 defer 和 async

DOM解析暂停，JS文件解析，JS执行完毕，然后DOM接着解析

前端 defer

DOM解析遇到JS文件，DOM解析不会停止，同时JS文件并行下载，但是JS的执行，会延时到DOM解析完毕之后，才会执行

前端 async

DOM解析遇到JS文件，DOM解析不会停止，同时JS文件并行下载，JS解析完毕，DOM的解析会等待JS执行完毕，才会接着解析DOM

在这里插入图片描述

龙马啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【HTML5高级第三篇】drag拖拽、音频视频、defer/async属性、dialog应用
前端知识分享喵
09-07 1033
drag拖拽、音频视频、defer/async属性、dialog元素应用
Script加载模式 defer async
最新发布
m0_73280507的博客
03-22 161
script 会阻塞html的dom构建。
浏览器渲染 defer async css cssom
zgrbsbf的专栏
11-13 465
转自：http://web.jobbole.com/92765/ 阻塞渲染：CSS 与 JavaScript 谈论资源的阻塞时，我们要清楚，现代浏览器总是并行加载资源。例如，当 HTML 解析器（HTML Parser）被脚本阻塞时，解析器虽然会停止构建 DOM，但仍会识别该脚本后面的资源，并进行预加载。 同时，由于下面两点： 默认情况下，CSS 被视为阻塞渲染的资源，这意
defer和async的区别
热门推荐
张木期的博客
09-24 1万+
先来试个一句话解释仨，当浏览器碰到 script 脚本的时候： <script src="script.js"></script> 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 <script async src="script.j...
script 标签的 async 和 defer 属性
zxf_CN的博客
12-28 366
提问：我们平时都是把 script 标签放到 body 的底部，这是为什么呢？ 回答： 因为 html 页面是从上而下进行渲染的，遇到 script 标签的话，会进入，去 下载 相应的资源，直到下载好后就会 执行， html 页面才开始继续向下执行，这样会拖慢 html 页面的渲染速度，还有如果一些脚本文件需要操作 DOM，但此时 html 页面还没有加载好，就会报错了；所以一般我们把 script 放到 body 的底部；（总结：放在底部是要等待 html 加载好后，才进行加载）； 提问： 那 ..
JS中script标签defer和async属性的区别详解
11-26
1. **没有defer或async属性**： 当`<script>`标签没有这两个属性时，浏览器会立即下载脚本，并在解析到该标签时执行。这意味着在执行脚本的过程中，浏览器会暂停HTML的解析，直到脚本执行完毕。这种方法对于小脚本...
script的async属性以非阻塞的模式加载脚本
01-19
1.HTML5实现了script的async属性，这个新的属性可以让js在浏览器中以非阻塞的模式加载，另外script还有一个defer属性，这个属性目前所有浏览器都已实现（除了firefox和chrome的早期版本），IE这方面做得好，从一开始...
JavaScript无阻塞加载和defer、async详解
01-19
下载是异步的没问题，但是每个javascript执行的时候还是同步的，就是先出现的script标签一定是先执行，即使是并行下载它是最后一个下载完成的，除非标有defer的script标签。任何javascript在执行的时候都会中断当前...
前端判断数据类型的方式
qq_43853213的博客
06-22 805
1. typeof2.instanceof原理： 判断某个实例对象是否是这个构造函数的实例需要注意一点： 如果判断数组和对象的话，需要优先判断数组的类型 为什么上面都打印 true 实际上数组和对象的祖先都是Object3. Object.prototype.toString.call()...
前端 - for 和forEach哪一个更快
qq_43853213的博客
06-28 732
for 循环和forEach遍历，相比较，for 会 更快 理由：循环和递归哪一个更快
前端预防攻击手段
qq_43853213的博客
06-26 660
XSSvue 和 react 插值表达式，都是可以预防的 但是 vue v-html react dangerouslySetInnerHTML这个是没有预防的预防手段比如 csrf 跨站请求伪造预防手段比如点击劫持点击劫持预防 DDoSSQL注入
JS作用域面试题
qq_43853213的博客
05-14 469
本来是不打算写这个，总所周知JS作用域的面试题很简单。 之所以写上来是因为，我思考了这道题。 打印的结果是一个函数，变量不能重复定义，第二个定义是无效的。所以打印的不是undefined function b(){ } console.log(b) // 打印的b 是一个函数， var b = 2 ------------------------------------- 作用域提升 var b = function(){ } var b console.log(b) b = 2 接下来看另
前端面试题-找出两个数组的不同值（差集）
qq_43853213的博客
07-02 440
第一种，最蠢的indexOf 第二种 new Set 数组去重之后来解决。
前端垃圾回收机制
qq_43853213的博客
06-28 336
垃圾回收1. 引用计数2. 标记清除
Ajax Fetch Axios三者区别
qq_43853213的博客
06-27 334
从维度上来说三者都是实现网络请求的， fetch是最底层的， 接着是Ajax 最后是axios， Ajax原生API HMLHttpRequestajaxaxiosfetch
HTTP 和 HTTPS
qq_43853213的博客
06-26 327
HTTPHTTPSHTTPS不是新的应用层协议，只是在HTTP协议上进行加密了。HTTPS采用了对称加密和非对称加密对称加密 传输效率比较高对称加密有风险，秘钥是服务端传给客户端的，如果秘钥在传输过程被第三方劫持了，那么对称加密就没有任何意义了。非对称加密 传输效率比较低中间人攻击 这种加密也会存在一种风险，中间人攻击，黑客可以有自己的公钥和私钥，将服务端传给客户端的公钥，替换成自己的公钥，客户端传给服务端，拦截加密的随机码，用自己的私钥来解密，可以拿到随机码了。 解决方案 利用浏览器对服务端给的公钥进行验
HTTP 1.0 1.1 2.0
qq_43853213的博客
06-26 311
HTTP 1.0 1.1 2.0
浏览器输入url地址，到页面渲染发生了什么
qq_43853213的博客
06-26 284
优化解析
理解JavaScript的<script>标签：阻塞与非阻塞
通过设置`async`或`defer`属性，可以使得脚本在不阻塞页面解析的情况下加载。`async`属性使得脚本异步下载，一旦下载完成就立即执行，不保证执行顺序。而`defer`属性则保证脚本在HTML解析完成后、`DOMContentLoaded`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值