justcode.ikeepstudying.com
避免大型、复杂的布局和布局抖动, 防止页面抖动, 防止弹出窗口跳动 - Just Code
布局是浏览器计算各元素几何信息的过程:元素的大小以及在页面中的位置。 根据所用的 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; } …