VScode插件：前端每日一题

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

HTML 文档渲染过程

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

解析 HTML 文件 浏览器开始加载 HTML 文件，并从上到下逐行解析。当遇到不同的 HTML 元素时，浏览器会生成相应的 DOM 树（Document Object Model）。每个元素都会被解析并转化为 DOM 节点。
解析 CSS 文件 在 HTML 中，当浏览器遇到 <link> 或 <style> 标签时，它会下载并解析相应的 CSS 文件，并将其应用到相应的 DOM 节点上，从而影响页面的视觉呈现。浏览器根据 CSS 的样式规则重新计算 DOM 树，生成渲染树（Render Tree）。
执行 JavaScript 文件 当浏览器遇到 <script> 标签时，它会下载并执行 JavaScript 文件。JavaScript 可以操作 DOM 和 CSSOM（CSS 对象模型），并动态地修改页面内容。因此，JavaScript 的执行也会影响渲染树的生成。
构建渲染树 浏览器基于 DOM 树和 CSSOM 树，生成渲染树。渲染树只包含实际渲染的元素（即那些具有视觉效果的元素），而不包括像 <head>、<meta>、<script> 等不需要渲染的元素。
布局与绘制 渲染树构建完成后，浏览器会进行布局（Layout）过程，计算每个元素在页面上的位置和大小。接下来，浏览器会根据这些计算结果绘制页面的各个部分，包括文字、图像、背景等。
显示页面 最终，浏览器将页面渲染到屏幕上并显示给用户。

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

CSS 文件：当浏览器遇到 <link> 或 <style> 标签时，它会下载并解析 CSS 文件。由于页面的外观依赖于 CSS，因此浏览器通常会 阻塞渲染，直到 CSS 文件加载完成并应用到 DOM 树上。这样做是为了防止页面呈现出不完整的样式，避免用户看到未应用样式的页面（闪烁或布局错乱的情况）。具体来说，CSS 的下载和解析是渲染的关键部分，浏览器会等 CSS 文件加载完成后，才会开始构建渲染树。为了优化页面加载，通常会将 CSS 文件放在页面的 <head> 部分，以确保 CSS 被优先加载和解析。
阻塞渲染的影响：如果 CSS 文件较大或网络较慢，可能会导致页面渲染延迟，影响用户体验。因此，现代的做法包括：- 异步加载 CSS：使用 media="print" 或 rel="preload" 属性来异步加载 CSS 文件，避免阻塞渲染。- CSS 内联：将关键的 CSS 样式直接写在 <style> 标签内，以确保快速应用基础样式。

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

属性，可以有效提高页面的加载速度和渲染性能。

标签： vscode 前端 ide

本文转载自: https://blog.csdn.net/p_s_p/article/details/143747676
版权归原作者 凉风听雪 所有，如有侵权，请联系我们删除。