js加载会阻塞dom吗？如何防止阻塞？

JavaScript 的加载和执行确实可能会阻塞 DOM 的解析和渲染，这主要取决于 JavaScript 脚本是如何加载的。默认情况下，当浏览器遇到 <script> 标签时，它会停下来立即加载并执行脚本，然后再继续解析和渲染 DOM。这种行为可能会导致页面加载的延迟，尤其是当脚本文件很大或者网络状况不佳时。

为了防止 JavaScript 加载和执行阻塞 DOM，可以采用以下几种策略：

1. 异步加载（Async）：
   使用 <script async> 属性可以让浏览器异步加载脚本文件，不会阻塞 DOM 的解析。一旦脚本加载完成，浏览器会暂停 DOM 的解析，执行脚本，然后继续解析 DOM。这种方式适用于那些不依赖于其他脚本或 DOM 的独立脚本。

2. 延迟加载（Defer）：
   使用 <script defer> 属性也可以让浏览器异步加载脚本文件，但不同之处在于，无论脚本加载完成的顺序如何，浏览器都会保证按照它们在文档中出现的顺序执行这些脚本。这种方式适用于那些依赖于其他脚本或 DOM 的脚本。

3. 动态脚本加载：
   通过 JavaScript 动态创建 <script> 标签，并将其添加到 DOM 中，可以实现更灵活的脚本加载策略。这种方式可以让你根据需要控制脚本的加载时机，甚至可以根据用户的行为或其他条件来决定是否加载某个脚本。

4. 使用模块打包工具：
   现代前端工程通常会使用模块打包工具（如 Webpack、Rollup 等）来组织和优化脚本文件。这些工具提供了代码分割（Code Splitting）的功能，可以将代码拆分成多个小块，按需加载，从而有效减少初始加载时所需加载的脚本量，减轻阻塞问题。

综上所述，有多种方法可以防止 JavaScript 加载和执行阻塞 DOM。选择哪种方法取决于你的具体需求和项目特点。