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