一起来看看淘宝首页的个性化

随着互联网技术以及软硬件技术的快速发展，网络已经成为人们生活中不可或缺的一部分，在长期的互联网冲浪中，网民对网络信息的辨识度日益增进，网络信息提供方也必须与时俱进，抓住用户的要害。

就拿我们淘宝的业务来看，几年前看到最多的是以商品为维度分类、分层；而现在，一切以人为中心，围绕用户做产品，帮助用户挖掘消费区间，帮助用户找到自己感兴趣的东西。淘宝首页就被拿出来开了一刀，作为淘宝的门户，它承载了万千入口，如何让用户直达兴趣之地？那自然少不了千人千面地展现内容。今年淘宝首页的改版，无处不散发个性化的味道：

淘宝首页的个性化需求

首页的内容运营不是一两个人可以完成的，四五十个业务，每个业务又有很多子业务方向，为了让所有运营有序的在首页编辑数据，主体采用 TMS 搭建，目的是隔离模块权限（当然，目前淘系也没有比 TMS 更适合的平台来搭建首页）。

为了满足不同产品的需求，同时更好地展现产品特征，设计中采用了大量的色彩，如下图所示：

同时也为业务提供了多套可供选择的模板：

在满足业务需求的前提下，更重要的是以人为中心，把用户喜欢的东西放到最醒目的位置。如下图「我常逛的」区块，通过算法介入，打分排序，从业务池子中的几十个模块中选出四个：

每个模块中的很多数据都是通过个性化接口获取的，并且为了提高运营的执行效率，需要前端实现以下功能：

• 对于整个区块，运营可以对业务置顶、排序
• 对于区块中的每个业务模块，支持运营配置其版式，以及配置该模块是否需要关闭个性化
• 对于模块中的每个数据坑位，支持运营干预是否需要个性化
• 对于部分业务模块，支持运营配置多条数据，然后算法决定出哪几条
• 而有部分业务，会采用自己的业务数据，该模块的渲染则需要独立处理

简单而言，就是需要实现模块的位置、模板、内容（或者部分内容）个性化，同时对每个维度做开关控制。为了更好地告诉用户自己的属性，也会在导航上为用户打标：

设计也会有个性化的需求，如不同地域的人群展示不同的内容：

前端面临的问题

先记住一句话：「不能相信任何数据源」，数据源出来的数据偶尔出乎你的意料，数据缺少条目、格式不对、状态不对、回调不对等等。

从上面的个性化需求可以看出，前端面临的问题还是不少的。

首先，数据的来源较多。 每个区块采用的算法不一样，所以每个区块对应的数据接口也各不会相同，并且一个模块中，并不是所有数据都会走个性化接口，还有一部分数据来自运营的手工填写（运营手工填写的内容，部分同步渲染，部分异步渲染）。有些运营为了方便管理投放，如多个运营维护一个坑位的情况，会采用其他平台投放，前端需要通过平台接口获取数据；再加上部分业务有自己的后端服务，前端只能通过他们的后端接口获取数据；页面上还有不少阿里妈妈的广告，自然也是走他们的接口。约摸算来，整个首页的数据接口不下于 15 个。

大多数区块的渲染，需要经历两次串行的请求 。首先通过算法接口拿到需要展示的模块 id 、模块排序和模块的个性化数据，然后通过模块 id 加载对应的非个性化数据（非个性化数据中包含了运营对个性化数据的干预逻辑），合并两个数据后才能渲染一个区块。有人问：

• 是不是可以并行请求两者？答案是不能，业务模块实在是太多了，如果把所有 id 的模块数据都拿过来，数据太多。
• 算法那边是否可以将所有业务的数据都拿过去，然后只给前端传输整合后的数据？答案依然是不行，业务数据可能被实时修改，算法那边同步是个问题，目前没有较好的设施完成这套数据同步。
• 是否可以让算法的数据流过业务数据，将最后需要的数据过滤出来？答案是这很靠谱，然而这套体系还没有完善，本次改版无缘用上。

第三个问题是，数据匹配问题。业务模块有一个 id，这个 id 需要前端与后端约定好；而业务的非个性化数据因为要异步加载，也有一个数据请求 id，这个 id 由 TMS 平台产生，业务模块较多，两类 id 需要人肉匹配。在前后端的交互过程中，可能会出现如下问题：

• 算法提供的数据 id 中有一个在前端这里找不到
• 算法提供的数据存在重复/过少/过多
• 算法提供的数据中某一项的数据格式不对

前端还有一个模板匹配的问题，为了保证数据的纯洁性（其实是为了让运营配置后台清爽），光看业务数据是不知道该数据匹配哪种模板的，前端在区块配置列表中还得加上模块的模板 id，可以看看区块的配置后台：

第四，也是一个让人头疼的问题，兜底容灾的处理，对于单模块单数据源的渲染，容灾是一件相当轻松的事情。而对于多模块多数据源的容灾处理，其逻辑的复杂程度超乎想象。

黄金准则

为了让页面能够流畅地渲染，技术上下点功夫那是必须的！站在用户体验的角度去思考，其实很多问题都会迎刃而解：

• 首屏一定要快
• 滚屏一定要流畅
• 能不加载的先别加载
• 能不执行的先别执行
• 渐进展现、圆滑展现

在快的基础上做到手感丝滑，需要优化的点有很多，下篇将给大家带来淘宝首页的性能优化实践。

本文同步自 小胡子哥的个人网站，原文地址： http://www.barretlee.com/blog/2016/03/31/personality-in-taobao-home-page/

对系统链路问题排查的一些看法

