聊聊为什么淘宝要提出「双飞翼」布局

前言

突然有一天，脑之里不知怎地蹦出一个词，「双飞翼」，这是很久以前的淘宝提出的一种三栏布局优化方案，然而，时间久了已经不记得（换句话说是不理解）为啥要提出这个布局了，昨天在 SF 上发起了一个提问，但良久未有人答复，幸得@王能全是谁 提醒，终于回想起「双飞翼」的完整意义了。谨以此文同大家分享这段心路历程。

圣杯 & 双飞翼

说到「双飞翼」就不得不提及「圣杯」，两者均为三栏布局的优化解决方案如下图

常规情况下，我们的布局框架使用以下写法，从上到下，从左到右。

header
    
    
main
    

问题倒是没什么问题，然而，如果我们希望中部 main 部分优先显示的话，是可以做布局优化的。

因为浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），那么将

header
    
main
    
    





    

于是乎，国外的前辈就提出了「圣杯」布局，目的就是通过 css 的方式配合上面的 DOM 结构，优化 DOM 渲染。

我们来简要地了解一下「圣杯」布局，这不是重点。

圣杯布局

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

header
 class="wrapper">
    
 class="col main">main