布局开销的直接考虑因素
1 .需要布局的元素数量
2 .布局的复杂性
3 .
经可能避免布局操作
1 .布局几乎作用到整个文档。如果有大量元素，将需要很长事件来算出所有元素的位置和尺寸
2 .如果无法避免布局的时候，还是要使用chrome Dev Tools来查看布局需要花多长时间，确定布局是否为造成瓶颈的原因，打开记录，与网站交互，对得到的结果进行分析
3 .在仔细研究时发现，如果超过20毫秒的时间在布局上的话，当我们在动画中设置16毫秒来获取屏幕上的框架时，这个布局时间就太长了
4 .
使用felxbox而不是较早的布局模型
1 .相同元素和相同数量的div，flex的布局时间比传统布局少80%的时间
避免强制同步布局
https://developers.google.com/web/fundamentals/performance/rendering/images/avoid-large-complex-layouts-and-layout-thrashing/frame.jpg
1 .将一帧送到屏幕会采用如下顺序
1 .js运行，计算样式
2 .布局
3 .js可以强制浏览器提前执行布局，这就是强制同步布局
4 .js执行运算的时候，来自上一帧所有的布局都是已知的，并且可供查询
5 .但是，如果想在查询这个高度的之前，已经更改样式的话，就会出现问题
function logBoxHeight() {
box.classList.add('super-big');
// Gets the height of the box in pixels
// and logs it out.
console.log(box.offsetHeight);
}
为了回答高度问题，浏览器必须先应用样式更改，这时才能返回正确的高度。这是不必要的，也是开销很大的
6 .正确的操作时，浏览器应该先批量读取样式并执行，这时浏览器可以使用上一帧的布局值，然后执行操作
function logBoxHeight() {
// Gets the height of the box in pixels
// and logs it out.
console.log(box.offsetHeight);
box.classList.add('super-big');
}
//大部分情况下，并不需要应用样式之后，然后查询，使用上一帧的值就够了。
避免布局抖动
1 .一种比强制同步布局更糟糕的情况就是，接二连三的大量的执行这种布局
function resizeAllParagraphsToMatchBlockWidth() {
// Puts the browser into a read-write-read-write cycle.
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.width = box.offsetWidth + 'px';
}
}
2 .正确的修改方式
var width = box.offsetWidth;
function resizeAllParagraphsToMatchBlockWidth() {
for (var i = 0; i < paragraphs.length; i++) {
// Now write.
paragraphs[i].style.width = width + 'px';
}
}
