静态异步化静态异步化

ADC·ADC· 阿里技术嘉年华阿里技术嘉年华

刘峻源刘峻源 // 渐飞渐飞济城济城 // 潘高潘高2013-7-132013-7-13

淘宝网商品详情页淘宝网商品详情页

静态化与异步化静态化与异步化

极大提升服务器端的并发能力极大提升服务器端的并发能力显著加速页面主页面的初始化显著加速页面主页面的初始化

淘宝网商品详情页淘宝网商品详情页

http://item.taobao.com/item.htm?id=14367918325

淘宝网商品详情页淘宝网商品详情页

日均 PV 约 6 亿常规日峰值： 1.8 万 QPS

双 11/ 双 12 峰值： 21 万 QPS

面临的性能挑战面临的性能挑战

接下来的双 11/ 双 12 促销

大型秒杀等突发流量冲击外部 DDOS 攻击各种爬虫频繁抓取数据

古老的 古老的 B/S B/S 路径路径

DatabaseDatabase

BrowserBrowser

ServerServer

BrowserBrowser BrowserBrowser

如何支撑更大的访问量如何支撑更大的访问量

增加服务器部署数量增加服务器部署数量

升级服务器硬件配置升级服务器硬件配置

或者更根本地…或者更根本地…

做缓存！做缓存！

如何合理地做缓存如何合理地做缓存？？

商品详情页重探商品详情页重探

http://item.taobao.com/item.htm?id=14367918325

商品详情页的重要特征商品详情页的重要特征

HTML HTML 文档的绝大部分文档的绝大部分对所有用户来说是对所有用户来说是完全一样完全一样的的

““ 静态内容”静态内容”

静态化静态化

ServerServer

CacheCache

BrowserBrowserBrowserBrowser BrowserBrowser

新问题新问题

动态内容如何处理动态内容如何处理 ??

异步化！异步化！

异步化手段异步化手段

服务端： ESI (Edge Side Includes)

客户端： Ajax 、 JSONP

商品详情页再探商品详情页再探

http://item.taobao.com/item.htm?id=14367918325http://item.taobao.com/item.htm?id=14367918325

店铺装修的特点店铺装修的特点

1. HTML 1. HTML 结构冗余复杂结构冗余复杂

2. 2. 引用的图片、样式众多引用的图片、样式众多

店铺装修的问题店铺装修的问题

1. 1. 增加了大量的 增加了大量的 HTTP HTTP 请求请求

2. 2. 拖累了主业务的渲染初始化拖累了主业务的渲染初始化

解决店铺装修的问题解决店铺装修的问题

1. HTML 1. HTML 与 与 CSS CSS 共存于 共存于 CDNCDN

2. 2. 主业务完成后再请求，控制渲染时主业务完成后再请求，控制渲染时机机

店铺信息缓存在 店铺信息缓存在 CDN CDN 的好处的好处

1. 1. 国内节点众多，就近下载速度快国内节点众多，就近下载速度快

2. 2. 不占用主站带宽不占用主站带宽

最终的渲染过程最终的渲染过程

主体 主体 HTML / CSS / JSHTML / CSS / JS

二方应用的异步数据二方应用的异步数据

店铺装修 店铺装修 HTML HTML 、、 CSSCSS

店铺装修 店铺装修 JSJS

ThanksThanks ！！

Q & AQ & A