请问css/html/js/img的下载顺序是怎样的？都是并发执行的吗？

CSS、HTML、JS 和图片的下载并非完全并发，而是遵循一定的规则和优先级，并受到浏览器并发连接数的限制。 大致流程和细节如下：

  1. HTML 解析先行: 浏览器首先下载 HTML 文件。解析 HTML 的过程中，遇到 <link> 标签（引入 CSS）和 <script> 标签（引入 JavaScript）时，会暂停 HTML 的解析，优先下载这些资源。

  2. CSS 优先下载: 由于 CSS 决定了页面的样式，浏览器会优先下载 CSS 文件，以尽快渲染页面结构。

  3. JS 会阻塞 HTML 解析: 当浏览器遇到 <script> 标签时，会停止解析 HTML，优先下载并执行 JavaScript 代码。这是因为 JS 代码可能会修改 DOM 结构，影响后续 HTML 的解析。如果 <script> 标签带有 defer 或 async 属性，则会有不同的行为 (详见下方)。

  4. 图片等资源并发下载: 图片、音频、视频等资源通常在 HTML 解析过程中遇到相应的标签（例如 <img>）时开始下载。这些资源的下载通常是并发的，但会受到浏览器并发连接数的限制。现代浏览器通常允许同时下载 6-8 个资源。 如果超过限制，其余的资源会进入队列等待下载。

  5. JS 可能会阻塞图片下载: 虽然图片资源的下载通常与 HTML 解析并行，但如果前面有阻塞式的 <script> 标签，图片的下载会等到 JS 下载和执行完毕后才开始。

<script> 标签的 defer 和 async 属性:

  • defer: 带有 defer 属性的 <script> 标签会在 HTML 解析完成后，DOMContentLoaded 事件触发之前执行。多个 defer 脚本会按照它们在 HTML 中出现的顺序执行。defer 脚本不会阻塞 HTML 解析和图片等资源的下载。

  • async: 带有 async 属性的 <script> 标签会异步下载，并在下载完成后立即执行。async 脚本不会阻塞 HTML 解析和图片等资源的下载，但它们的执行顺序是不确定的，哪个先下载完哪个先执行。

总结:

下载顺序并非完全固定，而是根据资源类型和 <script> 标签的属性动态调整。总的来说，遵循以下优先级：

  1. HTML 解析 (会被 CSS 和阻塞式 JS 打断)
  2. CSS 下载
  3. 阻塞式 JS 下载和执行
  4. 图片和其他资源并发下载 (受浏览器并发连接数限制，也可能被阻塞式 JS 阻塞)
  5. defer 脚本执行 (HTML 解析完成后，DOMContentLoaded 之前)

理解这些规则有助于优化前端性能，例如：

  • 将 CSS 放在 <head> 中，尽早下载并应用样式。
  • 使用 async 或 defer 属性，避免 JS 阻塞 HTML 解析和资源下载。
  • 合并 CSS 和 JS 文件，减少 HTTP 请求次数。
  • 使用 Sprite 图技术，将多个小图标合并成一张大图，减少 HTTP 请求次数。

希望以上解释能够解答你的疑问。

posted @ 2024-12-12 09:20  王铁柱6  阅读(69)  评论(0)    收藏  举报