跳到主要内容

浏览器的渲染过程

渲染过程中遇到 JS 文件如何处理？​

  1. 解析 JS 文件：当浏览器在解析 HTML 和 CSS 的过程中遇到 <script> 标签或者外部引入的 JavaScript 文件（例如通过 <script src="xxx.js"></script> 引入的文件），会立即暂停 HTML 和 CSS 的解析，开始解析并执行 JavaScript 文件。

  2. 下载 JS 文件：如果 JavaScript 文件是外部引入的（通过 src 属性指定的），浏览器会立即开始下载该文件。下载 JS 文件的过程是异步的，不会阻塞 HTML 和 CSS 的解析。

  3. 执行 JS 代码：一旦 JavaScript 文件下载完成，浏览器会立即执行其中的代码。JavaScript 的执行过程是单线程的，即所有 JS 代码按顺序依次执行。如果 JS 代码执行时间过长，可能会导致页面出现“假死”现象，即页面不响应用户的交互。

  4. 继续解析 HTML 和 CSS：在执行完 JavaScript 代码后，浏览器会继续解析剩余的 HTML 和 CSS，构建 DOM 树和渲染树。在这个过程中，如果 JavaScript 修改了 DOM 结构或样式，浏览器会实时反映这些变化，即进行异步重绘和回流。

需要注意的是，由于 JavaScript 的执行可能会修改页面的结构和样式，因此在执行 JS 代码时，浏览器会暂停解析 HTML 和 CSS，以防止因为 DOM 结构或样式的改变而导致页面布局出现错误。

为了避免影响页面加载速度，通常建议将 JavaScript 文件放在 <body> 元素的底部（即页面底部），或者使用 defer 或 async 属性来控制 JS 文件的加载和执行时机。使用 defer 属性可以使 JS 文件的加载异步进行，但会在 HTML 解析完成后、DOMContentLoaded 事件触发前执行。而使用 async 属性可以使 JS 文件的加载和执行都是异步的，不会阻塞页面的解析和渲染，但也不保证 JS 文件的执行顺序。