您好,欢迎来到网站推广优化网站,我们竭诚为你服务!

百度推广、网站SEO优化排名公司

提供网站SEO排名优化推广教程方案

APP弱网络条件下,体验优化之道

作者:网络优化

浏览量: 26

2020-08-27

所谓弱网络是指在2G和3G网络等网络条件较差的情况下使用APP。在这种网络条件下,用户的网络速度基本保持在10K/S~60K/S。在如此糟糕的网络环境中,如果我们仍希望为用户提供良好的用户体验,那么我们的APP应该考虑如何对


所谓弱网络是指在2G和3G网络等网络条件较差的情况下使用APP。在这种网络条件下,用户的网络速度基本保持在10K/S~60K/S。在如此糟糕的网络环境中,如果我们仍希望为用户提供良好的用户体验,那么我们的 APP 应该考虑如何对其进行优化。

一、到底慢在哪里?

需要处理弱网下的加载速度,然后首先必须确定整个 APP 的加载速度在哪里,以及最长加载路径的位置,以便有针对性地对其进行优化和修改。

Webview

如果是嵌入在 APP 中的 Webview 页面,则优化 Web 体验已过很长时间。我们可以使用Chrome的开发者模式,调整到网络模式,并将网络条件设置为3G来请求网页,然后我们可以看到网页的速度主要收取在哪里,如下所示:

当然,有许多方法可以加快 html

使用 gulp + 咕咕声包压缩:js = css 资源压缩、子画面映射合并等。

使用字体真棒替换图片:字体非常兼容,无限放大,常用的图片可用

APP API

当然,在许多情况下,我们的接口设计不合理,这是由对相同数据的多个请求或缓慢的查询引起的。我们也可以使用铬: // 检查插件查看我们的设备请求状态 (adb 在 Android 手机连接).如下所示:

二、接口设计优化

接口的优化理论上不属于APP弱网络的优化,但当网络条件不好时,这种API性能问题确实暴露出来。每个人都在谈论服务器的质量和设备的性能。事实上,对于一个好的服务器,请求速度的大部分延迟都在 IO 上。包括磁盘读取和写入 IO。

常用的优化点:

1我们可以在日志中准确查看该记录的查询读取和写入时间。您可以查看特定操作:http://www.tuicool.com/articles/nmmimae。

2无需执行多个查询

3我不说太多关于缓存的通用缓存机制。我认为各种缓存框架是最后的手段。对于需要高实时性能的接口,我仍然不会。

三、图片优化

说到网络优化,大多数都是图片的优化。

可以购买CDN了

公司使用阿里云的CDN服务

CDN表示,它可以使用最近的网络节点提供服务,以避免在网络传输中消耗,但经过实际实验,我们发现CDN的优化毕竟是有限的,它不可能实现经验的飞跃。

更改更快的图片格式 Webp

我自己也听说过 WebP 图片格式,但我没有使用它。

这与其说是谈论我们可以手动压缩多少,不如说。我们尝试转换系统附带的企鹅的图片,并获得以下两个图片比较:

图片已经从原来的760k变为121k,大小只有原稿的六分之一,([o])!!!!!!难以置信。

分别打开两张图片进行比较。虽然 Webp 是失真压缩,但如果我们在比较和检查时不仔细观察,我们真的看不到两张图片之间的差异。Webp 在细节上确实有一些缺陷,但是当你考虑 1/6 压缩时,这个缺陷不再是问题。

来自不同网络的不同图片

图片的格式已更改。我们是否考虑图片的准确性和图片的大小?

例如(对于原始图像是 600X480):

2/ 3G 使用低分辨率图片-* 300X240,80 张图片。

4G 普通清晰度图片 -= 600X480,80 张图片

WiFi 高分辨率图片(最好根据网络速度来判断,wifi 也很慢)-= 600X480,100 张图片。

我们做了同样的实验,得到了以下结果:

从理论上讲,当网络条件不是很好时,我们可以适应情况,减小图片的大小,从而加快整个APP的加载速度。

使用奇牛使用不同的图像格式

好吧,也许很多朋友会告诉我,我,如此复杂,我们如何保存不同大小,不同精度,不同格式的图片?每次产品上传产品时,我们都需要处理图片,那么图片床上的压力就如此之大。有完整的解决方案吗?

答案是肯定的,这是我们公司现在使用的解决方案。奇牛云存储(我不是广告,我真的使用它):

对于我们的研究和发展,他们提供的图像处理功能是不好的。

例如,我们可以设置要在仓库中处理的图片类型,如下所示:

选择要生成的不同图像格式、大小和精度模板。生成模板后,我们将根据模板的内容获取一个参数,如下所示:

怎么使用呢?

例如,我们在奇牛存储了一张自己的图片,生成的图像链接是:

当然,此图像存储为原始图像。

此时,我们处于不同的网络条件下。我们希望将大小和格式更改为上述条件。我们只需要向连接添加参数。

原始图像将转换为宽度为 640、高度为 300、webp 格式且精度为 100 的图像。((o)!!!!!

四、让用户感觉到快

在网络条件不佳的情况下,无论我们进行多少优化,都像是治疗症状,而不是根本原因,很难获得与 WiFi 环境中相同的体验。既然网络请求、缓存和压缩方案已经采用,那么你可以考虑一下,是你自己的交互让用户感到卡住和缓慢吗?

具体如何让用户感觉快,操作不同,对于不同类型的APP,下面是一些例子:

下图显示了不从 0 开始的进度条。无论网页的加载进度和网络条件如何,uc 浏览器的加载进度始终从 50% 开始,并保持在 98% 左右。给用户一种网页即将完成加载的感觉。

加载图像之前显示文本也位于 Web 视图中。图像或多媒体的加载速度肯定比文本的加载速度慢得多。由于不同的 Webview 显示和渲染不同,我们可以先使 Webview 显示文本,然后显示图片。让用户感觉他们可以先预览整个网页。即:

当然,如果它是在非Web视图,为了避免网络资源的消耗,类似的操作可以模拟。

3公共信息将添加到缓存机制和增量更新中。对于 APP,这是网络不可用的缺陷。如果客户的业务和整个公司的业务没有如此强烈的及时性要求。嗯,我们可以做一些缓存机制。

例如,对于今天的标题应用,如下图所示,每次它们进入主页新闻列表时,都会首先从缓存中取出。每次刷新获得的数据是服务器推送的数据的差异(增量更新),而不是整个列表视图刷新。


进入了解更多关于网络优化的信息。