資訊專欄INFORMATION COLUMN
摘要：于是，淘寶軟對針對圣杯的缺點做了優(yōu)化，并提出雙飛翼布局。綜合來看，不管的大小高低如何，雙飛翼布局都能正常顯示，嗯確實很優(yōu)秀。錘子和釘子綜上所見，雙飛翼布局更勝一籌。
前言
突然有一天，腦之里不知怎地蹦出一個詞，「雙飛翼」，這是很久以前的淘寶提出的一種三欄布局優(yōu)化方案，然而，時間久了已經(jīng)不記得（換句話說是不理解）為啥要提出這個布局了，昨天在 SF 上發(fā)起了一個提問，但良久未有人答復(fù)，幸得@王能全是誰 提醒，終于回想起「雙飛翼」的完整意義了。謹(jǐn)以此文同大家分享這段心路歷程。
圣杯 & 雙飛翼說到「雙飛翼」就不得不提及「圣杯」，兩者均為三欄布局的優(yōu)化解決方案如下圖
常規(guī)情況下，我們的布局框架使用以下寫法，從上到下，從左到右。
header main
問題倒是沒什么問題，然而，如果我們希望中部 main 部分優(yōu)先顯示的話，是可以做布局優(yōu)化的。
因為瀏覽器渲染引擎在構(gòu)建和渲染渲染樹是異步的（誰先構(gòu)建好誰先顯示），那么將
header main
于是乎，國外的前輩就提出了「圣杯」布局，目的就是通過 css 的方式配合上面的 DOM 結(jié)構(gòu)，優(yōu)化 DOM 渲染。
我們來簡要地了解一下「圣杯」布局，這不是重點。
圣杯布局demo ：https://jsfiddle.net/zwwill/p...
header main
使用了 relative 相對定位、float（需要請浮動，此處使用 overflow:hidden; 方法）和 負值 margin ，將 left 和 right 部分「安裝」到 wrapper 的兩側(cè)，顧名「圣杯」。具體的思路我就不再做贅述了，網(wǎng)上到處都是解釋。
圣杯有問題當(dāng)然，正常情況下是沒有問題的，但是特殊情況下就會暴露此方案的弊端，如果將瀏覽器無線變窄，「圣杯」將會「破碎」掉。如圖，當(dāng) main 部分的寬小于 left 部分時就會發(fā)生布局混亂。
于是，淘寶軟對針對「圣杯」的缺點做了優(yōu)化，并提出「雙飛翼」布局。
雙飛翼布局demo ：https://jsfiddle.net/zwwill/5...
同樣的我們來看簡碼
header main
同樣使用了 float 和 負值 margin,不同的是，并沒有使用 relative 相對定位 而是增加了 dom 結(jié)構(gòu)，增加了一個層級。確實解決了圣杯布局的缺陷。
為什么要設(shè)計「雙飛翼」布局雙飛翼布局表面上看是很優(yōu)秀，但是細細想來，為什么要多加一層 dom 樹節(jié)點，這豈不是增加了 css 樣式規(guī)則表和 dom 樹合并成布局樹的計算量嗎？
好像絕對定位也可以解決這個問題細想想，我們可以使用絕對布局，將左右側(cè)邊欄定位到到兩側(cè)啊？好像也不會出現(xiàn)圣杯布局的毛??？
demo ：https://jsfiddle.net/zwwill/a...
header main
沒有使用 float（不用請浮動）也沒有 負值 margin ，僅僅使用了 absolute 絕對定位，好像更優(yōu)秀呢？
但是細細想想，單純的絕對定位有一個問題，「高度不可控」，我們假設(shè)，如果 left 部分的高度高于 main ，是不是 left 沒有能力撐起整個 wrapper ？
「四不四」~~!
那么我們再來看看雙飛翼和圣杯的情況
都是下圖。
「應(yīng)戳死聽」~~!
那這么看來，所有的方案都或多或少存在一些問題。綜合來看，不管 left, main, right 的大小高低如何，「雙飛翼」布局都能正常顯示，嗯~~確實很優(yōu)秀。
錘子和釘子綜上所見，「雙飛翼」布局更勝一籌。但是，這是一個「錘子和釘子」的問題，我們應(yīng)該拿著釘子找錘子，而不是拿著錘子找釘子，因為，當(dāng)你有了最大的錘子，看到什么都是釘子。
唉~，我又在裝逼了。 （￣︶￣）/
說白了，就是，對癥下藥，沒有最好的方案，只有最適合的。關(guān)于三欄布局，我?guī)痛蠹伊谐鲆粋€對照表，以便大家快速選擇。
| 優(yōu)點 | 缺點 | |
|---|---|---|
| 圣杯 | 結(jié)構(gòu)簡單，無多余 dom 層 | 中間部分寬度小于左側(cè)時布局混亂 |
| 絕對定位 | 結(jié)構(gòu)簡單，且無需清理浮動 | 兩側(cè)高度無法支撐總高度 |
| 雙飛翼 | 支持各種寬高變化，通用性強 | dom 結(jié)構(gòu)多余層，增加渲染樹生成的計算量 |
以上為個人理解，如有不對或可補充之處，還請指點。
另外關(guān)于 CSS 布局方案，和前端性能優(yōu)化部分，移駕一下文章
多行多列類布局方案總結(jié)
前端性能優(yōu)化總結(jié)
轉(zhuǎn)載請標(biāo)明出處
作者：木羽 zwwill
首發(fā)地址：https://github.com/zwwill/blo...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112712.html
摘要：本文概要本文將介紹如下幾種常見的布局其中實現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎(chǔ)上進一步優(yōu)化，解決了圣杯布局錯亂問題，實現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：本文概要本文將介紹如下幾種常見的布局其中實現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎(chǔ)上進一步優(yōu)化，解決了圣杯布局錯亂問題，實現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：本文概要本文將介紹如下幾種常見的布局其中實現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎(chǔ)上進一步優(yōu)化，解決了圣杯布局錯亂問題，實現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：雙飛翼布局新手來說不太好理解，光靠死記不行，理解了以后就能輕易寫出來。獻上代碼雙飛翼雙飛翼布局的好處是淘寶團隊提出一種優(yōu)化寫法，寫在前面，優(yōu)先加載，優(yōu)先渲染，而且兼容性好。雙飛翼布局新手來說不太好理解，光靠死記不行，理解了以后就能輕易寫出來。獻上代碼： 雙飛翼 .wrap { width: 90%; ...
閱讀 1649·2023-04-25 18:19
閱讀 2093·2021-10-26 09:48
閱讀 1100·2021-10-09 09:44
閱讀 1748·2021-09-09 11:35
閱讀 3041·2019-08-30 15:54
閱讀 2039·2019-08-30 11:26
閱讀 2299·2019-08-29 17:06
閱讀 895·2019-08-29 16:38
