defer和async

最新推荐文章于 2021-11-23 23:21:23 发布

菜鸟李先生

最新推荐文章于 2021-11-23 23:21:23 发布

阅读量813

点赞数

分类专栏：浏览器文章标签： javascript 前端 html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_43812731/article/details/121274324

版权

本文探讨了浏览器渲染HTML文档时的流程，包括DOM和CSSOM的生成，以及JavaScript如何影响这一过程。接着，重点介绍了HTML5的defer和async属性在异步加载JavaScript脚本中的不同作用，解释了它们如何帮助优化页面渲染速度并保持执行顺序。

摘要由CSDN通过智能技术生成

浏览器渲染原理

HTML 文档被加载和解析完成之前，浏览器做了哪些事情呢？那我们需要从浏览器渲染原理来谈谈。

浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型），到这里 HTML 文档就被加载和解析完成了。如果有 CSS 的会根据 CSS 生成 CSSOM（CSS 对象模型），然后再由 DOM 和 CSSOM 合并产生渲染树。有了渲染树，知道了所有节点的样式，下面便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局阶段。有了以上这些信息，下面就把节点绘制到浏览器上。所有的过程如下图所示：
在这里插入图片描述

现在你可能了解 HTML 文档被加载和解析完成前浏览器大概做了哪些工作，但还没完，因为我们还没有考虑现在前端的主角之一 JavaScript。

JavaScript 可以阻塞 DOM 的生成，也就是说当浏览器在解析 HTML 文档时，如果遇到

<body>
  <script type="text/javascript"

最低0.47元/天解锁文章

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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