微店前端技术总监车明君 - 打造极致体验的H5电商架构

blockchain

2017/11/14 发布于 技术 分类

有人说,好的架构,是演化出来的,电商网站的架构也是如此。架构的演化过程,就是技术团队不断追求极致的过程。本次分享将总结微店H5电商网站的架构演进。 提纲: 1、微店场景下,以H5传播为主的渠道电商性能分布; 2、极致体验的架构设计方法论; 3、性能的衡量及系统支撑; 4、微店H5架构的性能提升手段; 5、改造实施过程,以及效果呈现。

文字内容
1. 打造极致体验的H5电商架构 微店秒开项目实践 车明君
2. 性能为先 抛开性能谈体验都是耍流氓 页面加载速度每提高1秒,流量增加20%,转化率增加2%...反之,如果超过4秒,25%的用户会选择离开… 用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页 Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致 收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9% …
3. 性能为先 微店的性能要求(4G) 6 6 Ḓ୏ ԫེ
4. 性能为先 目标由来 ୌᒈᬳള  ‫ݸ‬ᒒ॒ቘ  CSS ࢶᇆ  JS 
5. 性能分布 全渠道背景下的事(幂)实(率)分布 演化方向
6. 性能分布 问题分析 架构 规划 产品 质量 运营 商 …
7. 分析及解决思路 总体架构(简图) ᒒ ള‫੶ف‬ $SS + ੜᑕଧ ŏ ‫ݻݍ‬դቘᵞᗭ &'1 ֛ᔮඪඅ ᫝ղ ᦢᳯ ӱ‫ۓ‬ऒ ஙମ ‫ړ‬ᲀ ŏ ŏŏ ໐ஞӱ‫ۓ‬ ๐‫ۓ‬۸ ,& 73 6& 8'& ඪ՞ ŏ ൤ᔱඪ අ֛ᔮ %,य़හ ഝ֛ᔮ ፊഴ ෭ப ᕹᦇ ᩒԾऒ හഝ ‫૲ړ‬ୗඪඅ IDC
8. 分析及解决思路 链路分析及优化 ᒒᒒ ളള‫੶فف‬ $SS + ੜᑕଧ ŏ ‫ݻݍ‬դቘᵞᗭ &'1 ֛ᔮඪඅ ᫝ղ ᦢᳯ ӱ‫ۓ‬ऒ ӱ‫ۓ‬ ஙମ ‫ړ‬ᲀ ŏ ŏŏ ໐ஞӱ‫ۓ‬ ๐‫ۓ‬۸ ,& 73 6& 8'& ඪ՞ ŏ ൤ᔱඪ අ֛ᔮ %,य़හ ഝ֛ᔮ ፊഴ ෭ப ᕹᦇ ᩒԾऒ හഝ හഝ ‫૲ړ‬ୗඪඅ IDC
9. 分析及解决思路 RT ᒒᒒ ളള‫੶فف‬ $SS + ੜᑕଧ ŏ ‫ݻݍ‬դቘᵞᗭ &'1 2S ֛ᔮඪඅ 300 ᫝ղ MS ᦢᳯ ӱ‫ۓ‬ऒ ӱ‫ۓ‬ ஙମ ‫ړ‬ᲀ ŏ ŏŏ ໐ஞӱ‫ۓ‬ ๐‫ۓ‬۸ ,& 73 6& 8'& ඪ՞ ŏ ൤ᔱඪ අ֛ᔮ %,य़හ ഝ֛ᔮ ፊഴ 500 MS ෭ப ᕹᦇ ᩒԾऒ හഝ හഝ ‫૲ړ‬ୗඪඅ IDC
10. 分析及解决思路 流程优化 ᒒ ള‫੶ف‬ $SS + ੜᑕଧ ŏ 缓存 ‫ݻݍ‬դቘᵞᗭ 缓存 &'1 ֛ᔮඪඅ ᫝ղ ᦢᳯ ӱ‫ۓ‬ऒ ໐ஞӱ‫ۓ‬ ஙମ ‫ړ‬ᲀ ŏ 缓存 ŏ ŏ ๐‫ۓ‬۸ ,& 73 6& 8'& ඪ՞ ŏ ൤ᔱඪ අ֛ᔮ %,य़හ ഝ֛ᔮ ፊഴ ෭ப ᕹᦇ ᩒԾऒ හഝ ‫૲ړ‬ୗඪඅ IDC
11. 分析及解决思路 流程优化 ᗑᕶ DNS TCPୌᒈᬳള փᬌ ᗑᕶ ᗑᕶ CSS JS + ᬩᓒ ᗑᕶ57 ୌᒈᬳള ‫ݸ‬ᒒ॒ቘ CSS ࢶᇆ JS VAP + ᦇᓒ ᗑᕶ ᗑᕶ ࢶᇆ1 ࢶᇆ1 + ᕮ๳ ᕮ๳
12. 分析及解决思路 质量/前端 ୌᒈᬳള  ၞᑕս۸ ֛ḵս۸ ईᅩս۸ ‫ݸ‬ᒒ॒ቘ  CSS ࢶᇆ  JS  SSR ᧗࿢ᥢ‫ښ‬ ጮ੽ ಑ ବ Ḓ੽ ӱ‫ۓ‬௔ᚆ୑ଉŏ ᕮ๳
13. 度量及系统支撑 度量模型 YSlow Browser Insight PageSpeed VDRules
14. 度量及系统支撑 建设思路 个体 样本 聚合 样本 质量 预警 统计 分布 交叉 分析
15. 度量及系统支撑 系统架构 ईᅩ ௔ᚆ ᯻ᵞᒒ ୑ଉ ӱ‫ۓ‬ಘ઀ ൊկ਻࢏ चᏐ๐‫ۓ‬ ŏ ള‫ف‬๐‫ۓ‬ ᥢ‫ڞ‬ ᦇᓒ ᥢ‫ڞ‬ ᥢ‫ڞ‬ ᥢ‫ڞ‬ ŏ ᥢ‫ڞ‬ ਂ‫ؙ‬ ᥢ‫ڞ‬ ᥢ‫ڞ‬ ᥢ‫ڞ‬ ŏ ᥢ‫ڞ‬ ઀ሿ ᥢ‫ڞ‬ ᥢ‫ڞ‬ ᥢ‫ڞ‬ ŏ ᯻ᵞᒒ ๐‫ۓ‬ള‫ݗ‬
16. 实践总结(前端) 微店NodeEE 分布 式 VUE ᚕಋຝಘ SSR ઀ ‫زܔ‬ၥᦶ at-test Log co pm2/ext ള‫੶ف‬ ӱ‫੶ۓ‬ 800 TPS 水平 扩容 API ORM at-dao toybricks ஙٖ໐ຝ຅ WEB໛ຝ @vdian/koa-vrouter NodeEEᕟկ࿰ ᫝ ղ ᦊ 53& ᦤ koa at-js DI/IOC 容器 ӱ‫ۓ‬ऒ
17. 实践总结(前端) 微店NodeEE / 基于 at-js 的 DAO '@dao.column(name=url)'; var url; '@dao.column(name=gmt_create)'; var createTime = function (_time) { var mm = require('moment'); return mm(_time).format("YYYY-MM-DD HH:mm:ss"); } at-dao 参考 https://github.com/CheMingjun/at-dao
18. 实践总结(前端) 微店NodeEE / 基于 at-js 的 IOC '@logger'; var logger = {} logger.info('Here is a info msg.') at-js 参考 https://github.com/CheMingjun/at-js
19. 实践总结(前端) 微店NodeEE / 基于 at-js 的 单元测试 var assert = require('assert'); var ds = null; '@test.start'; var start = function () { ds = {}; } '@test.step(timeout=2000)'; var test0 = function* () { ds.test0 = 'finish'; var rtn = yield (function(){ return function(_next){ setTimeout(function(){ _next(null,3); },2000) } })(); assert.equal(rtn,3); } '@test.step'; var test1 = function () { ds.test1 = 'finish'; return ds; } at-test 参考 https://github.com/CheMingjun/at-test
20. 实践总结(前端) ᖫᬋ ๜ࣈԯ ᒒ ᖫᑕ ཛྷࣳ 96WXGLRԯᒒኞԾ‫ێ‬ଘ‫ݣ‬ ຅ୌ ᚕಋຝ ૡᑕ ཛྷࣳ ᨶᰁ ၥᦶ ‫૲ݎ‬ 57 ፊၥ *LW ᨶᰁ ༄ັ 0RFN ᛔۖ۸ ၥᦶ &'1 ᕹӞ‫ݎ‬ ૲ᔮᕹ ईᅩ ௔ᚆ
21. 实践总结(前端) 云端生产力协作平台 Vstudio
22. 实践总结(前端) 微店前端开源列表 NodeEE Vbuilder Hotpot VueBook … 欢迎大家关注微店技术,敬请期待
23. 致谢 联系作者 微信号 ALJZJZ