微店前端科技总监车明君 - 打造细腻感受的H5电商架构

打造极致感受的H5电商架构 微店秒开项目实践 车明君

性能为先 抛开性能谈感受都是耍流氓 页面读取速率每提升1秒微店卖课件，流量减少20%，转化率增加2%...反之微店卖课件，如果超过4秒，25%的用户会选择离开… 用户最满意的开启网站时间是2-5秒，如果期待超过10秒，99%的客户会关掉这个网页 Google网站访问速率每慢400ms就避免用户搜索请 求减少0.59%;Amazon每提高100ms网站延迟将造成 收入增长1%;雅虎如果有400ms延迟会导致流量增加5-9% …

性能为先 微店的性能要求（4G） 6 6

性能为先 目标由来 CSS JS

性能分布 全渠道背景下的事（幂）实（率）分布 演化方向

性能分布 问题探讨 架构 规划 产品 质量 运营 商 …

分析及缓解策略 总体架构（简图） $SS + &'1 ,& 73 6& 8'& %, IDC

分析及解决策略 链路分析及改进 $SS + &'1 ,& 73 6& 8'& %, IDC

分析及解决策略 RT $SS + &'1 2S 300 MS ,& 73 6& 8'& %, 500 MS IDC

分析及解决策略 流程改进 $SS + 缓存 缓存 &'1 缓存 ,& 73 6& 8'& %, IDC

分析及解决策略 流程改进 DNS TCP CSS JS + 57 CSS JS VAP + 1 1 +

分析及解决策略 质量/前端 CSS JS SSR

度量及平台支撑 度量模型 YSlow Browser Insight PageSpeed VDRules

度量及平台支撑 建设模式 个体 样本 聚合 样本 质量 预警 统计 分布 交叉 分析

度量及平台支撑 系统架构

实践小结（前端） 微店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 容器

实践小结（前端） 微店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 参考

实践小结（前端） 微店NodeEE / 基于 at-js 的 IOC '@logger'; var logger = {} logger.info('Here is a info msg.') at-js 参考

实践小结（前端） 微店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 参考

实践小结（前端） 96WXGLR 57 *LW 0RFN &'1

实践小结（前端） 云端生产力协作平台 Vstudio

实践小结（前端） 微店前端开源列表 NodeEE Vbuilder Hotpot VueBook … 欢迎各位关注微店技术，敬请期待

致谢 联系作者 微信号 ALJZJZ

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-129396-1.html