布局是浏览器计算各元素几何信息的过程：元素的大小以及在页面中的位置。 根据所用的 CSS、元素的内容或父级元素，每个元素都将有显式或隐含的大小信息。此过程在 Chrome、Opera、Safari 和 Internet Explorer 中称为布局 (Layout)。 在 Firefox 中称为自动重排 (Reflow)，但实际上其过程是一样的。 与样式计算相似，布局开销的直接考虑因素如下： 需要布局的元素数量。 这些布局的复杂性。 TL;DR 布局的作用范围一般为整个文档。 DOM 元素的数量将影响性能；应尽可能避免触发布局。 评估布局模型的性能；新版 Flexbox 一般比旧版 Flexbox 或基于浮动的布局模型更快。 避免强制同步布局和布局抖动；先读取样式值，然后进行样式更改。 尽可能避免布局操作 当您更改样式时，浏览器会检查任何更改是否需要计算布局，以及是否需要更新渲染树。对“几何属性”（如宽度、高度、左侧或顶部）的更改都需要布局计算。 .box { width: 20px; height: 20px; } /** * Changing width and height * triggers layout. */ .box--expanded { width: 200px; height: 350px; } […]