T 沙龙移动实践日总结 ——享物说大流量⼩程序的架构与性能优化方案
PPT 和 视频
视频地址
PPT地址
下面是 T 沙龙小编对分享的一些总结:
第一位分享嘉宾是来自享物说的 Rolland Safort(中文名:塞福),目前负责享物说小程序开发工作,有多年前端工作经验,对前端开发有深入的理解。他为大家带来了享物说团队小程序开发过程中积累的一些架构与性能优化方案。
一、小程序简介
因为在场的同学有很大一部分是 iOS 和 Android 开发,对 Web 端和小程序开发并不是十分了解,所以塞福首先对小程序的基本组成和实现原理进行了简单的介绍。
微信小程序运行在三端:iOS、Android 和用于调试的开发者工具中。本质上都是通过各个平台的 WebView 和 JS 解析器来进行渲染和解释运行。
JavaScript:微信小程序的 JavaScript 运行在微信 App 的上下文中,不能直接操作 DOM,也不能通过 Node.js 相关接口访问操作系统 API。在 iOS 上,小程序的 JavaScript 代码是运行在 JavaScriptCore 中;在 Android 上,小程序的 JavaScript 代码是通过 X5 内核来解析的;在开发工具上,小程序的 JavaScript 代码是运行在 NW.js (基于 Chromium 和 Node.js 运行,以前也叫 nodeWebkit)上的。 WXML:微信小程序的展示层,是微信自己定义的基于 XML 语法的描述语言。 WXSS:用来修饰 WXML 展示层的样式,类似 CSS 和 HTML 的关系。WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。WXSS 具有 CSS 大部分特性,对 CSS 进行了扩充以及修改。
小程序的开发当中也有一些注意点需要关注:
- 小程序发起的都是 HTTPS 网络请求,在开发调试的过程中可以不校验协议和 TLS 版本,但在实际上线后必须进行 HTTPS 通信;
- 微信小程序名称在帐号信息设置时完成,名称可以由中文、数字、英文,长度在 3-20 个字符之间,一个中文字等于 2 个字符,一旦设置完成后需要修改的话,300 RMB 可修改一次(别问我是怎么知道的),且有次数限制;
- 小程序开发完成后打包有大小限制,最大每个包 2M,最多 4 个包,一些占包体积较大的资源需要尽量压缩。
大家可以大概想象一下小程序的执行过程:
- 用户在微信中点击、打开某一个小程序;
- 微信 App 从服务器下载这个小程序包;
- 微信内置的运行环境分析小程序包得到应用程序的配置信息加载并运行 app.js;
- 根据用户操作进一步响应各种用户行为。
二、享物说小程序
享物说小程序是一个比较大型的小程序,因为享物说整个平台都是小程序起家的,所以小程序承载了享物说平台的几乎全部功能,iOS 和 Android 的原生 App 虽然已经发布了一些版本,但还在完善和丰富功能的过程中。
1. 发展历史、架构
享物说小程序目前主要经历过一次大规模的重构,之前的旧版本使用了微信官方的小程序开发框架,而新版采用美团的 mpvue 进行重构,在性能和体验上有了进一步的提升。
使用 mpvue 主要有以下一些优势:
- 彻底的组件化开发能力,提高代码复用性;
- Vuex 数据管理方案,方便构建复杂应用;
- 快捷的 webpack 构建机制,自定义构建策略、开发阶段 hotReload,提升开发效率;
- 支持使用 npm 外部依赖;
- 支持 H5 代码转换编译成小程序代码。
享物说小程序从 2017 年9 月上线,至今已有超过 2000 万用户使用,上图展示了享物说用户量变化的一个大致趋势。
2. 埋点、测试、监控
小程序相比原生 App,最显著的一个特征就是可以快速迭代,虽然它的主包发版也需要一定的审核时间,但是相比原生 App,小程序可以通过将大部分资源和配置部署到服务器上来实现变相的热修改 / 热更新,这为产品的灰度发布、BUG 修正、功能开发带来了极大的便利。
正因为小程序的灵活性给业务带来的便利性,需要去对它的埋点和检测进行一个比较好的维护,不仅限于小程序的页面访问、用户操作、事件触发等,还要尽可能追踪每一个分享出去的 URL 的传播轨迹和访问流量,根据所得数据来进行分析从而为接下来的业务方向指路。
三、性能与体验优化
享物说小程序上线至今未满一年,成长速度可以用夸张来形容,但令享物说团队欣喜之余,带给他们的还有严峻的业务压力和流量高峰挑战。
以下这些是享物说团队的部分小程序优化经验和建议:
- 少⽤ setData,如果需要渲染可以使⽤用 this.data.key = value;
- 尽量使用 CDN,图片都用懒加载;
- 使⽤用分包加载;
- 优化代码,清理没有使⽤到的代码和资源 ,减小包体积;
- 开发环境添加 ESlint 代码校验;
- 分享图片及其他经常变的静态资源,不能写死在前端,通过接口动态获取,减少重新发版的可能性。
四、高可⽤的⼩程序
面对一个用户量如此大的平台,传统的解决方案可能都会有些捉襟见肘,享物说小程序都做了哪些来获得相对稳定的线上运行状态呢?
1. 超时设置
- 网络请求,默认超时时间和最大超时时间都 60s;
request
、uploadFile
、downloadFile
的最大并发限制是 10 个 超出最大并发数的请求,会等待前面的请求完成或者超时。
2. 服务降级
根据后端负载和可⽤状况,结合之前所说的服务分级,把后端 的服务等级做响应的调整。如果服务端负载过重,那么可以有 针对地拒绝服务或者关闭服务。高峰期间,对⾮核心业务,超出服务端负 荷的情况下,可以考虑暂时关闭服务。
在极端情况下,可以考虑仅在 CDN 提供只读的静态内容。
3. 服务监控
微信官⽅给⼩程序提供了运维中⼼,在这⾥可以看到小 程序的近乎实时的运⾏⽇志。如有必要,可以埋点收集 在异常发⽣时候的⽤户操作路径,帮助事后复现问题。
4. Webviews
活动和部分⾮核心业务使⽤ H5 实现,并且通过 WebView 在⼩程序内展示。
五. 总结
享物说小程序上线近一年过程中最大的问题就是流量压力导致的性能和稳定性问题,享物说团队的同学通过如下一些手段对该问题进行了解决:
- 使用 mpvue 对整个小程序进行重构;
- 添加完善的埋点并结合微信提供的运维中心对整个线上运行状况进行完整的监控和管理;
- 核心业务整理 / 优化,非核心业务 H5 化,必要时非核心业务降级,保证主业务可用性;
- 资源与配置动态话,实现无需发版的线上热修改 / 热更新。
转载于:https://juejin.im/post/5b860d91e51d4538cf53eb05
T 沙龙移动实践日总结 ——享物说大流量⼩程序的架构与性能优化方案相关推荐
- 【MCtalk活动推荐】娱乐社交APP的AI探索、架构与性能优化实践
活动背景 近几年,随着大众生活需求的不断深入与拓展,各类垂直性App开始呈现崛起之势.在移动互联网大热的现今,除开微信.QQ等必备社交软件,垂直类娱乐社交App应用软件备受企业开发者青睐.一些娱乐社交 ...
- 让你的断舍离不再无处安放 享物说发起小红花联盟
可能每个女生都有过这样的遭遇:一件不常用的物品,二手卖不出去还浪费时间,扔了又舍不得,可是不扔怎么买新的呢? 正是在这样的需求之下,大量二手闲置交易平台应运而生. 而在众多的二手交易平台中,享物说能够 ...
- DataPipeline | 享物说产品负责人夏凯:数据驱动的用户增长实战
夏凯,卡内基梅隆大学计算机系毕业,曾供职于Evernote数据团队和微软Bing.com搜索引擎广告部门.回国后作为早期成员加入小红书,先后从事大数据,用户增长,项目和团队管理等工作. 我最初是在美国 ...
- 兴趣部落的前端性能优化实践概览
本文对兴趣部落项目前端开发中使用到的性能优化方式进行总结.兴趣部落项目是手机QQ(以下简称手Q)中最大的纯网页应用,每日有大量的用户访问,对于腾讯这样一个对产品有着极致要求的公司,性能优化是一个绕不开 ...
- 何崚谈阿里巴巴前端性能优化最佳实践
转载:http://www.infoq.com/cn/interviews/hl-alibaba-front-end-performance-optimization 大家好,我现在在阿里巴巴园区采访 ...
- ELK 性能优化实践
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 一.背景介绍 近一年内对公司的 ELK 日志系统做过性能优 ...
- DotNET企业架构应用实践-系统架构与性能-缓存技术与ORM中的缓存查询技术
系列回顾 在前面的文章DotNET企业架构应用实践-系统架构与性能-理论依据及相关做法一文中我介绍了系统性能优化的理论做了一个概括的介绍,也简单的介绍了性能优化的过程及相关的技术关注点或者说是做法. ...
- Hadoop YARN:调度性能优化实践【转】
原文地址:https://www.infoq.cn/article/dh5UpM_fJrtj1IgxQDsq 背景 YARN 作为 Hadoop 的资源管理系统,负责 Hadoop 集群上计算资源的管 ...
- Hadoop YARN:调度性能优化实践
背景 YARN作为Hadoop的资源管理系统,负责Hadoop集群上计算资源的管理和作业调度. 美团的YARN以社区2.7.1版本为基础构建分支.目前在YARN上支撑离线业务.实时业务以及机器学习业务 ...
最新文章
- 高效率开发必备!!!!
- jsonp数据库拿数据到html页面,前端如何优雅的使用jsonp获取接口数据
- MySQL对查询结果排序
- java 实现按规则自增功能_java运算符详解 - osc_74vaali6的个人空间 - OSCHINA - 中文开源技术交流社区...
- 计算机科学与技术考研课程安排,计算机科学与技术(0812)硕士研究生培养方案(一)...
- java set集合转数组_java set转list,数组与list的转换
- 表格数据画图神器-pandas画图操作
- canvas的基础使用。
- ASP.NET 3.5核心编程学习笔记(17):基于数据源的数据绑定
- 2019牛客多校第三场F Planting Trees(单调队列)题解
- window下Python2.7和3.5共存以及两个版本下使用pip
- Linux Vim编辑器的基本使用
- btsync 分享资源
- ZTE MF971V LTE Cat6 MiFi Review
- eclipse中Ctrl+Alt+↓向下复制快捷键与系统中翻转屏幕快捷键冲突问题(已解决)
- win10计算机管理中没有本地用户和组怎么办?
- Python——玩转Word自动化
- 151202storyboard中, 设置子控件和父控件的高宽比
- SpringBoot中关于RunWith以及SpringBootTest
- GA/百度统计/Piwik/JYC:网站分析工具的Cookie设置和访次切分规则
热门文章
- 金立软件测试员,挑战不可能的任务:金立M5暴力放电测试
- 加速文件传输协议如何工作?
- CAXA CAD工艺图表 2022,打造高效数字化制造新纪元
- 如何排查、解决那些长时间GC停顿的问题
- JAVA微信小程序图书馆座位预约小程序系统毕业设计 开题报告
- YESLAB教学环境及设备
- 技术人员必须具备的四种能力|关于技术对话与思考
- android 仿微信demo——持续更新(实现移动端,服务端)
- 熟悉mysql基本数据库操作系统_数据库系统原理(第四章:SQL与关系数据库基本操作 )...
- text-algin:center使文字居中在某些浏览器无效的情况