如何处理昂贵的布局和恒星计

ruhul18

们将讨论诸如昂贵的渲染之类的问题，例如当您有一个需要一段时间才能渲染的组件时，如何识别它，如何优化它。我们将讨论像 componentDidMount 这样昂贵的效果。如果您使用玻璃组件或使用功能组件。我们将讨论网络服务器渲染。当您单击按钮并导致整个应用程序渲染并导致应用程序变慢时该怎么办。当您在其中安排一些渲染时，我们将讨论级联渲染。

伊万·阿库洛夫：我们还将讨论水合、操作、算，以及如何识别它们、如何修复它们。这就是我打算展示的问题。如果合适的话也许还有别的东西。好吧，我们还将讨论从部分水合开始的一系列解决方案，即水合通过纠正钩子和更高级的第三方库的方法来帮助优化网络服务器渲染并使组件渲染速度更快。

伊万·阿库洛夫：我们将介绍有助于检测渲染的特定颜色（渲染白色）的工具。我们还将 斯里兰卡电话号码表 讨论虚拟化或内容可见性、CSS 属性或其他内容等解决方案。CSS包含属性，很少使用，也不是真正已知的技巧，但它有助于性能优化。

伊万·阿库洛夫：我们还将研究虚拟化和内容可见性等解决方案。内容可见性、CSS 属性和其他有助于优化布局抖动、优化昂贵的恒星计算的内容。这就是我打算谈论的内容。但主要重点是向与会者展示最常见的部门、发生的最常见问题以及识别、分析和解决这些问题的具体方法。所以，这就是我的目标。

德鲁·麦克莱伦：听起来，是的，您将为与会者提供他们识别和解决自己的性能问题所需的一切，这听起来真的很棒。所以，我今天学习了有关 React 性能的所有内容。伊万，你最近学到了什么？

伊万·阿库洛夫：我最近的一次经历是……我一直在帮助客户优化他们网站的一个大冲突点。它实际上与 React 或 React 的性能无关。这不是表演。他们根本不使用 React。但挑战在于，我们已经在他们的网站上做了几乎所有我们能做的事情，就像几乎所有......

伊万·阿库洛夫：我们几乎已经获得了所有唾手可得的成果。我们已经优化了一切有意义的事情。该页面实际上太大了，浏览器分步渲染八次。它呈现。它分步骤解析它。它解析几百行，然后渲染这几百行，然后解析接下来的几百行，然后渲染这几百行。它呈现标题字段。它呈现主要内容字段的某些部分。之后，它会渲染主要内容的另一部分。



伊万·阿库洛夫：最终的结果是，如果浏览器一次性渲染所有内容，那么块渲染和推动的大冲突点会比我预期的要高得多。我没有看到他们通常在应用程序中看到的任何典型原因会推高大冲突点。

伊万·阿库洛夫：不管怎样，我现在正在做的是深入研究 Chrome 的内部结构，并试图弄清楚它在渲染该页面时到底做了什么，为什么会发生分块渲染，以及我们可以做些什么来确保它不会发生。不会发生。确保页面一次性呈现。事实上，我并没有什么学习经验。我只是希望我不需要从头开始编译。

德鲁·麦克莱伦：希望如此。亲爱的听众，如果您想了解 Ivan 的更多信息，您可以在 Twitter 上找到他，地址为 @iamakulov。他的个人网站是iamakulov.com。您可以在 3perf.com 网站上找到他的代理机构 Perf Perf Perf。如果您想了解有关 Ivan 关于 React 性能的研讨会的更多信息，您可以在smashingconf.com 上找到所有信息。感谢您今天加入我们，伊万。你有什么临别赠言吗？

伊万·阿库洛夫：小心，快点，享受你的生活。