【第3323期】性能优化：布局抖动和强制回流

文章预览

前言 介绍了 Web 性能优化中的布局抖动和强制回流问题，并提供了避免这些问题的策略。今日前端早读课文章由 @ikoofe 翻译分享，公号：KooFE 前端团队。 正文从这开始～～ 布局是浏览器计算各元素几何信息的过程，即元素的大小以及在网页中的位置。根据所使用的 CSS、元素内容或父元素，每个元素都将具有显式或隐式大小信息。此过程在 Chrome（以及 Edge 等派生浏览器）和 Safari 中称之为布局。在 Firefox 中称为回流 (Reflow)，但过程实际上是相同的。 异步布局 当页面更改样式时，浏览器会检查这些变更是否需要计算布局，以及是否需要更新渲染树。为了在屏幕上渲染出一帧的内容，浏览器会首先运行 JavaScript，然后计算样式，最后运行布局。我们把这种布局方式称之为异步布局 (Asynchronous Layout)，也被称作异步回流 (Asynchronous Reflow)。 强制同步布局 ………………………………