資訊專欄INFORMATION COLUMN
摘要：于是，淘寶軟對針對圣杯的缺點做了優化，并提出雙飛翼布局。綜合來看，不管的大小高低如何，雙飛翼布局都能正常顯示，嗯確實很優秀。錘子和釘子綜上所見，雙飛翼布局更勝一籌。
前言
突然有一天，腦之里不知怎地蹦出一個詞，「雙飛翼」，這是很久以前的淘寶提出的一種三欄布局優化方案，然而，時間久了已經不記得（換句話說是不理解）為啥要提出這個布局了，昨天在 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...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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%; ...
閱讀 1630·2023-04-25 18:19
閱讀 2078·2021-10-26 09:48
閱讀 1079·2021-10-09 09:44
閱讀 1730·2021-09-09 11:35
閱讀 3027·2019-08-30 15:54
閱讀 2021·2019-08-30 11:26
閱讀 2285·2019-08-29 17:06
閱讀 884·2019-08-29 16:38
