淘宝首页性能优化的“黄金法则”

我在《一起来看看淘宝首页的个性化》中，带大家看了下弥散着个性化味道的新首页，前端面临着：

数据来源多

串行请求渲染一个模块

运营数据和个性化数据匹配和管理

数据兜底容灾

等多个问题。本次淘宝首页改版，虽已不再支持 IE6 和 IE7 等低版本的古董浏览器，但是依然存在多个影响首页性能的因素：

依赖系统过多，数据的请求分为三块，其一是静态资源（如 js/css/image/iconfont 等）；其二是推到 CDN 的静态数据（如运营填写的数据、前端配置信息等）；其三是后端接口，不同的模块对应不同的业务，而且页面中还有不少的广告内容，粗略估计页面刚加载时首屏发出的接口请求就有 8 个，滚到最底下，得发出 20 多个请求。

无法直接输出首屏数据，首屏很多数据是通过异步请求获取的，由于系统限制，这些请求不可避免，而且请求个数较多，十分影响首屏时间。

模块过多，为了能够在后台隔离运营之间填写数据的权限，模块必须做细粒度的拆分，如下图所示：

一个简单的模块必须拆分成多个行业小模块，页面中其他位置也是如此，而且这些被拆分出来的模块还不一定会展现出来，需要让算法告诉前端展示哪些模块。

图片过多，翻页往下滚动，很明显看到，页面整屏整屏的图片，有些图片是运营填写，有些图片由个性化接口提供，这些图片都没有固定的尺寸。

网页性能衡量指标

网页性能衡量指标有很多，倘若能够把握关键的几个，集中优化，性能自然也就上去了。

FPS

最能反映页面性能的一个指标是 FPS（frame per second），一般系统设定屏幕的刷新率为 60fps，当页面元素动画、滚动或者渐变时绘制速率小于 60，就会不流畅，小于 24 就会卡顿，小于 12 基本认定卡爆了。

1 帧的时长约 16ms，除去系统上下文切换开销，每一帧中只留给我们 10ms 左右的程序处理时间，如果一段脚本的处理时间超过 10ms，那么这一帧就可以被认定为丢失，如果处理时间超过 26ms，可以认定连续两帧丢失，依次类推。我们不能容忍页面中多次出现连续丢失五六帧的情况，也就是说必须想办法分拆执行时间超过 80ms 的代码程序，这个工作并不轻松。

页面在刚开始载入的时候，需要初始化很多程序，也可能有大量耗时的 DOM 操作，所以前 1s 的必要操作会导致帧率很低，我们可以忽略。当然，这是对 PC 而言，Mobile 内容少，无论是 DOM 还是 JS 脚本量都远小于 PC，1s 可能就有点长了。

DOMContentLoaded 和 Load

DOM 加载并且解析完成才会触发 DOMContentLoaded 事件，倘若源码输出的内容过多，客户端解析 DOM 的时间也会响应加长，不要小看这里的解析时间，如果 DOM 数量增加 2000 个并且嵌套层级较深，解析时间也会相应增加 50-200ms，这个消耗对大多数页面来说其实是没必要的，保证首屏输出即可，后续的内容只保留钩子，利用 JS 动态渲染。

Load 时间可以用来衡量首屏加载中，客户端接受的信息总量，如果在首屏中充满了大尺寸图片或者客户端与后端建立连接次数较多，Load 时间也会相应被拖长。

流畅度

流畅度是对 FPS 的视觉反馈，FPS 值越高，视觉呈现越流畅。为了保障页面的加载速度，很多内容不会在页面打开的时候全部加载到客户端。这里提到的流畅度是等待过程中的视觉缓冲，如下方是 Google Plus 页面的一个效果图：

墙内访问 Google 的速度不是很快，上面元素中的的很多内容都是通过异步方式加载，而从上图可以看出 Google 并没有让用户产生等待的焦虑感。

淘宝首页的性能优化

由于平台限制，淘宝首页面临一个先天的性能缺陷，首屏的渲染需要从 7 个不同的后端取数据，这些数据请求是难以合并的，如果用户屏幕比较大，则首屏的面积也比较大，对应的后端平台数据接口就更多。数据是个性化内容或者为广告内容，故请求也不能缓存。

