layout是浏览器计算元素的几何信息：元素在页面上的的大小和位置。
每个元素都有明确的亦或含蓄的大小信息，这些信息基于我们使用的css以及元素的内容被高和父亲元素。
这个过程在 Chrome, Opera, Safari, 和Internet Explorer中叫做Layout.在火狐浏览器中叫做Reflow。
- Layout的范围是整个文档
- DOM元素的数量将会影响表现性能：你应该尽可能的禁止触发layout
- 估计layout模型的性能：新的FlexBox比原来的基于float的layout模型要快的多
影响layout性能的是：
- 需要layout的元素数量
- layout的复杂程度
尽可能避免使用layout
当你修改样式的时候，浏览器会检查你的修改是否会要求layout被计算，如果有的话讲更新render tree。
会触发layout的属性都是“几何的属性”，例如： widths, heights, left, or top 等
.box {
width: 20px;
height: 20px;
}
/**
* Changing width and height
* triggers layout.
*/
.box--expanded {
width: 200px;
height: 350px;
}
layout作用于整个文档，所以如果有许多的元素的话，将花费很长的时间来计算元素的位置和大小。
如果不可避免使用layout，那么使用Chrome开发者工具的timeline来追踪查看每个layout的耗费。
我们可以看见上面我们在layout上面花费了20ms多，如果我们在动画上花费了16ms，那么这个动画就耗费太多资源了。
你同样可以看见开发者工具总告诉我们树的大小（在上面的情况中有1618个元素），也告诉我们多少节点需要被layout。
Note
- 想要一个确切的css属性清单确认哪些属性触发layout，paint和 dimensions ？点击这里：CSS Triggers.
用flexbox替代老的layout模型
网络有一系列的layout模型，一些的支持性相对于其他模型支持性更好。
旧的layout模型允许我们将元素相对定位，亦或绝对定位，亦或float布局在屏幕上。
下面的截图展示了一个layout（在1300个box上使用float布局）的耗费，这是一个手动的例子，因为现实的应用中我们会使用一系列的定位方式来定位元素。
如果我们使用FlexBox来定位元素，下面将展示不同：
现在我们在布局上节省了一些时间（例子中3.5msVS14ms），记住上面的对比是作用在相同的元素且产生相同的效果。
虽然很少的浏览器支持flex布局，但是为了很好的性能，你还是要进行尝试！
查看flexbox布局支持比float少的文档： less widely supported than floats
总而言之，不管你使用的浏览器是否支持flexBox，你都应该尽可能的避免触发layout.
避免强制执行layout
将帧运输到屏幕上的顺序是下面这样的：
先运行js，之后计算样式，然后layout。
但是，我们可以强迫浏览器在js之前执行layout。这被叫做强制执行layout。
首先要知道的是在所有旧的layout上面js可以访问之前帧的任何内容。
下例中，我们想在帧的开始书写一个元素（让我们把它叫做“盒子”）的高度，我们书写代码如下：
// Schedule our function to run at the start of the frame.
requestAnimationFrame(logBoxHeight);
function logBoxHeight() {
// Gets the height of the box in pixels and logs it out.
console.log(box.offsetHeight);
}
如果我们在js获取盒子高度之前就改变了盒子的高度样式，那么会产生问题：
function logBoxHeight() {
box.classList.add(‘super-big‘);
// Gets the height of the box in pixels
// and logs it out.
console.log(box.offsetHeight);
}
现在，浏览器为了计算js中的高度问题，浏览器必须先运行样式的改变（因为代码中加入了super-class样式），然后运行layout。只有这样才能返回正确的高度。这是不必要且耗费巨大的工作。
因为你总是要先读取样式（样式信息保存在之前的帧的layout值中），然后再进行任何的书写操作：
正确的代码是这样的：
function logBoxHeight() {
// Gets the height of the box in pixels
// and logs it out.
console.log(box.offsetHeight);
box.classList.add(‘super-big‘);
}
在大多数情况下你不必要先应用样式然后计算值；使用最后一帧的值将变得绰绰有余。强制layout在js之前运行将会耗费巨大，且浏览器将会进入瓶颈，这是我们不想看到的。
避免layout thrashing
比上面强制执行layput更加糟糕的是：连续执行强制layout。
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‘;
}
}
每一个循环的时候都将读取box的offWidth的值并且将其赋值给一个paragraph(paragraphs[i].style.width)。在洗一次循环的时候，浏览器会计算已经更改的布局，然后再进行layout，每一个循环都会这样的进行！
更改之后变得更加可度：
// Read.
var width = box.offsetWidth;
function resizeAllParagraphsToMatchBlockWidth() {
for (var i = 0; i < paragraphs.length; i++) {
// Now write.
paragraphs[i].style.width = width + ‘px‘;
}
}
如果你想确保安全性，你可以在 FastDOM网站上检查。该网站好处。。。。你试过就知道了