摘要：于是，淘宝软对针对圣杯的缺点做了优化，并提出双飞翼布局。综合来看，不管的大小高低如何，双飞翼布局都能正常显示，嗯确实很优秀。锤子和钉子综上所见，双飞翼布局更胜一筹。
前言
突然有一天，脑之里不知怎地蹦出一个词，「双飞翼」，这是很久以前的淘宝提出的一种三栏布局优化方案，然而，时间久了已经不记得（换句话说是不理解）为啥要提出这个布局了，昨天在 SF 上发起了一个提问，但良久未有人答复，幸得@王能全是谁 提醒，终于回想起「双飞翼」的完整意义了。谨以此文同大家分享这段心路历程。
圣杯 & 双飞翼说到「双飞翼」就不得不提及「圣杯」，两者均为三栏布局的优化解决方案如下图
常规情况下，我们的布局框架使用以下写法，从上到下，从左到右。
header main
问题倒是没什么问题，然而，如果我们希望中部 main 部分优先显示的话，是可以做布局优化的。
因为浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），那么将
header main
于是乎，国外的前辈就提出了「圣杯」布局，目的就是通过 css 的方式配合上面的 DOM 结构，优化 DOM 渲染。
我们来简要地了解一下「圣杯」布局，这不是重点。
圣杯布局demo ：https://jsfiddle.net/zwwill/p...
header main
使用了 relative 相对定位、float（需要请浮动，此处使用 overflow:hidden; 方法）和 负值 margin ，将 left 和 right 部分「安装」到 wrapper 的两侧，顾名「圣杯」。具体的思路我就不再做赘述了，网上到处都是解释。
圣杯有问题当然，正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线变窄，「圣杯」将会「破碎」掉。如图，当 main 部分的宽小于 left 部分时就会发生布局混乱。
于是，淘宝软对针对「圣杯」的缺点做了优化，并提出「双飞翼」布局。
双飞翼布局demo ：https://jsfiddle.net/zwwill/5...
同样的我们来看简码
header main
同样使用了 float 和 负值 margin,不同的是，并没有使用 relative 相对定位 而是增加了 dom 结构，增加了一个层级。确实解决了圣杯布局的缺陷。
为什么要设计「双飞翼」布局双飞翼布局表面上看是很优秀，但是细细想来，为什么要多加一层 dom 树节点，这岂不是增加了 css 样式规则表和 dom 树合并成布局树的计算量吗？
好像绝对定位也可以解决这个问题细想想，我们可以使用绝对布局，将左右侧边栏定位到到两侧啊？好像也不会出现圣杯布局的毛病？
demo ：https://jsfiddle.net/zwwill/a...
header main
没有使用 float（不用请浮动）也没有 负值 margin ，仅仅使用了 absolute 绝对定位，好像更优秀呢？
但是细细想想，单纯的绝对定位有一个问题，「高度不可控」，我们假设，如果 left 部分的高度高于 main ，是不是 left 没有能力撑起整个 wrapper ？
「四不四」~~!
那么我们再来看看双飞翼和圣杯的情况
都是下图。
「应戳死听」~~!
那这么看来，所有的方案都或多或少存在一些问题。综合来看，不管 left, main, right 的大小高低如何，「双飞翼」布局都能正常显示，嗯~~确实很优秀。
锤子和钉子综上所见，「双飞翼」布局更胜一筹。但是，这是一个「锤子和钉子」的问题，我们应该拿着钉子找锤子，而不是拿着锤子找钉子，因为，当你有了最大的锤子，看到什么都是钉子。
唉~，我又在装逼了。 （￣︶￣）/
说白了，就是，对症下药，没有最好的方案，只有最适合的。关于三栏布局，我帮大家列出一个对照表，以便大家快速选择。
| 优点 | 缺点 | |
|---|---|---|
| 圣杯 | 结构简单，无多余 dom 层 | 中间部分宽度小于左侧时布局混乱 |
| 绝对定位 | 结构简单，且无需清理浮动 | 两侧高度无法支撑总高度 |
| 双飞翼 | 支持各种宽高变化，通用性强 | dom 结构多余层，增加渲染树生成的计算量 |
以上为个人理解，如有不对或可补充之处，还请指点。
另外关于 CSS 布局方案，和前端性能优化部分，移驾一下文章
多行多列类布局方案总结
前端性能优化总结
转载请标明出处
作者：木羽 zwwill
首发地址：https://github.com/zwwill/blo...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112712.html
摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：双飞翼布局新手来说不太好理解，光靠死记不行，理解了以后就能轻易写出来。献上代码双飞翼双飞翼布局的好处是淘宝团队提出一种优化写法，写在前面，优先加载，优先渲染，而且兼容性好。双飞翼布局新手来说不太好理解，光靠死记不行，理解了以后就能轻易写出来。献上代码： 双飞翼 .wrap { width: 90%; ...
阅读 1584·2023-04-25 18:19
阅读 2047·2021-10-26 09:48
阅读 1022·2021-10-09 09:44
阅读 1692·2021-09-09 11:35
阅读 2986·2019-08-30 15:54
阅读 1975·2019-08-30 11:26
阅读 2260·2019-08-29 17:06
阅读 858·2019-08-29 16:38
