DOM与JavaScript同步加载如何拖慢页面

文档对象模型（DOM）是网页的逻辑树形表示，每个 HTML 标签对应树中一个节点，浏览器解析 DOM 后才渲染成可见页面；纯静态网站的 HTML 源码本身就是 DOM 的完整表示，但一旦引入 JavaScript 动态修改元素，DOM 和原始 HTML 源就会产生分歧。默认情况下 <script> 标签是同步加载的：浏览器解析 DOM 遇到脚本标签就会停下来，完整走一遍建立连接、下载、执行、加载进 DOM 的流程，才能继续往下解析——脚本数量一多，这种阻塞会直接拖慢整个页面（例如加载55个脚本的页面耗时8.29秒，只加载5个脚本的页面仅需0.89秒）。HTML5 的 async 属性允许脚本在后台下载、不阻塞 DOM 继续解析，下载完成后再执行，是缓解这个问题的手段，但不是万能药。发散：理解这层底层机制的意义在于，前端监控本质上是在监控”JavaScript可能制造的混乱”，脱离这个机制去看指标数字容易只知其然不知其所以然。