前言

突然有一天，腦之里不知怎地蹦出一個(gè)詞，「雙飛翼」，這是很久以前的淘寶提出的一種三欄布局優(yōu)化方案，然而，時(shí)間久了已經(jīng)不記得（換句話說(shuō)是不理解）為啥要提出這個(gè)布局了，昨天在 SF 上發(fā)起了一個(gè)提問(wèn)，但良久未有人答復(fù)，幸得@王能全是誰(shuí) 提醒，終于回想起「雙飛翼」的完整意義了。謹(jǐn)以此文同大家分享這段心路歷程。

圣杯 & 雙飛翼

說(shuō)到「雙飛翼」就不得不提及「圣杯」，兩者均為三欄布局的優(yōu)化解決方案如下圖

常規(guī)情況下，我們的布局框架使用以下寫法，從上到下，從左到右。

<header>header</header> <section><aside>left</aside><section>main</section><aside>right</aside> </section> <footer>footer</footer>

問(wèn)題倒是沒(méi)什么問(wèn)題，然而，如果我們希望中部 main 部分優(yōu)先顯示的話，是可以做布局優(yōu)化的。

因?yàn)闉g覽器渲染引擎在構(gòu)建和渲染渲染樹是異步的（誰(shuí)先構(gòu)建好誰(shuí)先顯示），那么將<section>main</section>部分提前即可優(yōu)先渲染。

<header>header</header> <section><section>main</section><aside>left</aside><aside>right</aside> </section> <footer>footer</footer>

于是乎，國(guó)外的前輩就提出了「圣杯」布局，目的就是通過(guò) css 的方式配合上面的 DOM 結(jié)構(gòu)，優(yōu)化 DOM 渲染。

我們來(lái)簡(jiǎn)要地了解一下「圣杯」布局，這不是重點(diǎn)。

圣杯布局

demo ：https://jsfiddle.net/zwwill/p...

<template> <header>header</header> <section class="wrapper"><section class="col main">main</section><aside class="col left">left</aside><aside class="col right">right</aside> </section> <footer>footer</footer> </template><style> /* 以下為簡(jiǎn)碼，僅保留關(guān)鍵部分 */ header,footer {height: 50px;} .wrapper {padding: 0 100px 0 100px; overflow:hidden;} .col {position: relative; float: left;} .main {width: 100%;height: 200px;} .left {width: 100px; height: 200px; margin-left: -100%;left: -100px;} .right {width: 100px; height: 200px; margin-left: -100px; right: -100px;} </style>

使用了 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)碼

<template> <header>header</header> <section class="wrapper"><section class="col main"><section class="main-wrap">main</section></section><aside class="col left">left</aside><aside class="col right">right</aside> </section> <footer>footer</footer> </template><style> /* 以下為簡(jiǎn)碼，僅保留關(guān)鍵部分 */ header,footer {height: 50px;} .wrapper {padding: 0; overflow:hidden;} .col {float: left;} .main {width: 100%;} .main-wrap {margin: 0 100px 0 100px;height: 200px;} .left {width: 100px; height: 200px; margin-left: -100%;} .right {width: 100px; height: 200px; margin-left: -100px;} </style>

同樣使用了 float 和 負(fù)值 margin,不同的是，并沒(méi)有使用 relative 相對(duì)定位 而是增加了 dom 結(jié)構(gòu)，增加了一個(gè)層級(jí)。確實(shí)解決了圣杯布局的缺陷。

為什么要設(shè)計(jì)「雙飛翼」布局

雙飛翼布局表面上看是很優(yōu)秀，但是細(xì)細(xì)想來(lái)，為什么要多加一層 dom 樹節(jié)點(diǎn)，這豈不是增加了 css 樣式規(guī)則表和 dom 樹合并成布局樹的計(jì)算量嗎？

好像絕對(duì)定位也可以解決這個(gè)問(wèn)題

細(xì)想想，我們可以使用絕對(duì)布局，將左右側(cè)邊欄定位到到兩側(cè)啊？好像也不會(huì)出現(xiàn)圣杯布局的毛病？

demo ：https://jsfiddle.net/zwwill/a...

<template> <header>header</header> <section class="wrapper"><section class="col main">main</section><aside class="col left">left</aside><aside class="col right">right</aside> </section> <footer>footer</footer> </template><style> /* 以下為簡(jiǎn)碼，僅保留關(guān)鍵部分 */ header,footer { height: 50px;} .wrapper { position: relative;} .main { height: 200px; margin:0 100px;} .left, .right{ width: 100px; height: 200px; position: absolute; top: 0;} .left{ left: 0;} .right{ right: 0;} </style>

沒(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)戳死聽」~~!

那這么看來(lái)，所有的方案都或多或少存在一些問(wèn)題。綜合來(lái)看，不管 left, main, right 的大小高低如何，「雙飛翼」布局都能正常顯示，嗯~~確實(shí)很優(yōu)秀。

錘子和釘子

綜上所見，「雙飛翼」布局更勝一籌。但是，這是一個(gè)「錘子和釘子」的問(wèn)題，我們應(yīng)該拿著釘子找錘子，而不是拿著錘子找釘子，因?yàn)?#xff0c;當(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)多余層，增加渲染樹生成的計(jì)算量

以上為個(gè)人理解，如有不對(duì)或可補(bǔ)充之處，還請(qǐng)指點(diǎn)。

另外關(guān)于 CSS 布局方案，和前端性能優(yōu)化部分，移駕一下文章
多行多列類布局方案總結(jié)
前端性能優(yōu)化總結(jié)

轉(zhuǎn)載請(qǐng)標(biāo)明出處
作者：木羽 zwwill
首發(fā)地址：https://github.com/zwwill/blo...

總結(jié)

以上是生活随笔為你收集整理的聊聊为什么淘宝要提出「双飞翼」布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。