页面上发现几个模块展示比较缓慢，白了大约 5s 之后展示兜底，显然，是接口请求超时了，打开控制台一看，果然，接口挂了。看了下相关页面，因为大量用到这个接口，模块也都加载超时了。上同事电脑看了下，存在一样的问题，确认是接口挂了。让外网的同学访问，确认外网没有问题。

10 min 左右后接口恢复正常。于是出现下面系列流程：

• 联系相应的同学，最后找到能排查问题的人。
• 查看监控平台，发现确实没有数据过来。
• 查看服务器日志，发现确实没有日志进来，确认监控数据未出错。
• 结论是平台无错误。

继续溯源，

• 平台上一层是统一接入，查看 lvs，发现没有流量进来
• 查看机器系统日志，lvs 有人在内网调试

当然，问题在这里已经找到了。如果这一步还没有找到，就需要继续溯源，看看域名解析是否有问题，DNS 解析是否有问题了。

自动化的检测

当用户发现网页模块超时加载后，

• 前端系统警报
• 触发对应接口的链路查询
• 检查 DNS 解析是否正常
• 检查证书是否过期，是否正确部署
• 检查统一接入层是否有流量异常
• 检查平台监控数据是否异常
• 检查服务器日志是否异常
• 检查程序是否报错

而这条链路也可以在平时正向冒烟测试，定期检查是否存在问题，提早发现问题，这样才能发挥监控的价值。

P.S：这个问题在 10 min 后才被感知，40 min 后才最终定位问题。

本文同步自 小胡子哥的个人网站，原文地址： http://www.barretlee.com/blog/2016/03/19/problem-debugging/

多 SSH Key 管理技巧与 Git 多账户登录问题

认识网页无障碍

最近忙里偷闲坚持了好几个星期网页无障碍相关的学习和研究，看了很多文档，也在 Google 中寻觅了不少博客文章，总的来说就一个感受：规范文档太细节太长，博客指导性不强。

在 上文 中提到，信息无障碍并不是一种爱心公益活动，只是在大多数公司中，这方面的技术/产品投入难以带来可观的利润，于是信息无障碍难以进入开发的流程之中，即便有工程师零零碎碎地在页面中加入了无障碍优化，一段时间的产品迭代之后，这些优化又荡然无存了。

我希望，通过一段时间的研究和实践，能够把我对网页无障碍化的理解表达出来，在学习的过程中，会去盲人社区交流，切身体会视障人士的处境，同时也会跟国内几位做了比较长时间网页无障碍研究的盲人开发者沟通，收获一些心得。

认识网页无障碍化

站在一个用户的角度思考。当用户进入你的网站，他的目的应该是很明确的，在最短的时间内通过最快的方式找到自己想要的信息。正常人通过眼睛去捕捉网页上的信息，而视障人士主要通过耳朵，并使用读屏软件辅助读取页面的信息。

如果网页很长，链接很多，比如一些门户网站，盲人用起来就会特别吃力，PC 上通过 TAB 键从头开始往后聚焦，成千上万个链接堆叠在一坨，其恶心程度可以想象，我觉得能够鼓起勇气进入这些网站的盲人都是脾气相当不错的（如果是你，你会砸键盘么🙈）。

读屏软件不知道哪些信息是「重要信息」和「次要信息」，更加不清楚哪些信息是重复信息，有的时候读屏软件还会读到一些干扰信息（比如图形字符等）。

所谓的网页无障碍化，就是将网页信息有序的排列在一起，并且提供几个快捷入口让用户迅速找到关注点，然后排除干扰，我简单地理了下无障碍化的思路：

• 第一步，让用户知道页面上有什么内容，比如使用 HTML5 的语义化标签以及 WAI-ARIA 中的 landmark 地标；
• 第二步，让用户可以轻松在页面的板块之间切换，比如添加快捷键支持；
• 第三步，让用户知道哪些是主要部分，甚至在进入页面的时候就提供快捷方式跳到主要内容的锚点；
• 第四步，去除页面干扰，如 iconfont 文字，相邻重复的链接等；
• 第五步，提供页面的交互支持，让自定义的组件如 tab、slide 都具备无障碍属性。

稍微厘清上面五个步骤的思路，其实很简单，就是让信息模块化地呈现，这样就可以让耳朵更好的代替眼睛办事儿。

理解和实践网页无障碍化

掌握了整体的思路后就会清楚，哪些操作是有益于网页整体无障碍的，哪些操作是局部的微小优化，对于很多网站而言，我们可能不需要去关注细微的优化，因为这些事情读屏软件可以胜任。只要能够在整体上将一个网页乃至一个网站的无障碍体验做好，这就是网页无障碍化的最佳实践！

有些同学在做无障碍实践的时候没有真实理解盲人的需求，所以做出来的东西反而比没优化之前更加难用，比如滥用 tabindex，把网页内容的顺序排列得支离破碎，如果你正在做或者正准备做网页无障碍，请你一定要站在盲人的角度看问题。当然，最好你还能闭上眼睛拿着读屏软件测试下你写的页面。

不同的平台会有不同的读屏软件，由于各读屏软件对标准的实现存在偏差，甚至存在删减，最后导致不同平台下的读屏体验是不一样的，如同我们关注各浏览器之间的兼容性一般，在做无障碍测试的时候，也要关注不同读屏软件的差异。

最后

文本主要从网页无障碍的思路上做了一些阐述，可能不严谨，也可能有表述不当的地方，如果你对这方面有研究，欢迎提出你的观点，也期待更多人关注网页无障碍化。

本文同步自 小胡子哥的个人网站，原文地址： http://www.barretlee.com/blog/2016/03/05/steps-of-web-content-accessibility/