淘宝首页性能优化实践
想必很多人都已经看到了新版的淘宝首页，它与以往不太一样，这一版页面中四处弥散着个性化的味道，由于独特的个性化需求，前端也面临各方面的技术挑战： 数据来源多 串行请求渲染一个模块 运营数据和个性化数据匹配和管理 数据兜底容灾 本次淘宝首页改版，虽已不再支持 IE6 和 IE7 等低版本的古董浏览器，但依然存在多个影响首页性能的因素： 依赖系统过多 ，数据的请求分为三块，其一是静态资源（如 js/css/image/iconfont 等）；其二是推到 CDN 的静态数据（如运营填写的数据、前端配置信息等）；其三是后端接口，不同的模块对应不同的业务，而且页面中还有不少的广告内容，粗略估计页面刚加载时首屏发出的接口请求就有 8 个，滚到最底下，得发出 20 多个请求。 无法直接输出首屏数据 ，首屏很多数据是通过异步请求获取的，由于系统限制，这些请求不可避免，而且请求个数较多，十分影响首屏时间。 模块过多 ，为了能够在后台隔离运营之间填写数据的权限，模块必须做细粒度的拆分，如下图所示： 一个简单的模块必须拆分成多个行业小模块，页面中其他位置也是如此，而且这些被拆分出来的模块还不一定会展现出来，需要让算法告诉前端展示哪些模块。 图片过多 ，翻页往下滚动，很明显看到，页面整屏整屏的图片，有些图片是运营填写，有些图片由个性化接口提供，这些图片都没有固定的尺寸。 网页性能衡量指标