javascript - 我的初始页面加载布局阶段花费了超过 2 秒

Question

尽管我的 DOMContentLoaded 事件在约 500 毫秒时触发，但由于布局阶段非常长，第一次绘制发生在 3.5 秒左右。

任何人都可以告诉我为什么会发生这种情况以及如何解决它吗？目前该页面确实有大约 350 个节点，但我见过其他网站也有类似的节点和 50-100 毫秒的布局阶段。

我做错了什么？

附注这是一个通用的 React 应用程序，我使用 Heroku Standard 1x 和 FaSTLy CDN 来为其提供服务。

Answer 1

使用以下步骤来最大限度地减少需要布局的节点数量:

• 使用相对定位的容器和绝对定位的子容器来处理书挡和居中布局需求:

Absolutely positioned elements are removed entirely from the document flow. That means they have no effect at all on their parent element or on the elements that occur after them in the source code. An absolutely positioned element will therefore overlap other content unless you take action to prevent it. Sometimes, of course, this overlap is exactly what you desire, but you should be aware of it, to make sure you are getting the layout you want!

• 避免基于元素位置的动画:

The handler computes each image's left property based off of the image's offsetTop value. This forces the browser to perform a new layout immediately to make sure that it provides the correct value. Forcing a layout during every animation frame is the cause of the janky animations on the page.

• 避免依赖 DOM 元素计算值的计算:

As a general rule of thumb, if you ask for a geometric value back from the DOM before a frame is complete, you are going to find yourself with "forced synchronous layouts", which can be a big performance bottleneck if repeated frequently or performed for a large DOM tree.

• 如果可能，请将 float 替换为 inline-block:

Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.

• 如果可能，请使用 display: flex 而不是 display: table 或基于 JavaScript 的布局:

The new flexbox code has a lot fewer multi-pass layout codepaths. You can still hit multi-pass codepaths pretty easily though (e.g. flex-align: stretch is often 2-pass). In general, it should be much faster in the common case, but you can construct a case where it's equally as slow. That said, if you can get away with it, regular block layout (non-float), will usually be as fast or faster than new flexbox since it's always single-pass. But new flexbox should be faster than using tables or writing custom JS-base layout code.

• 仅使用 bottom 作为 vertical-align 属性的值:

The inline boxes are aligned vertically according to the 'vertical-align' property value for source inline elements. If an element has the values 'top' or 'bottom' for this property, only the height of the generated boxes affects the line box height calculation; the boxes cannot be aligned until the line box has been fully constructed. Note that if all the boxes in the line box are aligned along their bottoms, the line box will be exactly the height of the tallest box. If, however, the boxes are aligned along a common baseline, the line box top and bottom may not touch the top and bottom of the tallest box.

• 对于需要垂直定位的大量内联元素，使用固定高度的 inline-block:

The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'.

• 使用 shouldComponentUpdate 优化渲染:

In practice, anything complicated probably requires shouldComponentUpdate for acceptable performance. Writing reasonably efficient shouldComponentUpdate in turn requires underlying data that can be compared quickly, hence for example the current interest in immutable data structures that can be tested for equality by checking a single reference. And so the choice to use React for rendering does have implications for how the underlying data is stored as well, which undermines any claims about truly separating the view logic from the business logic.

引用文献

• React Fiber Architecture | Hacker News

• CSS absolute and fixed positioning - W3C Wiki

• The render tree relation to the DOM tree

• Diagnose Forced Synchronous Layouts | Web | Google Developers

• Analyze Runtime Performance | Web | Google Developers

• CSS Visual formatting model details, Section 10.8 - Line height calculations: the 'line-height' and 'vertical-align' properties

• CSS Visual formatting model, Section 9.5 - Floats

• Twitter Bootstrap Issue #17915: Use display:inline-block instead of float

• How to use inline-block for layout • iamsteve

• An inline-block intervention – Really Good Work!

• CSS Box Model and Positioning - CodeProject

• Flexbox layout isn't slow | Web | Google Developers

• Comparing Flexible Box Layouts | Neil's Place

• Avoid Large, Complex Layouts and Layout Thrashing | Web | Google Developers

• browser-perf