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

围绕前端的性能多如牛毛，涉及到方方面面，以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意，是罗列不是展开，遇到不会不懂的点还请站外扩展

随着前端技术的发展推进，web端的布局方式已基本成熟，那么在网站布局方式中，三列布局最为常用，布局方式也有很多，渐渐的开发者们开始从效率的角度优化自己的代码“如果三排布局能将中间的模块放在dom树前面，那么浏览器在做重绘的时候不久有限显示了吗？”机制的开发者们开始围绕者这个方向进行了dom的优化，于是诞生了...

在大量“不定宽”元素并排的布局模式下，上图是我们想要的最佳布局但是FlexBox布局虽然枪弹但并不能完全呈现以上布局，于是我们需要结合FlexBox作下小的改动即可实现。

inline是内联对象，比如<a/> 、 <span/>标签等，可以“堆在一起”显示，宽高由内容决定，不能设置；block是块对象，比如<div/>、<p/>标签等，要占一整行，但是宽高可以自定义；为了弥补inline和block的不足，又扩充了inline-block属性；inline-blcok可以将对象呈递为内联对象，而内容作为块对象呈...

我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案话不多说，上代码！ 以下所有demo的源码github：[链接]链接: [链接] 密码:obkb 居中布局 以下居中布局均以不定宽为前提，定宽情况包含其中 1、水平居中 a) inline-block + text-align {代码...} tips：此方案兼容性较好，可兼容至IE8，对于IE567并不支...