浏览器加载 html 页面过程
1. dom 解析跟 css 解析,互不影响
2. dom 渲染,页面 dom 解析完形成 dom 树,css 解析完形成 cssom 树,然后 dom、cssom 合成 render 树,这个过程是 dom 渲染
3. js 会操作 dom 跟 css,故 js 会影响解析和渲染过程,如下三种情况:
- <script> ,dom 树解析遇到script 标签,立即停止解析,下载并运行 js 脚本,待 js 执行完毕,继续 dom 解析
- <script defer>,这种是延迟执行脚本,dom 树解析时遇到此标签,立即下载该 js 脚本,并保持 dom 解析同步进行。
dom 解析完毕后,按照 js 脚本顺序,依次执行 js 脚本。然后触发 document 的 DOMContentLoaded 事件。
- <script async>,异步执行脚本,dom 渲染跟 js 互不干扰,DOMContentLoaded 事件 跟 js 脚本无关。多个 js 脚本执行顺序不定。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步