June 26, 2019
避免大型、复杂的布局和布局抖动, 防止页面抖动, 防止弹出窗口跳动
布局是浏览器计算各元素几何信息的过程:元素的大小以及在页面中的位置。 根据所用的 CSS、元素的内容或父级元素,每个元素都将有显式或隐含的大小信息。此过程在 Chrome、Opera、Safari 和 Internet Explorer 中称为布局 (Layout)。 在 Firefox 中称为自动重排 (Reflow),但实际上其过程是一样的。
与样式计算相似,布局开销的直接考虑因素如下:
需要布局的元素数量。
这些布局的复杂性。
TL;DR
布局的作用范围一般为整个文档。
DOM 元素的数量将影响性能;应尽可能避免触发布局。
评估布局模型的性能;新版 Flexbox 一般比旧版 Flexbox 或基于浮动的布局模… Read More