您想知道响应式网页、更流畅的用户体验和优异的 INP 分数的秘密吗？
这是高效的渲染工作。
这通常是通过控制屏幕外内容的渲染来实现的，从而减轻浏览器在初始页面加载期间执行那些不立即需要的任务的负担。
在以下几行中，您将学习如何利用content-visibility CSS 属性来显著提高您网站的性能，提升您的核心网络生命力，并增强用户体验。
继续阅读。
通过对下一次绘制的交互 (INP) 来量化响应度
用户在页面上停留的时间90%是在页面加载之后。
换句话说，投入精力加快初 工程师数据库 始页面加载速度至关重要，但用户开始与网站交互后的网站行为也同样重要。
它有故障吗？它能提供平滑的滚动吗？它响应迅速吗？
所有答案都隐藏在您的 INP 分数后面。
交互至下一次绘制是一项以用户为中心的性能指标，是首次输入延迟的后继者，用于评估网页的响应能力。它专门测量网页对用户输入做出视觉响应所需的时间。
这里的关键词是“视觉上”。
没人期望您的所有交互都在几毫秒内完成。这根本不可能。要获得良好的 INP 分数和核心网络指标，您需要做的就是为访问者在您网站上的操作提供即时的视觉反馈。
回到我们文章的开头，确 如何选择有吸引力的博客文章创意？：操作指南。 保浏览器能够高效地呈现您的页面是获得优异分数和实际体验的可靠方法。
影响渲染速度的两个关键因素是主线程和 DOM 大小。
主线程和 DOM 大小的作用
在深入探讨技术细节之前，让我们先做一些基本工作。
您的 INP 分数取决于浏览器与您的网站互动后向用户返回视觉反馈的速度。
为了使浏览器能够快速接收、处理和呈现反馈，其主线程必须卸载长时间运行的任务。
其中最大的罪魁祸首 AFB 目录 包括大量 JavaScript 资源，以及最后但并非最不重要的——过大的 DOM 尺寸。
整个过程就是这样。现在，让我们来揭秘每个部分。
主线程
主线程是主要的执行线程，处理与呈现网页相关的大多数关键任务，包括：
- HTML、CSS 解析
- JavaScript 执行
- 构建文档对象模型（DOM）
- 添加计算样式
- 生成布局树
- 创建油漆记录
当一个任务执行时间超过 50ms时，它就被认为是一个长任务。这主要是因为运行的 JavaScript 文件很多或 DOM 很大。
你应该知道主线程每次只能执行一个任务。因此，任务执行的时间越长，你的网站就会显得越慢。
为什么？
假设您有一个具有交互功能的网页，例如复杂的数据可视化或动态用户界面。用户触发操作（例如单击按钮），这会启动繁重的 JavaScript 计算（执行时间超过 50 毫秒）。
这会自动对您网站的性能和响应能力带来一些挑战：
- 这个长时间的计算会阻塞线程，阻止其执行其他任务，如处理用户输入、呈现更新或执行其他脚本。
- 在计算过程中，用户可能会尝试与页面的其他部分进行交互 – 滚动、点击其他按钮或在输入字段中输入内容。但是，这些操作不会立即得到处理，页面会显示为冻结或无响应。
- 如果用户交互应该触发视觉变化（例如单击时突出显示按钮），则此反馈将被延迟，直到长时间运行的任务完成。
简而言之，从主线程卸载任务至关重要，我们知道至少7 种方法可以做到这一点。
DOM（文档对象模型）
主线程的任务之一是解析 HTML。
这意味着浏览器将数据（HTML 标记）转换为 DOM。
DOM 将页面结构表示为浏览器用于在屏幕上呈现内容的对象树。
更大的 DOM 通常意味着浏览器需要管理更多的节点（元素、文本、注释等）。
当DOM 较大时，主线程需要做更多工作。将 HTML 解析为 DOM、应用 CSS 样式、布局页面以及在发生更改时（例如通过 JavaScript 操作）重新渲染页面的某些部分需要更长的时间。
大型 DOM 树也会减慢页面交互速度，因为每次用户交互（如点击、滚动和打字）通常都需要浏览器重新计算 DOM 各个部分的样式和布局。
因此，一个好的经验法则是页面的DOM 大小最多为 1400 个节点。
