关键词:
这篇文章是2018年3月写的,本身只是做了简单的内部分享。近期被人问题这段经历,发现忘得一干二净,于是再拿出来回顾回顾。
前言:前端应用的启动速度一向是移动终端的优化重点,因为这是面向用户进入的大门。良好的启动速度无异于会带来良好的用户体验。
本篇文章主要介绍每日优鲜主商城小程序的启动速度优化方法。
启动时间消耗概览
小程序的启动时间主要分为以下几个阶段:
- 微信客户端比对版本差异,下载并加载代码。
- 小程序本身的初始设置,业务逻辑请求处理。
- 页面的渲染。
所以,小程序从点击启动到渲染完成主要会经历以上几个过程,接下来我们针对以上部分进行优化说明。
代码下载加载阶段
众所周知,小程序本身使用的是JS,HTML,CSS等语言进行开发。所以在代码发布时,微信会对这些文本文件进行必要的体积压缩。除此之外还有应用所需的图片资源文件。
所以发布后的小程序主要包括:
- 压缩后的JS,HTML,CSS等文本文件。
- 应用中所需的图片资源文件。
这些文件的总体积便会影响到小程序第一阶段的加载速度。而在这些文件中,图片资源文件占了总体积将近80%的比例。
所以,针对这一阶段的主要优化方式为:
-
将不必要的图片资源存储于服务器,通过url加载。 不必要的图片资源包括但不限于:营销活动的背景图、活动的规则说明图、活动Banner、GIF图等。在优化时,按照文件大小从大到小排序,分情况处理。
-
将必要的Icon图做压缩,如果不需要Aphla通道的图可转换为JPEG格式。
推荐在线图片压缩处理网站:https://tinypng.com/ -
对于按钮背景图等可使用CSS达到同样效果的使用CSS绘制。
-
避免冗余代码,及时移除废弃代码。
代码初始化,业务逻辑请求处理
这一部分主要与业务本身联系紧密,需要根据业务需要来进行优化处理。以下主要针对主商城的业务模式进行优化说明:
小程序优化之前的启动过程如下:
- 登录 -> 获取上次下单地址 -> 请求货架信息 -> 通过购物车信息 -> 渲染
第二次启动过程如下(与首次相同):
- 登录 -> 获取上次下单地址 -> 请求货架信息 -> 通过购物车信息 -> 渲染
小程序优化之后的首次启动过程如下:
- 登录 -> 获取上次下单地址 -> 请求货架信息 -> 分页渲染 -> 同步购物车信息
第二次启动过程如下(没有登录过程):
- 获取用户上次下单地址 -> 请求货架信息 -> 分页渲染 -> 同步购物车信息
可以看到,这里主要针对登录做了优化,并将页面渲染前置。
在优化过程中,发现小程序每次都会重新登录,显然不需要这么做。如果将登录状态存储在本地,可以减少登录一系列过程的开销。但是为了保证登录状态的过期问题,所以专门对网络框架层做了处理:如果后端返回statusCode为401或者403,或者statusCode为200但是内部的code为102,则会重新走登录过程。登录完毕之后会再次请求原有的接口,好处在于业务层并不需要关心也不会感知到token过期的问题。
渲染
在优化之前,小程序会显示一个Loading图,直到购物车信息同步完毕。我们为了尽快的将信息展示给用户,将这个Loading图前置到了货架信息开始渲染时,也就是说,在渲染货架信息的时候,便不再显示Loading。这个过程很重要,对启动速度影响很大。
除此之外,在初次渲染时只渲染少量的数据,但足满一屏。通过测试发现,渲染全部数据与渲染一屏的数据时间差异较大,我们在用户需要查看更多数据的时候,再对剩下的数据同样进行分页渲染:货架数据一次10条。
页面渲染的同时,我们也在同步购物车信息,做到了并行进行。在同步完成之后,再将购物车的信息更新到货架上。
总结
经过以上大幅优化手段,小程序启动速度明显加快。在开发者工具上的运行结果为:之前首次是4秒,优化之后首次是2秒。第二次进入之前还是4秒,优化之后为1.5秒。可以算是”秒开“了。
这里我们并没有涉及网络优化方面,但这并不意味着网络部分不需要优化。如果在实际开发中,网络部分不再合理的范围内,则需要考虑服务器相关的优化:代码优化、DNS优化、服务器地理位置优化、网络环境优化、网络包压缩以及适时不采用HTTPS等加密传输等方向。另外由于小程序是运行在微信内置的相关引擎上,所以在我们不可控的范围内也有一定的开销,这一部分需要及时关注微信方面的更新。
工具
优化应用需要一个得力的工具,这里为大家共享一个执行时间统计工具,这款工具可以统计两个点之间所花费的时间,使用方便简单。以下是JS语言,其它语言可参考实现方式:
let index = 0;
function logTime(arg)
index++;
const app = getApp();
let current_date = new Date();
let offsetTime = 0;
if (app && app.globalData.lastTimeLogFunctionCallTime !== 0)
if (app.globalData.startTotalTime == 0)
app.globalData.startTotalTime = current_date.getTime();
offsetTime = current_date.getTime() - app.globalData.lastTimeLogFunctionCallTime;
let desc = current_date.getMinutes() + "分" + current_date.getSeconds() + '秒' + current_date.getMilliseconds() + "毫秒";
if (app && app.globalData.startTotalTime != 0)
let totalStartTime = new Date(current_date.getTime() - app.globalData.startTotalTime);
desc += ", 启动总耗时: " + totalStartTime.getMinutes() + "分" + totalStartTime.getSeconds() + "秒" + totalStartTime.getMilliseconds() + "毫秒";
if (offsetTime != 0)
let time = new Date(offsetTime);
desc += ", 与上一次调用的差值为: " + time.getSeconds() + "秒" + time.getMilliseconds() + "毫秒";
if (DEBUG_STACK_MODE)
let currentCallStack = (new Error).stack;
desc += ", 当前的调用栈为: " + currentCallStack;
logi('TIME_TAG ==> ' + index + (arg ? " " + arg : "") + ' 当前方法的调用时间为: ' + desc);
if (app)
app.globalData.lastTimeLogFunctionCallTime = current_date.getTime();
function logi(infoMsg)
if (DEBUG_MODE)
console.info(infoMsg);
文章本身就到此结束了,但结尾有些潦草,对感兴趣的同学借鉴意义也不大。因为大幅节省时间的点还是在于业务本身。不过上面的工具帮助我定位了哪一段代码之间具体的执行耗时时间,还是比较有用的。
历史文档小程序启动速度优化实践(代码片段)
这篇文章是2018年3月写的,本身只是做了简单的内部分享。近期被人问题这段经历,发现忘得一干二净,于是再拿出来回顾回顾。前言:前端应用的启动速度一向是移动终端的优化重点,因为这是面向用户进入... 查看详情
历史文档小程序启动速度优化实践(代码片段)
这篇文章是2018年3月写的,本身只是做了简单的内部分享。近期被人问题这段经历,发现忘得一干二净,于是再拿出来回顾回顾。前言:前端应用的启动速度一向是移动终端的优化重点,因为这是面向用户进入... 查看详情
历史文档小程序启动速度优化实践(代码片段)
这篇文章是2018年3月写的,本身只是做了简单的内部分享。近期被人问题这段经历,发现忘得一干二净,于是再拿出来回顾回顾。前言:前端应用的启动速度一向是移动终端的优化重点,因为这是面向用户进入... 查看详情
ansible最佳实践之playbook执行速度优化(代码片段)
写在前面今天和小伙伴们分享一些Ansible中Playbook执行速度优化的笔记博文通过7种不同的优化方式,合理利用可配置项,从而提高Playbook的执行速度个人感觉如果受控机数量很少,其实没必要速度调优所谓的执行速度调... 查看详情
ansible最佳实践之playbook执行速度优化(代码片段)
写在前面今天和小伙伴们分享一些Ansible中Playbook执行速度优化的笔记博文通过7种不同的优化方式,合理利用可配置项,从而提高Playbook的执行速度个人感觉如果受控机数量很少,其实没必要速度调优所谓的执行速度调... 查看详情
android性能优化实践与总结(包含启动,内存优化)(代码片段)
...行检测,以数据说话,优化前和优化后有了怎样的提升[TOC]启动优化检测启动时间检测工具任选其一hugo插件,自己定义时间开始和结束手动计算时间.AOP工具AspectJadb的amstart命令启动Activity测量耗时从点击应用的启动图标開始创建出一... 查看详情
ios工程编译速度优化(代码片段)
背景公司的iOS工程随着历史迭代,重新编译一遍的话需要450s,非常影响开发效率。自己试一试二进制pod库,来优化下iOS项目的启动时间。https://juejin.cn/post/6844904025624674311https://github.com/su350380433/cocoapods-imy-bin-demo官方流... 查看详情
ios工程编译速度优化(代码片段)
背景公司的iOS工程随着历史迭代,重新编译一遍的话需要450s,非常影响开发效率。自己试一试二进制pod库,来优化下iOS项目的启动时间。https://juejin.cn/post/6844904025624674311https://github.com/su350380433/cocoapods-imy-bin-demo官方流... 查看详情
抖音android性能优化系列:启动优化实践(代码片段)
组件,其初始化就是借助了一个叫ProcessLifecycleOwnerInitializer的ContentProvider进行初始化的。LifeCycle的初始化只是进行了Activity的LifecycleCallbacks的注册耗时不多,我们在逻辑层面上不需要做太多的优化。值得注意的是,如果这类用于... 查看详情
android性能优化-启动速度优化(代码片段)
文章目录1.启动的状态2.冷启动耗时2.1系统日志统计2.2adb命令统计3.启动分析3.1CPUProfile工具简单教程3.2启动耗时分析3.3使用DebugApi生成.trace文件4.StrictMode严苛模式5.结尾做开发除了实现功能,还要注重优化,性能优化包括的... 查看详情
小程序项目实践总结(代码片段)
...随时可用,但又无需安装卸载。小程序开发资料:小程序文档地址html使图片长边显示:<imagesrc=""mode="aspectFit"></image>绑定事 查看详情
启动速度优化记录(代码片段)
启动速度优化初步测试初步测试各个方法耗时:序号测试结果(ms)Freso45DownloadMannager3okCache80imageLoader17Bugly40LoginFromLocal167InitSobot4InitHpplay57initYouZan220测试依据Trace分析:测试依据:具体可以参考https://zhuanlan.zhi 查看详情
elasticsearch聚合优化|聚合速度提升5倍!(代码片段)
...发生。实践应用发现,以下情况都会比较慢:1)待聚合文档数比较多(千万、亿、十亿甚至更多);2)聚合条件比较复杂(多重条件聚合);3)全量聚合(翻页的场景用)。2、聚合优化方案探讨优化方案一:默认深度优先聚... 查看详情
全志linux系统启动优化启动优化速度方式优化启动流程优化uboot优化kernel等(代码片段)
文章目录1概述2启动速度优化简介2.1启动流程2.2测量方法2.2.1printktime2.2.2initcall_debug2.2.3bootgraph.2.2.4bootchart2.2.5gpio+示波器.2.2.6grabserial.2.3优化方法2.3.1boot0启动优化2.3.1.1非安全启动.2.3.1.2安全启动2.3.2uboot启动优化2.3.2.1完全去掉ubo 查看详情
由2.4s优化到1s以内:androidapp启动优化深度实践(代码片段)
优化性能一直是我们程序员的追求。在这个网络都追求5G了的时代,“卡”这个体验显然成为了一个极拉低印象分的问题,所以像阿里,还有腾讯、字节跳动、爱奇艺等,都非常重视这个问题,在面试中,... 查看详情
由2.4s优化到1s以内:androidapp启动优化深度实践(代码片段)
优化性能一直是我们程序员的追求。在这个网络都追求5G了的时代,“卡”这个体验显然成为了一个极拉低印象分的问题,所以像阿里,还有腾讯、字节跳动、爱奇艺等,都非常重视这个问题,在面试中,... 查看详情
android启动速度优化(代码片段)
...我的个人网站:https://coderyuan.com最近做了一些AndroidApp启动速度的优化,有一些心得,整理整理影响启动速度的原因高耗时任务数据库初始化、某些第三方框架初始化、大文件读取、MultiDex加载等,导致CPU阻塞复杂... 查看详情
爱奇艺技术分享:爱奇艺android客户端启动速度优化实践总结
...由爱奇艺技术团队原创分享,原题《爱奇艺Android客户端启动优化与分析》。1、引言互联网领域里有个八秒定律,如果网页打开时间超过8秒,便会有超过70%的用户放弃等待,对AndroidAPP而言,要求更加严格,如果系统无响应时间... 查看详情