关键模块优先

不论用户首屏的面积有多大，保证关键模块优先加载。下面代码片段是初始化所有模块的核心部分：

TMS 输出的模块都会包含一个 .J_Module 钩子，并且会预先加载 js 和 css 文件。

对于无 JS 内容的模块，会预先打上 tb-pass 的标记，初始化的时候跳过此模块；对于首屏模块关键模块，会直接进入懒加载监控：

除必须立即加载的模块外，关键模块被加到懒加载监控，原因是，部分用户进入页面就可能急速往下拖拽页面，此时，没必要渲染这些首屏模块。

非关键模块统一送到 lazyQueue 队列，没有基于将非关键模块加入到懒加载监控，这里有两个原因：

一旦加入监控，程序滚动就需要对每个模块做计算判断，模块太多，这里可能存在性能损失

如果关键模块还没有加载好，非关键模块进入视窗就会开始渲染，这势必会影响关键模块的渲染

那么，什么时候开始加载非关键模块呢？

上面的代码应该十分清晰，两种请求下会开始将非关键模块加入懒加载监控：

当页面中触发 mousemove scroll mousedown touchstart touchmove keydown resize onload 这些事件的时候，说明用户开始与页面交互了，程序必须开始加载。

如果用户没有交互，但是页面已经 onload 了，程序当然不能浪费这个绝佳的空档机会，趁机加载内容；经测试，部分情况下，onload 事件没有触发（原因尚不知），所以还设定了一个超时加载，5s 之后，不论页面加载情况如何，都会将剩下的非关键模块加入到懒加载监控。

懒执行，有交互才执行

如果说上面的优化叫做懒加载，那么这里的优化可以称之为懒执行。

首页上有几个模块是包含交互的，如头条区域的 tab ，便民服务的浮层和主题市场的浮层，部分用户进入页面可能根本不会使用这些功能，所以程序上并没有对这些模块做彻底的初始化，而是等到用户 hover 到这个模块上再执行全部逻辑。

更懒的执行，刷新页面才执行

首屏中有两个次要请求，一个是主题市场的 hot 标，将用户最常逛的三个类目打标；第二个是个人中心的背景，不同的城市会展示不同的背景图片，这里需要请求拿到城市信息。

这两处的渲染策略都是，在程序的 idle（空闲）时期，或者 window.onload 十秒之后去请求，然后将请求的结果缓存到本地，当用户第二次访问淘宝首页时能够看到效果。这是一种更懒的执行，用户刷新页面才看得到。这种优化是产品能够接受，也是技术上合理的优化手段。

图片尺寸的控制和懒加载

不论图片链接的来源是运营填写还是接口输出，都难以保证图片具备恰当的宽高，加上如今 retina 的屏幕越来越多，对于这种用户也要提供优质的视觉体验，图片这块的处理并不轻松。

阿里 CDN 是支持对图片尺寸做压缩处理的，如下图为 200x200 尺寸的图片：

加上 _100x100.jpg 的参数后，会变成小尺寸：

我们知道 webp 格式的图片比对应的 jpg 要小三分之一，如上图加上 _.webp 参数后：

100x100 webp（不支持 webp 格式的浏览器展示不出来这张图片）

视觉效果并没有什么折扣，但是图片体积缩小了三分之一，图片越大，节省的越明显。显然，淘宝首页的所有图片都做了如上的限制，针对坑位大小对图片做压缩处理，只是这里需要注意的是，运营填写的图片可能已经是压缩过的，如：

上面这种情况，图片是不会正确展示的。首页对所有的图片的懒加载都做了统一的函数处理：

模块去钩子，走配置

TMS 的模块在输出的时候会将数据的 id 放在钩子上：

如果模块是异步展示的，可以通过 tms-datakey 找到模块数据，而首页的个性化是从几十上百个模块中通过算法选出几个，如果把这些模块钩子全部输出来，虽说取数据方便了很多，却存在大量的冗余，对此的优化策略是：将数据格式相同的模块单独拿出来，新建页面作为数据页。所以可以在源码中看到好几段这样的配置信息：