自学内容网 自学内容网
自学内容网 > 正文

VScode插件：前端每日一题

🕗 发布于 2024-11-15 00:40 vscode  前端  ide  

html 文档渲染过程，css 文件和 js 文件的下载，是否会阻塞渲染？

HTML 文档渲染过程

HTML 文档的渲染过程大致可以分为以下几个步骤：

  1. 解析 HTML 文件
    浏览器开始加载 HTML 文件，并从上到下逐行解析。当遇到不同的 HTML 元素时，浏览器会生成相应的 DOM 树（Document Object Model）。每个元素都会被解析并转化为 DOM 节点。

  2. 解析 CSS 文件
    在 HTML 中，当浏览器遇到 <link> 或 <style> 标签时，它会下载并解析相应的 CSS 文件，并将其应用到相应的 DOM 节点上，从而影响页面的视觉呈现。浏览器根据 CSS 的样式规则重新计算 DOM 树，生成渲染树（Render Tree）。

  3. 执行 JavaScript 文件
    当浏览器遇到 <script> 标签时，它会下载并执行 JavaScript 文件。JavaScript 可以操作 DOM 和 CSSOM（CSS 对象模型），并动态地修改页面内容。因此，JavaScript 的执行也会影响渲染树的生成。

  4. 构建渲染树
    浏览器基于 DOM 树和 CSSOM 树，生成渲染树。渲染树只包含实际渲染的元素（即那些具有视觉效果的元素），而不包括像 <head>、<meta>、<script> 等不需要渲染的元素。

  5. 布局与绘制
    渲染树构建完成后，浏览器会进行布局（Layout）过程，计算每个元素在页面上的位置和大小。接下来，浏览器会根据这些计算结果绘制页面的各个部分，包括文字、图像、背景等。

  6. 显示页面
    最终，浏览器将页面渲染到屏幕上并显示给用户。

CSS 文件和 JS 文件的下载，是否会阻塞渲染？

1. CSS 文件的下载与渲染阻塞

  • CSS 文件：当浏览器遇到 <link> 或 <style> 标签时，它会下载并解析 CSS 文件。由于页面的外观依赖于 CSS，因此浏览器通常会 阻塞渲染，直到 CSS 文件加载完成并应用到 DOM 树上。这样做是为了防止页面呈现出不完整的样式，避免用户看到未应用样式的页面（闪烁或布局错乱的情况）。

    具体来说，CSS 的下载和解析是渲染的关键部分，浏览器会等 CSS 文件加载完成后，才会开始构建渲染树。为了优化页面加载，通常会将 CSS 文件放在页面的 <head> 部分，以确保 CSS 被优先加载和解析。

  • 阻塞渲染的影响：如果 CSS 文件较大或网络较慢，可能会导致页面渲染延迟，影响用户体验。因此，现代的做法包括：

    • 异步加载 CSS：使用 media="print" 或 rel="preload" 属性来异步加载 CSS 文件，避免阻塞渲染。
    • CSS 内联：将关键的 CSS 样式直接写在 <style> 标签内，以确保快速应用基础样式。
2. JavaScript 文件的下载与渲染阻塞

  • JS 文件：当浏览器遇到 <script> 标签时，它会下载并执行 JavaScript 文件。如果 <script> 标签位于页面的 <head> 部分或文件没有使用 async 或 defer 属性，浏览器会在执行 JavaScript 之前 阻塞渲染。这是因为 JavaScript 可能会修改 DOM 或 CSSOM 树，而这些修改可能会影响页面的布局和样式，因此浏览器必须等待 JavaScript 执行完毕后再继续渲染。

  • async 和 defer 属性：为了避免 JavaScript 阻塞渲染，现代浏览器提供了 async 和 defer 属性：

    • async：当使用 async 属性时，浏览器会异步加载 JavaScript 文件，但它会在加载完成后立即执行 JavaScript，可能会中断当前的渲染过程，因此应谨慎使用。
    • defer：当使用 defer 属性时，浏览器会异步加载 JavaScript 文件，但保证在 HTML 文档解析完成后再执行 JavaScript，因此不会阻塞渲染。这通常用于非关键的 JavaScript 文件。

  • 阻塞渲染的影响：如果 JavaScript 文件较大或执行时间较长，它可能会拖慢页面的渲染速度，造成用户体验不佳。因此，通常建议：

    • 将 <script> 标签放在页面的底部，确保 HTML 内容先行加载。
    • 使用 defer 或 async 属性来优化 JavaScript 文件的加载顺序。

总结

  • CSS 文件：默认情况下，CSS 文件的加载会 阻塞渲染，直到 CSS 文件加载并应用完毕。为了避免影响渲染性能，可以采用异步加载 CSS 或内联关键 CSS 样式。
  • JavaScript 文件：如果 JavaScript 文件没有使用 async 或 defer 属性，默认情况下，JavaScript 的加载和执行会 阻塞渲染，直到文件执行完成。为了优化性能，建议使用 defer 或将脚本标签放置在页面底部。

优化 HTML、CSS 和 JavaScript 文件的加载顺序，合理利用 async 和 defer 属性，可以有效提高页面的加载速度和渲染性能。


原文地址：https://blog.csdn.net/p_s_p/article/details/143747676

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024