避免大而复杂的布局和布局抖动布局是浏览器计算每个元素的几何信息的过程：元素的大小及其在页面中的位置。每个元素都将具有显式或隐式大小信息，具体取决于使用的CSS、元素的内容或父元素。此过程在Chrome、Opera、Safari和InternetExplorer中称为布局。在Firefox中叫做Reflow，其实过程是一样的。与样式计算类似，布局开销的直接考虑如下：需要布局的元素数量。这些布局的复杂性。布局的范围通常是整个文档。DOM元素的数量会影响性能；应尽可能避免触发布局。评估布局模型的性能；较新版本的Flexbox通常比旧版本的Flexbox或基于浮动的布局模型更快。避免强制同步布局和布局颠簸；先读取样式值，再进行样式更改。尽可能避免布局操作当您更改样式时，浏览器会检查是否有任何更改需要计算布局和更新渲染树。对宽度、高度、左侧或顶部等“几何属性”的更改需要布局计算。.box{宽度：20px；height:20px;}/***改变宽度和高度*触发布局。*/.box--expanded{width:200px;height:350px;}布局几乎总是适用于整个文档。如果元素很多，要弄清楚所有元素的位置和大小会花很长时间。如果无法避免布局，关键是使用ChromeDevTools查看布局花费了多长时间，并确定布局是否是瓶颈的原因。首先，打开DevTools，选择“Timeline”选项卡，点击“record”按钮，然后与您的网站进行交互。当您停止录制时，您会看到网站性能的详细分析：当查看上面示例中的框架时，我们看到超过20毫秒用于布局，而我们在动画中设置16毫秒以获取屏幕上的这种布局在构图时花费的时间太长。您还可以看到DevTools将考虑树的大小（在本例中为1618个元素）以及需要布置多少节点。注意：想要一份确切的列表，其中包含哪些CSS属性会触发布局、绘制或组合？查看CSS触发器。使用flexbox代替旧的布局模型网页有多种布局模型，其中一些比其他的得到更广泛的支持。最早的CSS布局模型允许我们相对、绝对或浮动元素在屏幕上定位元素。下面的屏幕截图显示了在1,300个盒子上使用浮动的布局开销。当然，这是一个人为的例子，因为大多数应用程序会使用各种方法来定位元素。如果我们更新此示例以使用Flexbox（Web平台的新模型），则会出现不同的情况：现在，对于相同数量的元素和相同的视觉外观，布局花费的时间要少得多（在本例中分别为3.5毫秒和14毫秒）。重要的是要记住，在某些情况下，Flexbox可能不是一个选项，因为它不像浮动那样得到很好的支持，但在可能的情况下，您至少应该研究布局模型对网站性能的影响，并采用一种模型来最小化页面的执行开销。无论如何，无论是否使用Flexbox，您都应该尽量避免在应用程序的高压力点期间完全触发布局！避免强制同步布局将帧发送到屏幕遵循以下顺序：首先运行JavaScript，然后计算样式，然后进行布局。但是，可以使用JavaScript强制浏览器提前执行布局。这称为强制同步布局。首先要记住的是，当JavaScript运行时，前一帧的所有旧布局值都是已知的，可供您查询。所以如果（例如）你想在帧的开头写一个元素的高度（让我们称之为“盒子”），也许写一些这样的代码：//安排我们的函数在帧的开头运行frame.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
