各位观众老爷，早上好（或者下午好，晚上好，取决于您什么时候看到这篇“讲座”）。今天咱们聊聊前端性能优化里一个让人头疼，但又不得不面对的家伙：Layout Thrashing，中文名叫“强制同步布局”。 什么是Layout Thrashing？ 简单来说，Layout Thrashing 就是浏览器一会儿算布局，一会儿又得重新算，来回折腾，导致页面卡顿。你想啊，本来浏览器舒舒服服地按部就班，先渲染再重绘，结果你突然插一脚，让它算完布局立马又得重新算，它能高兴吗？ 这就像你正在专心致志地写代码，突然有人让你算个数学题，算完又让你继续写代码，效率肯定大打折扣。 更技术一点解释，它发生在 JavaScript 代码中，当我们先读取了某些 DOM 元素的布局信息（比如 offsetHeight, offsetWidth, getComputedStyle），然后立即修改了 DOM 结构或者样式，紧接着又去读取 DOM 布局信息时，浏览器为了保证读取到的值是最新的，不得不立即重新计算布局。这种频繁的布局计算和重绘，就是 Layout Thrashing。 Layout Thrashing 的罪魁祸 …