低渲染成本这无助于降低 React 的

rmruhul

也有助于显着降渲染成本；React 仍然会协调整个树并排列 1,000 个组件的旧相关节点。但是，如果您的昂贵部分在于浏览器渲染而不是直接渲染，那么这将会有所帮助。

德鲁·麦克莱伦：这听起来很有希望，而且这是一个原生浏览器 API，而不是 React 的一部分，不是吗？

伊万·阿库洛夫：对，就是这样。它是一个单一的 CSS 属性。实际上有两个 CSS 属性。第一个属性字面上称为内容可见性。我认为第二个是内容固有高度、内容固有宽度，所以有两个属性。复杂的部分，复杂的事情……实际上，内容可 电报号码数据 见性和虚拟化的挑战性在于，如果您的列表项具有动态高度或动态宽度（如果至少这是原因的话），您就无法真正做到这一点。或者实际上，你不能这样做。浏览器无法知道元素的高度和宽度，除非您尝试减小它。要么采用虚拟化方法，要么采用内容可见性方法。

伊万·阿库洛夫：问题是，如果您有具有运行宽度或运行高度的项目，并且您肯定不知道它们的高度，那么虚拟化它们将会很困难，因为滚动条会一直在跳跃您正在滚动该列表，因为浏览器将渲染此元素，渲染此权重并调整页面高度。这就是挑战。

德鲁·麦克莱伦：这始终是在网络上布局的一个经典挑战，不是吗？在渲染之前就知道高度是多少，甚至是图像之类的东西。

伊万·阿库洛夫：是的。

德鲁·麦克莱伦：与仅构建 HTML 和 CSS（某种标准服务器端渲染页面）相比，在 React 这样的框架上构建的关键区别之一是，您可以在加载性能与运行时性能之间进行平衡。有办法吗？其中一个比另一个更重要吗？一旦网站完成初始加载，您是否应该针对其性能进行优化？或者加载优先级对于阻止访问者在加载之前就离开更重要吗？或者说是两者的平衡？

伊万·阿库洛夫：这确实取决于。我的观点是，这实际上取决于你在做什么。如果您是静态网站，或者您是网站或应用程序，或者需要优化的内容，例如 SEO 或在该排名和广告成本中展示广告，那么加载性能也将更加重要，因为这就是搜索排名的基础。这就是广告费用的基础。

伊万·阿库洛夫：如果你正在做一些事情，如果你是一个复杂的单页应用程序，用户会访问它并暂时做一些事情。我知道，你是一个图形编辑器，无论什么，你用 JavaScript 做一些复杂的事情，那么趋势表现可能更重要，因为这实际上更难衡量。其效果更难衡量。



伊万·阿库洛夫：我相信运行时性能在这里更为重要，因为这就是用户......因为这会影响整体用户满意度。如果你的速度很慢，那么用户就会把应用程序留给竞争对手，并向你抱怨。事实上，这是衡量这一点的一种方法。

德鲁·麦克莱伦：对于单页应用程序，是否有一种有意义的方法可以评估应用程序不同部分的性能？假设我们应用程序的这一部分很慢，或者我们应用程序的那部分很慢，而这部分很好。我的意思是，传统上，我们会查看页面以了解它们的性能。但在单页应用程序中，您加载的不仅仅是一个页面，实际上您正在构建整个框架以实现初始渲染。那么，有没有一种好方法来衡量整个应用程序的性能呢？

伊万·阿库洛夫：这是个好问题。因此，有几种方法可以解决这个问题。第一种方法是最简单的方法，但可能通常不是您想要的。您可以做的一件事是，您可以使用内置的浏览器 API 来收集核心 Web Vitals 数据，并收集该数据并将其保存在 Google Analytics 或其他存储等位置，然后聚合该数据并查看您的第一个输入延迟，您的累积布局在应用程序渲染的整个过程中发生变化，等等，但这是一个非常高水平的审查，它可能不会是您想要的。