论坛 › 澳门 › 从PHP到Node，聊一聊淘宝首页背面的技术

7wu1wm0 发表于 2024-10-4 12:52:12

从PHP到Node，聊一聊淘宝首页背面的技术

<span style="color: black;">“</span> <span style="color: black;">作者从2014年双十二结束时<span style="color: black;">起始</span>接手淘宝首页，经历了淘宝首页的两次改版和一次从PHP到Node的迁移，不久前完<span style="color: black;">成为了</span>工作的交接。本文介绍了淘宝首页的变迁过程、性能优化、稳定性<span style="color: black;">保证</span>和敏捷<span style="color: black;">办法</span>，分享了作者<span style="color: black;">这里</span>过程中的感受。</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">关联</span>背景介绍</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/yqVAqoZvDibG6wlFUVibvvuoCyK8g203xOWC41VMpfJ4t2SGRWnibL2qpsHfPMuiaQgRpeAyLb0DgwaO6micCmV3p3Q/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">淘宝首页是淘宝的门面，承载着几乎淘系所有业务的入口，流量很大，量级单位为亿。近几年无线端崛起，业务重点<span style="color: black;">起始</span>向无线终端偏移（<span style="color: black;">日前</span><span style="color: black;">不可</span>叫偏移，基本以无线为主了），<span style="color: black;">因此</span>淘宝 PC 端首页的流量<span style="color: black;">亦</span>有削减，<span style="color: black;">不外</span>即便如此，它的日均 PV 依然相当高。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">淘宝首页一向是内部平台和技术的<span style="color: black;">实验</span>田，它<span style="color: black;">始终</span>在变化着。最新的框架和系统都会找淘宝首页试点，<span style="color: black;">能够</span>试想下，<span style="color: black;">倘若</span>某一项需要推动的升级<span style="color: black;">或</span>优化<span style="color: black;">办法</span>在淘宝首页<span style="color: black;">已然</span>上线，并且拿到了良好的数据和稳定性，其他业务还有什么理由不去尝试和更迭呢？<span style="color: black;">同期</span>，去年一年身在淘宝前端的技术架构组，自然而然<span style="color: black;">亦</span>会主动去 push <span style="color: black;">有些</span>实验性的内容到业务上。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">淘系的站点页面<span style="color: black;">包含</span>首页、其他频道页和活动页等，这些页面并不都由淘宝前端一行一行的代码码出来，业务如此之多，这种玩法即便人数 double <span style="color: black;">亦</span>忙<span style="color: black;">不外</span>来。事实上，大<span style="color: black;">都数</span>页面都是依托内部的搭建平台一一运营<span style="color: black;">或</span>前端<span style="color: black;">经过</span>模块搭建的方式一一构建的，而前端 focus 的重点在于搭建平台的建设<span style="color: black;">自己</span>以及模块的通用性和复用率的<span style="color: black;">保证</span>，当然，还有<span style="color: black;">有些</span>工程化的东西。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>搭建平台搭建的页面，前端只需要<span style="color: black;">思虑</span><span style="color: black;">构成</span>页面的原子模块的<span style="color: black;">研发</span>，整体的渲染由搭建平台<span style="color: black;">供给</span>的统一脚本全权负责。而在淘宝首页上，<span style="color: black;">思虑</span>到页面模块数量巨多，加上还有少量跨<span style="color: black;">分部</span>、跨团队的沟通，渲染模型略微<span style="color: black;">区别</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">淘宝首页的整体变迁</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/yqVAqoZvDibG6wlFUVibvvuoCyK8g203xOWC41VMpfJ4t2SGRWnibL2qpsHfPMuiaQgRpeAyLb0DgwaO6micCmV3p3Q/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">背景中<span style="color: black;">说到</span>，淘宝首页依托于内部搭建平台，它的变迁自然<span style="color: black;">亦</span>是跟着搭建系统的变化而变化的。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">1、PHP 下的淘宝首页</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接手淘宝首页不久，便遇到了一年一度的改版，那时它还运行在 PHP 环境中。<span style="color: black;">这儿</span>需要说明的是，淘宝首页的所有代码完全由前端掌控，前端不会直接跟数据库打交道，其数据<span style="color: black;">源自</span>分为两部分。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">数据<span style="color: black;">源自</span></strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一是运营填写的数据。 采用前端挖坑的形式，预留坑位让运营获取填写数据，如（伪代码）：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVj2XiaIhv9oAddywstLzkGkTSX9s3CeSSlgUHibPwVCXZWQicn5rkSOroYQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上面的代码会产生一份 PHP 的模板和info字段对应的表单坑位，这个过程简<span style="color: black;">叫作</span>“挖坑”。<img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVjB1mCNcIT0icKiaiaLAgxmkgfYbIhZCtqjmFM3YpmAvSSIlUCsvTZjKOWg/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">运营填写这些坑位就会产生这份 PHP 模板对应的数据，最后渲染出来<span style="color: black;">便是</span>一个完整的 HTML 片段（实时性渲染）。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVjy0mEBECOWMch7iclDW10iaaa5lsKtBibWOV76ibAz5ntXTibC0NaUgGks1g/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">旧版搭建系统中<span style="color: black;">便是</span><span style="color: black;">经过</span>这种方式构造一个子模块。我描述得<span style="color: black;">非常</span>简单，但<span style="color: black;">做为</span>一个平台它需要<span style="color: black;">思虑</span>的东西还有<span style="color: black;">非常多</span><span style="color: black;">非常多</span>的，<span style="color: black;">例如</span>数据<span style="color: black;">次序</span>的<span style="color: black;">掌控</span>、<span style="color: black;">按时</span>发布、回滚机制、过滤机制、筛选机制、数据的同步、数据的更新、版本<span style="color: black;">掌控</span>、权限<span style="color: black;">掌控</span>、其他系统的引用等。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">二是后端<span style="color: black;">或</span>个性化平台<span style="color: black;">供给</span>的数据。 <span style="color: black;">区别</span>的业务有<span style="color: black;">区别</span>的诉求。<span style="color: black;">有些</span>业务有自己的后端，<span style="color: black;">她们</span><span style="color: black;">需求</span><span style="color: black;">运用</span>自己业务产出的数据；有的业务<span style="color: black;">期盼</span>用户看到的内容不<span style="color: black;">同样</span>，千人千面，期望接入算法；<span style="color: black;">有些</span>业务跟卖家直接打交道，期望<span style="color: black;">运用</span>招商数据；而有些业务期望采用运营从数据池筛选出来的数据……总之，淘宝首页需要对接形形色色的系统，接口繁多。后面会<span style="color: black;">说到</span>对动态数据源的整合。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">并且这些系统对应的域名是不<span style="color: black;">同样</span>的，JSONP 格式自然<span style="color: black;">亦</span>就<span style="color: black;">成为了</span>首选。但<span style="color: black;">有些</span>特殊的系统，<span style="color: black;">例如</span><span style="color: black;">宣传</span>，它的渲染并不是一个简单的 JSONP 请求，可能它还要<span style="color: black;">干涉</span><span style="color: black;">全部</span><span style="color: black;">宣传</span>的渲染流程，<span style="color: black;">例如</span>加载<span style="color: black;">她们</span>的 JS，把渲染的<span style="color: black;">掌控</span>权交过去。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">页面的架构</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上面介绍了数据的<span style="color: black;">源自</span>和子模块的结构，<span style="color: black;">那样</span><span style="color: black;">全部</span>页面又是<span style="color: black;">怎样</span><span style="color: black;">形成</span>的呢？模块的搭建分为两种，一种是可视化搭建，运营<span style="color: black;">或</span>前端<span style="color: black;">能够</span>将<span style="color: black;">研发</span>好的模块（<span style="color: black;">或</span>模块库中<span style="color: black;">选择</span>的模块）拖拽到容器内，形成一个页面。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVjqQjK0f9t2VNQGPASpRxUlxGI7RfibEf5TJaic8X7MibQS1SxcZtViceUBg/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">当然，上图<span style="color: black;">亦</span>只是一个模型，<span style="color: black;">做为</span>一个系统需要<span style="color: black;">思虑</span>的问题还有<span style="color: black;">非常多</span><span style="color: black;">非常多</span>，如页面的布局、多终端适配、模块的临时<span style="color: black;">隐匿</span>、位置<span style="color: black;">调节</span>、皮肤<span style="color: black;">选取</span>、模块的复制等。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">亦</span><span style="color: black;">能够</span><span style="color: black;">经过</span>如下源码搭建的方式（伪代码）：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVj3ibPSuGxd27B4rckqwQldptjle0yBibcSsoj32iaujZgx7qrdvN9c8osw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>模块 id 将模块引入，并且添加<span style="color: black;">有些</span>类似 lazyload 的标记，方便<span style="color: black;">掌控</span>渲染节奏和数据入口。源码搭建和模块搭建的区别在于，前者更易于<span style="color: black;">掌控</span>模块的结构以及模块的渲染<span style="color: black;">次序</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">动态数据源</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">首页面对一大堆接口和平台，对接几十个业务方，接口是个很大的问题，<span style="color: black;">因为</span>后台系统的差异，基本<span style="color: black;">无</span>办法统一数据源的格式，一旦运营哪天心血来潮要换一个他自己觉得用的更爽的<span style="color: black;">或</span>数据更好的系统，前后端估计又得沟通和对接几次。<span style="color: black;">因此</span><span style="color: black;">显现</span>了下面这张图：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVj7Vw6ibmmEIhZ7LJtr5W9V9Cq48WfjA3YxhKHI9vjDmKUSH5rdmsxG1w/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;">平台具备数据源接入的能力，<span style="color: black;">亦</span><span style="color: black;">便是</span>说<span style="color: black;">咱们</span>挖的坑<span style="color: black;">不仅</span><span style="color: black;">能够</span>让运营填数据，还<span style="color: black;">能够</span>从<span style="color: black;">各样</span>数据源中直接导入数据，当然，<span style="color: black;">这儿</span>需要进行一次数据字段的映射转换。后端<span style="color: black;">供给</span>的接口是<span style="color: black;">这般</span>的：<img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVjLekFmYDibhibDRXVlx1OsRVpYAbLEWxiaUZPqLZ8UjjicQkTCw016c0mxw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">前端约定的接口形式是:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVjOaBX9ky7tJ0z1AT7waGQ4HvOAnXHlicokpgKApe9bvFoAfc4mWEUDZA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">那样</span>系统必须<span style="color: black;">供给</span>这种映射的绑定策略：</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVjlhfz5kMGhicsLPoVaynvulibb4fw4FShtzbicdsNMzLjoYJc1iaE6MHOmA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">绑定之后，数据既<span style="color: black;">能够</span>同步输出，<span style="color: black;">亦</span><span style="color: black;">能够</span>异步输出，这些都是平台<span style="color: black;">供给</span>的能力。这个<span style="color: black;">方法</span>基本上<span style="color: black;">处理</span>了后端系统/接口变化的问题，并且减少了前后端之间的沟通成本。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">不外</span><span style="color: black;">这儿</span>需要<span style="color: black;">重视</span>的是，虽然页面上的接口都<span style="color: black;">经过</span>平台统一梳理了一次，这<span style="color: black;">亦</span><span style="color: black;">寓意</span>着，页面所有的请求会先流经平台，<span style="color: black;">而后</span>分发到各个后端，平台的抗压能力<span style="color: black;">需求</span>很高。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">2、PHP 到 Node 的变迁</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">淘宝首页日均请求的这个量级，不可能是十几二十台台服务器抗得住的，支撑它必须有一个服务集群。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVjBJib82oibTOVFSqYyuFNmsVROgxviaPWcU0pZKxibZWick2jkn6YaDWmw6A/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">每一个 CDN 节点上都具备 PHP 渲染的能力，当页面发布时，<span style="color: black;">咱们</span>把该页面所有的模块和数据同步到<span style="color: black;">所有</span> CDN 节点上，基本模式大概<span style="color: black;">便是</span>如此了。看起来还挺不错，<span style="color: black;">然则</span>经过一段时间的运维，<span style="color: black;">非常多</span>安全、性能问题都慢慢浮现出来了。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">性能问题。</strong><span style="color: black;">每一个</span> PHP 页面<span style="color: black;">包括</span>多个子模块，而子模块<span style="color: black;">亦</span>有可能引用了其他的子模块，PHP 的 include 操作是存在消耗的，每一次引用都是一次磁盘 IO，一个渲染节点上跑了成千上万个类似淘宝首页的 PHP 页面，并发一高其效率可想而知。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">// @邦彦 <span style="color: black;">朋友</span><span style="color: black;">弥补</span>：php 的 include 操作是存在消耗，<span style="color: black;">然则</span>加载、执行的过程预热后，字节码直接进缓存，并不存在频繁磁盘 io 的<span style="color: black;">状况</span>。cdn php 性能差的问题<span style="color: black;">重点</span>是两个：1. php 版本过旧，5.4 和 7 的性能相差不只几倍；2. fast-cgi 模式在高并发的场景下和 node 相比<span style="color: black;">无</span>任何<span style="color: black;">优良</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">推送机制问题。</strong>文件同步（图中的 sync 动作）是一种比较恶心的机制，<span style="color: black;">首要</span>，时间上没法<span style="color: black;">掌控</span>，一个文件同步到所有的节点，快则几秒钟，慢的话耗时会超过一两分钟；并且同步过程还有可能失败，健康检测的成本<span style="color: black;">亦</span>是相当高的。发布比较紧凑时，需要同步的文件<span style="color: black;">亦</span><span style="color: black;">非常多</span>，很容易<span style="color: black;">导致</span>队列堆积，加剧同步差的体验。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">实时性强<span style="color: black;">需要</span>问题。</strong>文件在推送之前，还可能经过<span style="color: black;">有些</span>前置系统，发布链路越长，线上生效时间越慢，慢的时候大约五分钟才生效，<span style="color: black;">这般</span>的延时<span style="color: black;">针对</span>实时性<span style="color: black;">需求</span>很高（如秒杀）的<span style="color: black;">需要</span><span style="color: black;">来讲</span>是完全不能接受的。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当然，还有<span style="color: black;">非常多</span>其他问题，如运维成本<span style="color: black;">升高</span>、安全<span style="color: black;">危害</span><span style="color: black;">升高</span>、PHP 资深人才<span style="color: black;">贮存</span>不足等等。<span style="color: black;">因此</span> PHP 渲染容器的命运，<span style="color: black;">便是</span>，被干掉。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下图改变了下玩法，服务集群为 Cache CDN，它<span style="color: black;">仅有</span>静态文件处理能力，<span style="color: black;">无</span> PHP/Node 的渲染能力，<span style="color: black;">因此</span>处理效率高，性能<span style="color: black;">亦</span>好，抗压能力相当强，并且扛不住的时候还<span style="color: black;">能够</span>花钱买服务，拓展 Cache 集群。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVjaV2aicRQcA6TppAibOlQmnSMqzjvRYhrnPUic9KSLjPcqYdXgUWaGGCwA/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用户<span style="color: black;">拜访</span>时，Nginx 转到 Cache CDN，<span style="color: black;">倘若</span>命中缓存则直接返回，<span style="color: black;">无</span>命中便回源到源站服务器。源站服务器是具备模块渲染能力的 Node 服务，它<span style="color: black;">能够</span>做<span style="color: black;">非常多</span>事情：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">掌控</span> Cache 响应头，<span style="color: black;">经过</span> max-age 和 s-maxage <span style="color: black;">掌控</span>页面在客户端的缓存时间以及在 Cache 上的缓存时间，这个缓存时间<span style="color: black;">能够</span><span style="color: black;">按照</span><span style="color: black;">需要</span>随时做<span style="color: black;">调节</span>，<span style="color: black;">例如</span>大促的时候调长<span style="color: black;">有些</span></p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">掌控</span>内外网环境，和 AB 测试状态</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">融合前端<span style="color: black;">关联</span>的工具链，<span style="color: black;">例如</span>检测、压缩、过滤等等</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">它的<span style="color: black;">优良</span>有<span style="color: black;">非常多</span>，<span style="color: black;">这儿</span>不一一列举了。这个模式中还添加了一层容灾，源站服务器每隔一段时间将数据推送到于 Cache 同机房的备份服务器，一旦源站挂了，还能够自动容灾到备份数据上。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">模式的变化不仅在运维上有了突破，CDN 被攻击时的安全<span style="color: black;">危害</span><span style="color: black;">亦</span>低了<span style="color: black;">非常多</span>，<span style="color: black;">同期</span><span style="color: black;">亦</span>省却了 sync 所需的<span style="color: black;">各样</span>检测机制，每年节约成本<span style="color: black;">亦</span>是百万以上，<span style="color: black;">优良</span>还是相当<span style="color: black;">显著</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">3、Node，不<span style="color: black;">同样</span>的模式</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上面 PHP 模块中，<span style="color: black;">咱们</span>只说了 HTML 和数据部分，用心的读者应该<span style="color: black;">已然</span><span style="color: black;">发掘</span>，CSS 和 JS 这些静态资源都没<span style="color: black;">说到</span>，那页面是<span style="color: black;">怎样</span>渲染的呢？</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">旧版 PHP 页面中，<span style="color: black;">咱们</span>是直接引入了一个 CSS 和一个 JS，淘宝这边采用的是 git 版本迭代发布，这些静态资源都是直接放在一个 git 仓库中。<span style="color: black;">亦</span><span style="color: black;">便是</span><span style="color: black;">这般</span>：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVjSaaghQDmibFLQX1iaX5Y5p7kt0eUWOOibrnFicQEmn4mu7Zc6LoHmj2j9g/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">每次发布完 git 文件，再修改 PHP 的版本号，<span style="color: black;">而后</span>发布 PHP 代码。当然，<span style="color: black;">亦</span>做了<span style="color: black;">关联</span>的优化，<span style="color: black;">例如</span>发布 git 时自动更新版本号等。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">而新版搭建平台的页面渲染模式与 PHP 的模式不太<span style="color: black;">同样</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVj2N8Bic3nialNuGoJSLcUagBWVA3JtCfH0DE8Q77k9jFtlYniau07vyC4w/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个模块的 CSS/JS 和模板放在<span style="color: black;">一块</span>，CSS/JS 与页面其他模块的静态资源是相互独立的，目的<span style="color: black;">便是</span><span style="color: black;">期盼</span>单个模块<span style="color: black;">亦</span>能够完整的跑起来，更加利于模块的复用。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">而模块的挖坑，<span style="color: black;">亦</span>从模板中独立了出来，采用 JSON Schema 的形式定义数据格式。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVjQokic8me6lv9P1QZtLLvicysVSGqK7ibGvLcvlEASrTJK1YqhuzyAv6Vw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">搭建平台<span style="color: black;">经过</span>这个 JSON Schema 解析成 图一 的坑位。<span style="color: black;">那样</span>一个模块的渲染就编程了 index.xtpl 和挖坑数据之间的拼装了。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">模块之间相互独立隔离，<span style="color: black;">因此</span>会存在<span style="color: black;">必定</span>程度的冗余，<span style="color: black;">不外</span>模块解偶带来的收益要比这点冗余要多得多。事实上，<span style="color: black;">咱们</span>是<span style="color: black;">经过</span>一个仓库去管理单个模块的。页面的渲染就比较简单了，源站 Node 容器会将所有的 index.xtpl 合并成一个 page.xtpl，为减少页面请求，css 和 js <span style="color: black;">亦</span>会 combo 成一个文件，如上图所示的 http://cdn/??mod1.css,mod2.css,mod3.css。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">任何模块的更新，页面都会有感知，下次进入系统时，就会提示<span style="color: black;">是不是</span>需要升级模块和页面。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">淘宝首页的性能优化</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/yqVAqoZvDibG6wlFUVibvvuoCyK8g203xOWC41VMpfJ4t2SGRWnibL2qpsHfPMuiaQgRpeAyLb0DgwaO6micCmV3p3Q/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">首页模块众多，<span style="color: black;">倘若</span>一口气吐出来，DOM 数量必然超过 4k 个，其结果<span style="color: black;">便是</span>首屏时间极长。<span style="color: black;">根据</span> TMS 的<span style="color: black;">研发</span>规范，<span style="color: black;">每一个</span> TMS 模块都<span style="color: black;">包括</span>一个 index.js 和 index.css，最后展示出来两个 combo 的 js 和 css。首页加载的时候<span style="color: black;">亦</span>不会一口气执行所有 index.js，否则刚<span style="color: black;">起始</span>页面阻塞会<span style="color: black;">非常</span>严重。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">页面的渲染<span style="color: black;">规律</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">首页框架的加载<span style="color: black;">规律</span>，大致如下图所示。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/uMh5nccSicmLb05B80YNCf4aSBgMGHVVjaoRdeDF5KpV4p62hdXXianNvhfJOlic2AKwYicmBSctiaL4XspDic2tAAfQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">遍历所有 TMS 模块（<span style="color: black;">包括</span>一个 J_Module 的钩子）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">部分 TMS 模块无 JS 内容，<span style="color: black;">然则</span>加载了一个 index.js，为模块添加 tb-pass 的 class，用于跳过该模块 JS 的执行</p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">将页面分为两块，首屏为<span style="color: black;">一起</span>，非首屏整体为第二块，先将首屏模块加入到懒加载监控</p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">待首屏模块加载完成，<span style="color: black;">或</span>用户处理了页面交互时（滚动、鼠标移动等），将非首屏模块加入到懒加载监控</p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">处理<span style="color: black;">有些</span>特殊模块，它们会在进入视窗之前几百像素就<span style="color: black;">起始</span>加载</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">监控滚动，<span style="color: black;">根据</span>以上<span style="color: black;">规律</span>，渲染模块</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">部分模块即便是被执行了，<span style="color: black;">亦</span>不<span style="color: black;">必定</span>渲染出来，<span style="color: black;">由于</span>它的优先级不高，在模块内部加了事件监听，<span style="color: black;">例如</span>等到 mouseover/onload 事件触发的时候再渲染这些内容。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">之前写过性能优化<span style="color: black;">关联</span>的<span style="color: black;">文案</span>，复制就<span style="color: black;">不必</span>了，直接贴<span style="color: black;">位置</span>：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">《<span style="color: black;">一块</span>来<span style="color: black;">瞧瞧</span>淘宝首页的个性化》（http://www.barretlee.com/blog/2016/03/31/personality-in-taobao-home-page/）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">《淘宝首页性能优化实践》（http://www.barretlee.com/blog/2016/04/01/optimization-in-taobao-homepage/）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">代码的性能优化是一个精细活，<span style="color: black;">倘若</span>你要在一个庞大的未经优化的页面上做性能优化，可能会面临一次重构代码。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上面的<span style="color: black;">文案</span><span style="color: black;">说到</span>的是页面内部的细节优化，<span style="color: black;">然则</span>在<span style="color: black;">研发</span>流程中做的规范化、标准化，以及线上<span style="color: black;">拜访</span>通路中的各个环节优化还<span style="color: black;">无</span>提及。这<span style="color: black;">一起</span>内容可能有点跑题，就不多说了。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">淘宝首页的稳定性<span style="color: black;">保证</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz/yqVAqoZvDibG6wlFUVibvvuoCyK8g203xOWC41VMpfJ4t2SGRWnibL2qpsHfPMuiaQgRpeAyLb0DgwaO6micCmV3p3Q/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在大流量下，任何小问题都会被放大成大问题，<span style="color: black;">因此</span><span style="color: black;">研发</span>环节遇到的任何偶发性问题都需要<span style="color: black;">导致</span><span style="color: black;">注重</span>。<span style="color: black;">不外</span><span style="color: black;">非常多</span>偶发性问题在<span style="color: black;">咱们</span>的测试环境中是找不到的，<span style="color: black;">例如</span>与地域<span style="color: black;">关联</span>的问题（如上海的某个 CDN 节点挂了），用户属性问题（如 nickname 最后一个为字母 s 的用户页面天窗），浏览器插件问题，运营商<span style="color: black;">宣传</span>注入问题等等。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">难以在上线之前把所有问题<span style="color: black;">思虑</span>周全，<span style="color: black;">然则</span>有两点是必须做好的：兜底容灾 + 监控预警。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">1、兜底容灾机制</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">兜底容灾有两个层面的<span style="color: black;">思虑</span>：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">异步接口请求错误，<span style="color: black;">包含</span>接口数据格式错误，接口请求超时等</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">同步渲染，源站页面渲染出错</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">异步接口请求，<span style="color: black;">重点</span><span style="color: black;">触及</span>到的是后台系统，对接系统较多，各个系统的稳定性和抗压能力各不相同，这方面的<span style="color: black;">保证</span>有多种<span style="color: black;">方法</span>，下面是最<span style="color: black;">平常</span>的：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">每次数据请求都缓存到本地，并且为<span style="color: black;">每一个</span>接口都<span style="color: black;">供给</span>一个硬兜底。还有一种<span style="color: black;">方法</span>是「重试」，请求一次不成功那就请求第二次。这方面的讨论<span style="color: black;">详细</span><span style="color: black;">能够</span><span style="color: black;">瞧瞧</span>之前写的这篇<span style="color: black;">文案</span>：《大流量的下兜底容灾<span style="color: black;">方法</span>》（http://www.barretlee.com/blog/2015/09/16/backup-solution-at-big-traffic/）。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span>同步渲染，它只需要页面模板和同步数据，两者中任一种存在错误，源站都会报错，此时回源返回的内容<span style="color: black;">便是</span>一个 error 页面，状态码为 5xx。这个错误不<span style="color: black;">必定</span>是<span style="color: black;">研发</span>者<span style="color: black;">导致</span>的，有可能是系统链路<span style="color: black;">显现</span>同步<span style="color: black;">反常</span><span style="color: black;">或</span>断路问题。针对这种问题，我给淘宝首页做了一个镜像页：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;">一旦源站任何<span style="color: black;">反常</span>，Nginx 都会转到与 Cache CDN 同机房的首页镜像上去，这个镜像内容<span style="color: black;">便是</span>淘宝首页的 HTML 备份源码。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">2、监控预警机制</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">能够</span>先<span style="color: black;">瞧瞧</span>之前写的这篇<span style="color: black;">文案</span>：《前端代码<span style="color: black;">反常</span>日志收集与监控》（http://www.barretlee.com/blog/2015/08/20/cb-fe-monitor/），介绍了<span style="color: black;">有些</span>监控<span style="color: black;">办法</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">监控<span style="color: black;">亦</span>有两个层面：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">模块级别的监控，接口请求布点、模块天窗检测等</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面的监控，在页面上添加特殊标记，<span style="color: black;">按时</span>回归所有 CDN 节点，查看特殊标记<span style="color: black;">是不是</span>存在</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">模块层面的监控，内容还是相当多的，监控的点越多越<span style="color: black;">仔细</span>，到最后定位问题的效率就会越高，<span style="color: black;">例如</span>在一个稍微<span style="color: black;">繁杂</span>的模块上，我会埋下这些监控：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接口请求格式错误、请求失败、请求超时，<span style="color: black;">最少</span>三个埋点</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">硬兜底数据请求失败埋点</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">模块 5s 内<span style="color: black;">无</span>渲染完成统计埋点</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">模块内链接和<span style="color: black;">照片</span>黑白名单匹配埋点</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">其中部分监控还会自动处理<span style="color: black;">知道</span>的错误，<span style="color: black;">例如</span> https 页面下<span style="color: black;">显现</span>了 http 的<span style="color: black;">照片</span>，会立即自动处理掉这些问题。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">3、上线前的自动化检测</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这属于淘宝<span style="color: black;">全部</span>工程化环境的一部分，前端自动化测试。<span style="color: black;">通常</span>会在上线之前处理这些问题：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">检测 HTML <span style="color: black;">是不是</span>符合规范</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">检测 https 升级<span style="color: black;">状况</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">检测链接合法性</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">检测静态资源合法性</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">检测 JavaScript 报错</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">检测页面加载时<span style="color: black;">是不是</span>有弹出框</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">检测页面<span style="color: black;">是不是</span>调用 console.*</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面 JS 内存记录</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当然，<span style="color: black;">亦</span>可以自己添加测试用例，<span style="color: black;">例如</span>检测接口数据格式、模块天窗问题等。自动化检测<span style="color: black;">亦</span><span style="color: black;">能够</span>设定<span style="color: black;">按时</span>回归，还是比较有<span style="color: black;">保证</span>的。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">淘宝网首页的敏捷<span style="color: black;">办法</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">1、健康<span style="color: black;">检测</span></strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面模块众多，为了能够<span style="color: black;">跟踪</span>页面上每一个小点的变化，我在请求、渲染的每一个环节都做了<span style="color: black;">仔细</span>的统计，如下图所示：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">一旦接口请求失败，<span style="color: black;">或</span>接口走了容灾<span style="color: black;">规律</span>，<span style="color: black;">或</span>模块渲染超过 5s，<span style="color: black;">掌控</span>台都会有黄色警报，当然此时，<span style="color: black;">亦</span><span style="color: black;">已然</span>向服务器发送了警报统计。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">2、接口Hub</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接口 Hub 是对数据请求的管理工具，如下图所示：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面<span style="color: black;">非常多</span>模块的渲染都需要一个以上的数据源，一旦运营反馈页面渲染数据<span style="color: black;">反常</span>，<span style="color: black;">能够</span>直接<span style="color: black;">经过</span> Hub 找到数据，加速 Bug 定位效率。<span style="color: black;">同期</span> Hub <span style="color: black;">亦</span><span style="color: black;">能够</span>用来切换环境，将一个接口的请求切换到<span style="color: black;">平常</span><span style="color: black;">或</span>预发环境的接口之中，它是调试的利器。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">3、快捷通道</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">我在页面脚本执行前后都放了一个快捷操作通道，一旦遇到紧急线上问题，<span style="color: black;">例如</span>样式错乱溢出、接口报错<span style="color: black;">引起</span>天窗等，<span style="color: black;">能够</span><span style="color: black;">经过</span>快捷通道直接修改页面的 CSS 和 JS，两分钟内上线。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">不外</span>这类通道只适合紧急问题的修复，毕竟随意<span style="color: black;">插进</span> JS 代码是存在很大<span style="color: black;">危害</span>的。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">小结</strong></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文有<span style="color: black;">非常多</span>方面<span style="color: black;">无</span>延伸拓展开，但<span style="color: black;">期盼</span><span style="color: black;">能够</span>让你对淘宝首页有一个基本的认识。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文由阿里小胡子哥授权InfoQ转载，</p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">戳<span style="color: black;"><strong style="color: blue;">阅读原文</strong></span>直达原文出处。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">▽</span></strong></span></strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">延展阅读</strong>（点击标题）：</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">专访Java Champion：程序员<span style="color: black;">怎样</span>写出更好的代码？</span></a></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">专访朱赟：上天赐予她美貌的<span style="color: black;">同期</span>，赋予了她配套的才华</span></a></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">土木工程毕业</span></a>转码农，十年干到CTO！</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>

j8typz 发表于 2024-10-10 11:22:06

你字句如珍珠，我珍藏这份情。

wrjc1hod 发表于 2024-10-19 21:34:24

祝福你、祝你幸福、早日实现等。

查看完整版本: 从PHP到Node，聊一聊淘宝首页背面的技术