转自：http://taobaofed.org/blog/2016/06/02/thing-about-taobao-homepage/
作者：淘宝前端团队阎王 原题《聊一聊淘宝首页和它背后的一套》
淘宝首页是淘宝的门面，承载着几乎淘系所有业务的入口，流量很大，量级单位为亿。近几年无线端崛起，业务重点开始向无线终端偏移（目前不能叫偏移，基本以无线为主了），所以淘宝 PC 端首页的流量也有削减，不过即便如此，它的日均 PV 依然相当高。
淘宝首页一向是内部平台和技术的试验田，它一直在变化着。最新的框架和系统都会找淘宝首页试点，可以试想下，如果某一项需要推动的升级或者优化措施在淘宝首页已经上线，并且拿到了良好的数据和稳定性，其他业务还有什么理由不去尝试和更迭呢？同时，去年一年身在淘宝前端的技术架构组，自然而然也会主动去 push 一些实验性的内容到业务上。
淘系的站点页面包括首页、其他频道页和活动页等，这些页面并不都由淘宝前端一行一行的代码码出来，业务如此之多，这种玩法即便人数 double 也忙不过来。事实上，大多数页面都是依托内部的搭建平台——运营或者前端通过模块搭建的方式——构建的，而前端 focus 的重点在于搭建平台的建设自身以及模块的通用性和复用率的保障，当然，还有一些工程化的东西。
使用搭建平台搭建的页面，前端只需要考虑组成页面的原子模块的开发，整体的渲染由搭建平台提供的统一脚本全权负责。而在淘宝首页上，考虑到页面模块数量巨多，加上还有少量跨部门、跨团队的沟通，渲染模型略微不同。
背景中提到，淘宝首页依托于内部搭建平台，它的变迁自然也是跟着搭建系统的变化而变化的。
接手淘宝首页不久，便遇到了一年一度的改版，那时它还运行在 PHP 环境中。这里需要说明的是，淘宝首页的所有代码完全由前端掌控，前端不会直接跟数据库打交道，其数据来源分为两部分。
数据来源
一是 运营填写的数据。 采用前端挖坑的形式，预留坑位让运营获取填写数据，如（伪代码）：
<?php $info = Person('name:String:姓名,age:Number:年龄', '个人信息坑位填写');?>
<div>
<?php $info.forEach(index) { ?>
Name: <?= info[index].name ?>, Age: <?= info[index].age ?>
<?php } ?>
</div>
转自：http://www.shejidaren.com/ui-shi-jie-wu-cha.html
长宽 400px 的正方形与长宽 400px 的圆形哪一个更大？假如这样问你的话，那么正确答案当然是一样大。但是来看看下面这张图，长宽各 400px 的两个图形看起来并不一样大。你的眼睛告诉你 400px 的正方形比 400px 的圆形更大一些。物体的物理尺寸是一样的，但视觉尺寸却有可能不一样的。
为了更加准确地证明这个现象的存在，下面这张图给出辅助线，大家好好看看。
我们改变一下圆形的尺寸，看看现在这两个图形的视觉尺寸有没有更接近一些？
每个人的感官可能都不一样，但对于我来说，调整尺寸的后的两个图形看起来才是一样大的，至少也不会像图一一样，让人第一眼就认为正方形比较大。为啥会这样？因为我将圆的直径增加了 50px。
现在我们将图形都叠起来看，看看为什么会产生这种那么明显的误差。400px 的两个图形叠在一起，你会发现整个圆形都被包裹在了正方形之内，而正方形多出的四个面积巨大的 a 区域就是造成这种视觉误差的原因。再将 400px 的正方形与 450px 的圆形叠在一起，正方形无法将整个圆形包裹在内了，圆形超出的四个 b 区域又与 正方形多出来的 a 区域在视觉上互相抵消，所以 450px 的圆形与 400px 的正方形在视觉尺寸上更接近，也就是我们常说的“一样大”。
不仅是圆与方，所有的图形都能够造成这样的偏差。当我们追求“看起来一样大”这个目标的时候，某些形状的物理尺寸应该更大一些。
这个现象对于界面造成的设计会有哪一些呢？譬如说，当绘制一套 icon 的时候，我们当然是追求每个 icon 都看起来一样大对吧？但假如我们只通过物理尺寸来进行量度的画，画出来的 icon 必然会个大个小，乌七八糟，更伤的是，这种问题经常发生，手机里随便打开个 app 都能发现这样的问题。
（更多…）
