本文探讨了浏览器渲染HTML文档时的流程，包括DOM和CSSOM的生成，以及JavaScript如何影响这一过程。接着，重点介绍了HTML5的defer和async属性在异步加载JavaScript脚本中的不同作用，解释了它们如何帮助优化页面渲染速度并保持执行顺序。
浏览器渲染原理
HTML 文档被加载和解析完成之前，浏览器做了哪些事情呢？那我们需要从浏览器渲染原理来谈谈。
浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型），到这里 HTML 文档就被加载和解析完成了。如果有 CSS 的会根据 CSS 生成 CSSOM（CSS 对象模型），然后再由 DOM 和 CSSOM 合并产生渲染树。有了渲染树，知道了所有节点的样式，下面便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局阶段。有了以上这些信息，下面就把节点绘制到浏览器上。所有的过程如下图所示：
现在你可能了解 HTML 文档被加载和解析完成前浏览器大概做了哪些工作，但还没完，因为我们还没有考虑现在前端的主角之一 JavaScript。
JavaScript 可以阻塞 DOM 的生成，也就是说当浏览器在解析 HTML 文档时，如果遇到
<body>
<script type="text/javascript"
最低0.47元/天 解锁文章
1450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
