Talk about why Taobao should put forward “double wings” layout

preface

Suddenly one day, in the brain of somehow jumped out a word, “threesome wing”, it was a long time ago, taobao put forward a three column layout optimization scheme, however, time is long can not remember why (in other words don’t understand) put forward the layout, on the SF, yesterday launched a question, but for a long time did not reply, thanks @ Wang Nengquan who remind, I finally remembered the full meaning of “flying wings”. I would like to share this journey with you in this article.

The Holy Grail & Flying Wings

Speaking of “twin wings”, we have to mention the “Holy Grail”, both of which are three-column layout optimization solutions as shown in the figure below

In general, our layout framework is written from top to bottom and left to right.

<header>header</header>
<section>
    <aside>left</aside>
    <section>main</section>
    <aside>right</aside>
</section>
<footer>footer</footer>Copy the code

The problem is fine, however, if we want the middle main section to be shown first, we can do layout optimization.

Because the browser rendering engine builds and renders the rendering tree asynchronously (whoever builds first displays first), the

section is rendered first.

<header>header</header>
<section>
    <section>main</section>
    <aside>left</aside>
    <aside>right</aside>
</section>
<footer>footer</footer>Copy the code

As a result, foreign predecessors put forward the “Holy Grail” layout, the purpose is to optimize DOM rendering through CSS with the above DOM structure.

Let’s take a brief look at the holy Grail layout, which is beside the point.

The holy grail layout

Demo: jsfiddle.net/zwwill/px57…

<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>
/* Only the key parts */ are reserved
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>Copy the code

Use relative relative position, float (need to float, here use overflow:hidden; Method) and negative margin, “install” the left and right parts to both sides of the wrapper, named “Holy Grail”. I won’t go over the exact idea, there are explanations all over the Internet.

There is a problem with the Grail

Of course, this is fine in normal cases, but special cases can expose the drawbacks of this solution, and the holy grail can be “broken” if the browser wireless is narrowed. As shown, layout confusion occurs when the width of the main section is smaller than that of the left section.

Therefore, Taobao soft for the “holy grail” shortcomings did optimization, and put forward “twin wings” layout.

Twin wing layout

Demo: jsfiddle.net/zwwill/5xjy…

Similarly, let’s look at simplified code

<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>
/* Only the key parts */ are reserved
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>Copy the code

Float and negative margin are also used, but instead of using relative relative positioning, dom structures are added, adding a hierarchy. It does solve a flaw in the grail layout.

Why do you design a “twin-wing” layout

The double wing layout looks very good on the surface, but if you think about it carefully, why do you want to add a layer of DOM tree nodes, this does not increase the CSS style rule table and DOM tree merged into the layout tree calculation?

It seems that absolute positioning can also solve this problem

Come to think of it, we could use the absolute layout, positioning the left and right sidebars to the sides? Does the layout of the Holy Grail seem to work?

Demo: jsfiddle.net/zwwill/awwk…

<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>
/* Only the key parts */ are reserved
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>Copy the code

Does not use float or negative margin, just use absolute positioning, seems better?

But if you think about it, there is a problem with pure absolute positioning, “height is out of control”. Let’s assume that if the height of the left part is higher than that of main, is the left unable to hold the entire Wrapper?

“Four no four” ~~!

So let’s look at the wings and the Grail

These are the pictures below.

“Should poke dead listen to” ~~!

In that case, all of them have some problems. All in all, the “twin wings” layout works regardless of the size of the left, main, and right.

Hammer and nail

In summary, the “twin wings” layout is superior. But it is a matter of “hammer and nail”, and we should take the nail and find the hammer, not the hammer and find the nail, because, when you have the biggest hammer, everything is a nail.

Oh, I’m playing pussy again. \ (￣) ￣) /

To put it bluntly, there is no best solution, only the most suitable one. In terms of the three-column layout, I will make a comparison table for you to choose quickly.

The above is personal understanding, if there is any wrong or can be supplemented, please also give advice.

In addition to the CSS layout scheme, and front-end performance optimization section, move the article multi-row multi-column class layout scheme summary of front-end performance optimization summary

Please indicate the source of reprint author: Kiwa Zwwill first address: github.com/zwwill/blog…