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

使用以下步骤最小化需要布局的节点数：

使用相对定位的容器和绝对定位的儿童来处理书挡和居中布局需求：

完全从文档流中删除绝对定位的元素。这意味着它们对它们的父元素或它们在源代码中出现的元素完全没有影响。因此，绝对定位的元素将与其他内容重叠，除非您采取措施来防止它。当然，有时候，这种重叠正是你想要的，但是你应该意识到这一点，以确保你得到你想要的布局！

根据元素的位置避免动画：

处理程序根据图像的offsetTop值计算每个图像的左边属性。这会强制浏览器立即执行新布局，以确保它提供正确的值。在每个动画帧期间强制布局是页面上janky动画的原因。

避免依赖于DOM元素计算值的计算：

作为一般经验法则，如果在帧完成之前要求从DOM返回几何值，您将发现自己处于“强制同步布局”，如果频繁重复，这可能是一个很大的性能瓶颈或者为大型DOM树执行。

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

当浮动框之前的当前行中的任何内容在浮动的另一侧的第一个可用行中被回流。

如果可能，请使用display: flex代替display: table或基于JavaScript的布局：

新的flexbox代码具有更少的多遍布局代码路径。你仍然可以很容易地击中多遍代码路径（例如flex-align：stretch通常是2遍）。一般来说，在常见情况下它应该快得多，但你可以构建一个同样慢的情况。也就是说，如果你能摆脱它，常规的块布局（非浮动）通常会比新的flexbox快或快，因为它始终是单通道。但是新的flexbox应该比使用表或编写自定义的JS-base布局代码更快。

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

根据源内联元素的“vertical-align”属性值，内联框垂直对齐。如果元素具有此属性的值“top”或“bottom”，则只有生成的框的高度会影响行框高度计算;在完全构造线框之前，框不能对齐。请注意，如果行框中的所有框都沿着它们的底部对齐，则行框将正好是最高框的高度。但是，如果盒子沿着共同的基线对齐，则线盒顶部和底部可能不会触及最高盒子的顶部和底部。

对于需要垂直放置的多个内联元素，使用固定高度的inline-block：

计算行框中每个内联级别框的高度。对于替换元素，内联块元素和内联表元素，这是其边距框的高度;对于内联框，这是它们的“行高”。

使用shouldComponentUpdate优化渲染：

在实践中，任何复杂的事情都可能需要shouldComponentUpdate以获得可接受的性能。编写合理有效的shouldComponentUpdate反过来需要可以快速比较的基础数据，因此例如当前对可通过检查单个引用来测试相等性的不可变数据结构的兴趣。因此，使用React进行渲染的选择确实会影响底层数据的存储方式，这会破坏任何关于真正将视图逻辑与业务逻辑分离的主张。

<强>参考

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

1 个答案: