基于 Node.js 的10亿PV级移动 Webapp 开发

By 徐⼀一智@百度 (xuyizhi@gmail.com)

关于我

• zezhou (徐⼀一智)
 • 喜欢：Web 开发, Machine

Learning, Python
 • ⺫⽬目前做移动前端架构⽅方⾯面的⼯工作
 • github (@zezhou) 微博 (@我是

阿徐)

反馈交流：xuyizhi@gmail.com

10亿级PV移动产品发展历程







3 php html



Webapp



0 2012.08



2012.10



node.js



Restful API



稳定性提升



速度优化



2013.03



2013.09



2014.01



2014.04

前端开发职责

产品成⻓长过程中遇到哪些问题?

开发效率 ⾼高性能;⾼高并发;稳定性

⽤用户体验

挑战⼀一：创造极致的⽤用户体验







3 php html



Webapp



0 2012.08



2012.10



node.js



Restful API



稳定性提升



速度优化



2013.03



2013.09



2014.01



2014.04

移动下需要什么样的 体验？

• 触屏操作
 • 适合⼿手机屏幕阅读


• Native 的流畅体验


• 适应移动⺴⽹网络环境( 速 度快, 容错，省流量 )

选型



Web 导流⽅方便

单⻚页应⽤用开发难点

• ⾃自⼰己管理状态 (路由，render, template)，复杂度和 Web ⻚页⾯面 相⽐比上升n倍


• 追求native般的操作流畅性


• 移动环境下的新问题 (移动 2G,3G,4G⺴⽹网络的适配, android, ios的适配)



复杂度 流畅性 移动

降低代码复杂度: Web UI 分层架构

简化各层级之间关系：单向调⽤用

Single Page Webapp 结构图

挑战⼆二：⽀支持产品的指数级增⻓长







3 php html



Webapp



0 2012.08



2012.10



node.js



Restful API



稳定性提升



速度优化



2013.03



2013.09



2014.01



2014.04

App Server 架构变迁

PV上涨，性能问题浮现

RD

PV半年翻10倍 ⾼高峰期并发 3w+

慢后端服务 每次请求要连 5-6 个后端,经常超时

webpush,离线下载



OP 加机器

…

解决性能问题：服务端架构从PHP迁移到Node.js

同步阻塞（排队）

异步⾮非阻塞（叫号） 单进程单线程，V8 + libuv，天⽣生⾼高并发

PHP迁移Node.js之后qps增加了7倍



100 75 50 25 0 100qps



200qps



300qps



400qps



700qps

产品功能增加, 系统复杂度膨胀

某个版本的数据流⾛走向

增强代码可维护性



//传统回调⽅方式 var titles = [] getCatalog(null, function(err, catalog){ // 回调1

getArticles(err, function(articles){ // 回调2 getTitles(err, fetechedTitles){ // 回调3 titles = fetechedTitles }

}) })



//async ⽅方式 var titles = [] async.waterfall([

getcatalog, getarticles, getTitles ], function(res){ titles = res } )



// es6 & koa ⽅方式 var titles = [] co(function *() {

var catalog = yield getCatalog(gid) var articles = yield getArticles(catalog) titles = yield getTitles(articles) });



• 减少回调 (回调只允许⼀一次, async, 层之间交互⽤用 event ) • ES6 的 Generator, Koa, co

MVC分层架构降低复杂度

被上层调⽤用，调⽤用下层（之间event通讯）

挑战三：快







3 php html



Webapp



0 2012.08



2012.10



node.js



Restful API



稳定性提升



速度优化



2013.03



2013.09



2014.01



2014.04

⾸首屏加载速度优化











0 监控



移除iscroll



合并请求



⺴⽹网络TCP优化 local storage缓存 ⾸首屏预渲染

前端异常监控

⽐比⽤用户先发现问题

挑战四：1 V N







3 php html



Webapp



0 2012.08



2012.10



node.js



Restful API



稳定性提升



速度优化



2013.03



2013.09



2014.01



2014.04

服务API化 解决对外合作问题

服务API化

关键⼀一 Restful 关键⼆二 ⽂文档

提升开发效率 UI的抽象,复⽤用

Mob UI 框架

挑战五：超⼤大流量下的服务稳定性







3 php html



Webapp



0 2012.08



2012.10



node.js



Restful API



稳定性提升



速度优化



2013.03



2013.09



2014.01



2014.04

流量继续上涨，发⽣生雪崩

⼀一个机房，⼀一台机器出问题造成整个系统崩溃

出问题时的应对

• 制定降级预案，优雅降级 • 简单问题快速上线修复 • 查看公司运维系统, 监控系统，⽇日志平台，报表 • 查看分层⽇日志快速定位：query log, request log, error log,

node error log • 错误追踪: logid 串起前后端各个模块的⽇日志 • 内存泄露: heapdump diff • 不要解析⼤大⽂文本等耗cpu性能的的⼯工作

问题预防 - Design for Failure

• 上线: 先⼩小流量上线单台机器，经过⾼高峰期考验再全流量 上线

• 模块隔离

• 流量设置阈值防⽌止下游雪崩

• 对于重试等策略通过判断状态码等进⾏行优化

• 评估系统各⼦子模块流量，对⼦子模块进⾏行监控，达到最⾼高 容量80%就报警扩容

在你的产品中也⽤用上 10亿级PV的前端架构

Mob UI 框架

• mobile 版 bootstrap (类似于 zepto 和 jquery 的关系) • 重点在 mobile 专属组件(下滑刷新，触摸) • 和 agularjs, reactjs, backbone 结合开发webapp • http://mobframe.github.io/mob/

Lark Node.js 框架

• 专注于做⼯工业级Node.js的架构 • 对线上众多10亿级Node.js产品的实践经验的总结 • 即开即⽤用 • https://github.com/larkjs