避免大型、复杂的布局和布局抖动布局是浏览器计算元素几何信息的地方：元素在页面上的大小和位置。每个元素都将具有基于所使用的CSS、元素的内容或父元素的显式或隐式大小信息。该过程在Chrome、Opera、Safari和InternetExplorer中称为布局。在Firefox中，它被称为回流，但过程实际上是相同的。与样式计算类似，布局成本最直接关心的是：需要布局的元素数量。这些布局的复杂性。简而言之：布局通常适用于整个文档。DOM元素的数量影响性能；你应该尽可能避免触发布局。评估布局模型性能；较新的Flexbox通常比旧的Flexbox或基于浮动的布局模型更快。避免强制同步布局和布局颠簸；读取样式值，然后进行样式更改。尽可能避免布局当您更改样式时，浏览器会检查是否有任何更改需要计算布局并更新渲染树。更改“几何属性”（例如宽度、高度、左侧或顶部）需要布局过程。.box{宽度：20px；height:20px;}/***改变宽度和高度*触发布局。*/.box--expanded{width:200px;height:350px;}布局几乎总是应用于整个文档。如果您有很多元素，则需要很长时间才能弄清楚在哪里以及如何调整它们的大小。如果布局无法避免，关键是再次使用ChromeDevTools，看看需要多长时间，并确定布局是否是瓶颈的原因。首先，打开DevTools，转到Timeline选项卡，单击一条记录并与您的站点进行交互。当您停止记录时，您会看到网站性能的细分：在上面的示例中向下钻取框架时，我们看到在布局内花费了20多毫秒，而在动画屏幕上花费了16毫秒显示框架时，这太高了。您还可以看到DevTools会告诉您树的大小（在本例中为1,618个元素），以及需要布置多少个节点。避免强制同步布局按以下顺序将网页传送到屏幕：首先运行JavaScript，然后是样式计算，然后是布局。但是，可以使用JavaScript强制浏览器提前执行布局。这称为强制同步布局。首先要记住的是，当JavaScript运行时，前一帧的所有旧布局值都是已知的，可供您查询。所以，例如，如果你想在帧的开头写出一个元素（我们称之为“盒子”）的高度，你可以这样写：//Scheduleourfunctiontorunatthestartoftheframe.requestAnimationFrame(logBoxHeight);functionlogBoxHeight(){//获取框的高度（以像素为单位）并将其注销。console.log(box.offsetHeight);}如果你在询问高度之前改变盒子的样式，事情就会起作用问题：functionlogBoxHeight(){box.classList.add('super-big');//获取框的高度（以像素为单位）//并将其注销。console.log(box.offsetHeight);}现在，为了回答高度问题，浏览器必须首先应用样式更改（因为添加了超大类）然后运行布局。只有这样它才会返回正确的高度。这是不必要的并且可能是昂贵的工作。所以你应该总是批量读取样式并首先执行它（浏览器可以使用前一帧的布局值）然后进行任何写入：正确完成以上功能将是：functionlogBoxHeight（）{//获取框的高度像素//并将其注销。console.log(box.offsetHeight);box.classList.add('super-big');}在大多数情况下，您不需要应用样式然后查询值；使用最后一帧的A值就足够了。同步运行样式计算和布局并早于浏览器预期是一个潜在的瓶颈，而不是您通常想要做的事情。避免布局抖动有一种方法会使强制同步布局变得更糟：快速连续地进行大量布局。看看这段代码：functionresizeAllParagraphsToMatchBlockWidth(){//使浏览器进入读写循环。对于(vari=0;i
