前言有一天突然脑子里冒出一个词“双飞翼”，这是淘宝提出很久的三栏布局优化方案前。但是，时间久了，我不记得（换句话说，我不明白）我为什么提出这个布局。昨天在顺丰发了个问题，很久没人回答。还好@王能全提醒了我，我终于想起了“双飞翼”的全部含义。我想通过这篇文章与您分享这段旅程。圣杯&双飞翼说到“双飞翼”，就不得不提到“圣杯”。两者都是针对三列布局的优化解决方案。左到右。问题是nothing问题是，如果我们想让中间的主要部分先显示，可以做布局优化。因为浏览器渲染引擎是异步构建和渲染渲染树的（谁先构建就先显示），然后再推进部分优先渲染。所以，外国前人提出“圣杯”布局，目的是利用css来配合上面的DOM结构，优化DOM渲染。简单看一下“圣杯”布局，这不是重点。圣杯布局演示：https://jsfiddle.net/zwwill/p...mainleftright使用relative相对定位，float（必要时请float，这里使用overflow:hidden;方法）和negativemargin将左右部分“安装”到wrapper的两边，作为命名为“圣杯”。具体思路我就不重复了，网上到处都有解释。圣杯有问题当然正常情况下是没有问题的，但是在特殊情况下这种方案的弊端就会暴露出来。如果浏览器被无线缩小，“圣杯”将被“打破”。如图所示，当主要部分的宽度小于左侧部分的宽度时，会出现布局混乱。因此，淘宝优化了“圣杯”的缺点，提出了“双飞翼”的布局。双飞翼布局demo：https://jsfiddle.net/zwwill/5...同样，我们看一下短代码mainleftright也是使用浮动和负边距，不同的是没有使用相对定位，而是增加了dom结构，增加了一层。真正修复了grail布局缺陷。为什么要设计“双飞翼”的布局双飞翼的布局表面上看起来很优秀，但是仔细想想，为什么还要多加一层dom树节点呢？这不是增加了将css样式规则表和dom树合并成布局树的计算量吗？数量？看来绝对定位也能解决这个问题。想一想，我们可以使用绝对布局将左右侧边栏定位到两侧吗？圣杯布局好像不会有问题吧？演示：https://jsfiddle.net/zwwill/a...mainleftright没有浮动（不需要浮动）也没有负边距，直接用absolute绝对定位，好像更好？但是仔细想想，纯绝对定位是有问题的，“高度不可控”。我们假设如果left部分的高度比main高，是不是因为left支撑不住整个wrapper？“四不四”~~！那我们就来看看双飞翼和圣杯的情况吧。“应该被刺死”~~！从这个角度来看，所有的解决方案都或多或少存在问题。总的来说，不管左主右大小，《双飞翼》的布局都能正常显示，嗯~~真的很优秀。锤子和钉子综上所述，《双飞翼》的布局更胜一筹。然而，这是一个“锤子和钉子”的问题。我们应该寻找带钉子的锤子，而不是带锤子的钉子，因为当您拥有最大的锤子时，您看到的一切都是钉子。唉~我又装逼了。(￣︶￣)/说白了，就是对症下药，没有最好的办法，只有最合适的。关于三栏布局，我给大家列一张对照表，方便大家快速选择。优缺点圣杯结构简单，没有多余的dom层。当dom层中间部分的宽度小于左侧时，布局混乱。绝对定位结构简单，无需清洗。Layer，增加渲染树产生的计算量以上是我个人的理解，如有不对或可以补充的地方，请指点。另外，关于CSS布局方案和前端性能优化部分，移步文章多行多列布局方案总结前端性能优化总结转载请注明出处作者：木鱼zwwill首发地址：https：//github.com/zwwill/布洛...
