参考：
语雀内容

image.png

强制布局引起的性能问题，常见于修改样式后，立即读取布局属性，这样的操作中，违反了上面的正常流程。
特别是在循环遍历中，如此操作，往往引起布局抖动，造成性能问题。

1 示例参考A：

chrome devtool官方的 诊断强制同步布局
示例地址：
https://googlesamples.github.io/web-fundamentals/tools/chrome-devtools/rendering-tools/forcedsync.html

1.2 强制布局中：

image.png
放大细节
image.png
在js执行过程中，插入布局

image.png

1.3 去掉强制布局：

  1. function update(timestamp) {
  2.     for (var m = 0; m < movers.length; m++) {
  3.       movers[m].style.left = ((Math.sin(m + timestamp/1000)+1) * 500) + 'px';
  4.     }
  5.     raf = window.requestAnimationFrame(update);
  6. }

image.png

1.4 动画对比

333331111.mp4 (377.84KB)

1122.mp4 (385.57KB)

2 示例参考B

参考google的性能优化课程
地址:
http://output.jsbin.com/aqavin/2/quiet

2.1 强制布局中

当获取offsetWidth宽度时，浏览器就必须计算该宽度，就需要布局
layout就跑到stlyle前面了，这样不算大问题
image.png
但是接着修改了元素的样式，导致上一次的layout就无效，就需要重新layout

  1. if (goSlow) {
  2.       while (i--) {
  3.         // looking at the sizer's offsetWidth on each loop - this is the slow bit
  4.         ps[i].style.width = sizer.offsetWidth + 'px';
  5.       }
  6. }

image.png
image.png

2.2 去掉引发布局的样式

  1. while (i--) {
  2.   // looking at the sizer's offsetWidth on each loop - this is the slow bit
  3.   size = sizer.offsetWidth;
  4.   // 样式color并不会触发布局
  5.   ps[i].style.color = "red";
  6. }

image.png
只会触发样式计算
image.png

2.3 完全去掉强制布局

在循环初期读取width，会使用上一帧的布局结果。

  1. // cache the sizer's width, this avoids multiple layouts
  2.       size = sizer.offsetWidth;
  3.       while (i--) {
  4.         ps[i].style.width = size + 'px';
  5.       }

image.png