1、引言 网络优化一直是移动互联网时代的热议话题,弱网识别作为移动端弱网优化的第一步,受到的关注和讨论也是最多的。 本文从方案设计、代码开发到技术落地,详尽的分享了携程在移动端弱网识别方面的实践经验,如果你也有类似需求,这篇文章会是一个不错的实操指南。 2、本文作者 Aaron:携程移动开发专家,关注网络优化、移动端性能优化。 [10] 爱奇艺APP网络优化实践(网络请求成功率优化篇) [11] 美团点评的网络优化实践(大幅提升连接成功率、速度等) [12] 淘宝移动端统一网络库的架构演进和弱网优化实践 [13] 爱奇艺APP 跨国弱网通信的优化实践 [14] 得物自研移动端弱网诊断工具的技术实践
客户端性能优化:1)成功率:核心 feed 接口,在弱网+非连接复用场景下提升 1.15%;2)耗时:非连接复用场景耗时减少14ms。 [4] 从HTTP/0.9到HTTP/2:一文读懂HTTP协议的历史演变和设计思路[5] 脑残式网络编程入门(三):HTTP协议必知必会的一些知识[6] 全面了解移动端DNS域名劫持等杂症:原理、根源、 HttpDNS解决方案等[7] 通俗易懂,理解移动网络的“弱”和“慢”[8] 现代移动端网络短连接的优化手段总结[9] 百度APP网络深度优化实践(DNS优化篇)[10] 爱奇艺APP网络优化实践(网络请求成功率优化篇 )[11] 美团点评的网络优化实践(大幅提升连接成功率、速度等)[12] 淘宝移动端统一网络库的架构演进和弱网优化实践[13] 爱奇艺APP跨国弱网通信的优化实践[14] 得物自研移动端弱网诊断工具的技术实践 [15] 携程APP移动网络优化实践(弱网识别篇)
一、移动端网络特点移动网络面临诸多挑战:网络特点:高延迟(2G:400ms,3G:100ms,4G:20ms)不稳定(频繁切换、信号强弱变化)带宽有限流量成本高二、弱网检测1.网络状态监听展开代码语言: :",state.isConnected);//检测网络类型if(state.type==='cellular'){console.log("当前使用移动网络");if(state.details.isConnectionExpensive ==request.id);}}}awaitthis.persist();}}七、弱网体验优化1.骨架屏展开代码语言:TXTAI代码解释//React骨架屏constProductCardSkeleton error&&(<Viewstyle={[styles.placeholder,style]}/>)}</View>);};八、总结移动端网络优化提升用户体验:网络检测:实时感知网络状态智能重试:指数退避提高成功率数据压缩 :减少流量消耗本地缓存:减少网络请求离线优先:弱网也能使用最佳实践:做好网络状态检测实现智能重试机制使用本地缓存减少请求优化弱网下的用户体验个人观点,仅供参考
前言 当前主流的移动端APP测试,都离不开网络。 除了基本功能测试以外,针对网络这块的测试也越来越重视,下面一起来看看 一、安卓(Android)端的弱网络测试 通过在中转机器(Mac/笔记本、PC端)上创建无线AP,手机通过这个WIFI热点连接网络 二、IOS端的弱网络测试 IOS的弱网络测试也可以按照上面提到的方案,通过建立一个AP进行弱网络测试。 但除了这种方法外,IOS系统自身就可以模拟弱网络环境, 1. PS:弱网、2G、3G建议的上下行速率如下,同时还可以控制丢包率的数据 网络 上行 下行 弱网 10 参考【fiddler弱网测试】篇 五、移动端其他专项测试项(如:CPU、流量、电量、性能等) 参考【android app性能及专项测试】
万村乐数字乡村系统提供了手机管理端,管理员和信息员都能在移动端操作,比如信息员可在手机管理端帮助村民录入信息、做网格信息采集。 问题:弱网下直接报错是最差体验最早的做法很粗暴,提交时检测网络,没网就弹"提交失败请重试",录了半天的表单全丢。万村乐的手机管理端如果也这么干,信息员在村里走一圈能气到摔手机。 网络一抖,客户端疯狂重发,服务器被打挂。修法是退避重试,先等 2 秒,再等 4 秒,再等 8 秒,最多 5 次,超过就进人工队列。 这个从采集、校验、入库到反馈的链条打通,弱网同步只是其中一环,但最容易被技术团队忽略。我们在一个山区县的实测里,信息员单日人均录入从后台的 15 条提升到手机端的 40 条,差距就在不用回办公室。 数字乡村的决策依赖底层的村民档案、土地、补贴数据,如果因为弱网丢录、因为冲突错录,上层的分析和大屏全是错的,越看越自信地错。
本文将基于得物自研的移动端弱网诊断工具的开发过程,尽可能全面地为你总结和分享它的具体技术实践,希望带给你启发。 * 推荐阅读:淘宝技术团队分享的《淘宝移动端统一网络库的架构演进和弱网优化技术实践》,可一并阅读。2、网络性能概念一些网络性能指标:1)速率:指传送数据的速率。 快请求指上文中的实际正常,即低于50分位耗时;4)弱网率:判断弱网的请求量占总请求量的比例。可以看到:判定为弱网的用户占比约为0.65%,而判定弱网中仅有约5%的请求耗时是低于50分位耗时。 :请求速度、弱网适应、安全保障[3] 移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”[4] 全面了解移动端DNS域名劫持等杂症:原理、根源、HttpDNS解决方案等[5] 美图App 的移动端DNS优化实践:HTTPS请求耗时减小近半[6] 百度APP移动端网络深度优化实践分享(三):移动端弱网优化篇[7] 爱奇艺移动端网络优化实践分享:网络请求成功率优化篇[8] 美团点评的移动端网络优化实践
PS:关于弱网的技术文章可以深入详读:《现代移动端网络短连接的优化手段总结:请求速度、弱网适应、安全保障》《移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”》《移动端IM开发者必读(二 ):史上最全移动弱网络优化方法总结》《美图App的移动端DNS优化实践:HTTPS请求耗时减小近半》《百度APP移动端网络深度优化实践分享(三):移动端弱网优化篇》《爱奇艺移动端网络优化实践分享:网络请求成功率优化篇 淘宝弱网交互表现不一:图片17、参考资料[1] RFC 6555[2] 全面了解移动端DNS域名劫持等杂症:原理、根源、HttpDNS解决方案等》[3] 百度APP移动端网络深度优化实践分享(一):DNS 》[15] 移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”》[16] 移动端IM开发者必读(二):史上最全移动弱网络优化方法总结》[17] 美图App的移动端DNS优化实践:HTTPS 请求耗时减小近半》[18] 百度APP移动端网络深度优化实践分享(三):移动端弱网优化篇》[19] 爱奇艺移动端网络优化实践分享:网络请求成功率优化篇》[20] 美团点评的移动端网络优化实践:大幅提升连接成功率
----[- 1 -] 现代移动端网络短连接的优化手段总结:请求速度、弱网适应、安全保障[链接] http://www.52im.net/thread-1413-1-1.html[摘要]短连接的优化在某些场景下对于移动端 ----[- 2 -] 移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”[链接] http://www.52im.net/thread-1587-1-1.html[摘要] 本文的目的, ----[- 5 -] 美图App的移动端DNS优化实践:HTTPS请求耗时减小近半[链接] http://www.52im.net/thread-2172-1-1.html[摘要] 本文介绍美图APP ----[- 8 -] 百度APP移动端网络深度优化实践分享(三):移动端弱网优化篇[链接] http://www.52im.net/thread-2678-1-1.html[摘要]网络优化解决的核心问题有三个 ,第一是安全问题,第二是速度问题,第三是弱网问题,它是网络优化中最为复杂且需要反复验证和分析的问题,我们的《百度APP移动端网络深度优化实践分享(三):移动端弱网优化篇(本文 *)》就是要深入探讨这个问题
2)弱网适应:移动端网络环境随时变化,经常出现网络连接很不稳定可用性差的情况,怎样在这种情况下最大限度最快地成功请求? 2)涉及移动端网络特性的文章: 《谈谈移动端 IM 开发中登录请求的优化》 《移动端IM开发需要面对的技术问题(含通信协议选择)》 《简述移动端IM开发的那些坑:架构设计、通信协议和客户端》 《 通过 HTTPDNS,连接多路复用,更好的数据压缩算法,可以把网络请求的速度优化到较不错的程度了,接下来再看看弱网和安全上可以做的事情。 5、针对移动弱网的优化 手机无线网络环境不稳定,针对弱网的优化,微信有较多实践和分享,包括: 1)提升连接成功率: 复合连接,建立连接时,阶梯式并发连接,其中一条连通后其他连接都关闭。 针对弱网的这些细致优化未成为标准,系统网络库没有内置,不过前两个客户端优化微信的开源网络库 mars 有实现,若有需要可以使用(详见《如约而至:微信自用的移动端IM网络层跨平台组件库Mars已正式开源》
安丛 ThoughtWorks 什么是弱网测试 在当今移动互联网盛行的时代,网络的形态除了有线连接,还有2G/3G/Edge/4G/Wifi等多种手机网络连接方式。 不同的协议、不同的制式、不同的速率,使移动应用运行的场景更加丰富。 从测试角度来说,需要额外关注的场景就远不止断网、网络故障等情况了。 按照移动的特性来说,一般应用低于2G速率的都属于弱网,也可以将3G划分为弱网。除此之外,弱信号的Wifi通常也会被纳入到弱网测试场景中。 5、现象:弱网络环境下,用户请求页面响应时间较长,等待的过程中,页面上的部分控件仍然可以操作,当用户点击控件时,出现应用闪退现象; 原因:没有对数据加载流程进行判断,直接暴露控件可控,当出现依赖数据的控件操作时 总结 当然,出现以上问题的根本因素并不是弱网,在我们平时的PC应用中一样会遇到,但是这些问题在移动弱网环境下会表现的更突出。
[- 1 -] 现代移动端网络短连接的优化手段总结:请求速度、弱网适应、安全保障 [链接] http://www.52im.net/thread-1413-1-1.html [摘要] 本文整理的有关内容 ---- [- 2 -] 移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢” [链接] http://www.52im.net/thread-1587-1-1.html [摘要] 本文的目的 ---- [- 3 -] 移动端IM开发者必读(二):史上最全移动弱网络优化方法总结 [链接] http://www.52im.net/thread-1588-1-1.html [摘要]本文接上篇《移动端 ---- [- 5 -] 美图App的移动端DNS优化实践:HTTPS请求耗时减小近半 [链接] http://www.52im.net/thread-2172-1-1.html [摘要] 本文介绍美图 ---- [- 8-] 百度APP移动端网络深度优化实践分享(三):移动端弱网优化篇 [链接] http://www.52im.net/thread-2678-1-1.html [摘要]弱网问题,它是网络优化中最为复杂且需要反复验证和分析的问题
2、系列文章本文是系列文章中的第 3 篇,本系列文章的大纲如下:《移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”》《移动端IM开发者必读(二):史上最全移动弱网络优化方法总结》《移动端 IM开发者必读(三):爱奇艺移动端跨国弱网通信的优化实践》(* 本文)如果您是IM开发初学者,强烈建议首先阅读《新手入门一篇就够:从零开发移动端IM》。 IM[4] 现代移动端网络短连接的优化手段总结:请求速度、弱网适应、安全保障[5] 全面了解移动端DNS域名劫持等杂症:技术原理、问题根源、解决方案等[6] 美图App的移动端DNS优化实践:HTTPS 请求耗时减小近半[7] 百度APP移动端网络深度优化实践分享(一):DNS优化篇[8] 百度APP移动端网络深度优化实践分享(二):网络连接优化篇[9] 百度APP移动端网络深度优化实践分享(三):移动端弱网优化篇 [10] 爱奇艺移动端网络优化实践分享:网络请求成功率优化篇[11] 美团点评的移动端网络优化实践:大幅提升连接成功率、速度等[12] 淘宝移动端统一网络库的架构演进和弱网优化技术实践[13] 谈谈移动端
如果您还未阅读完上篇《移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”》,建议您先行读完后再续本文。 另外,《现代移动端网络短连接的优化手段总结:请求速度、弱网适应、安全保障》这篇文章也提到了本文所阐述的相关内容,强烈建议阅读。 2、系列文章 ▼ 本文是《移动端IM开发者必读》系列文章的第2篇: 《移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”》 《移动端IM开发者必读(二):史上最全移动弱网络优化方法总结 2)涉及移动端网络特性的文章: 《现代移动端网络短连接的优化手段总结:请求速度、弱网适应、安全保障》 《谈谈移动端 IM 开发中登录请求的优化》 《移动端IM开发需要面对的技术问题(含通信协议选择 :请求速度、弱网适应、安全保障》 《聊聊iOS中网络编程长连接的那些事》 《移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”》 《移动端IM开发者必读(二):史上最全移动弱网络优化方法总结
一、什么是弱网测试? 弱网测试作为健壮测试的重要部分,对于移动端测试来说必不可少。 现在移动端仍有相当多的用户主要使用4G、3G、2G等网络,另外因移动端产品使用场景多变,如进地铁、上公交、进电梯等使得弱网测试显得尤为重要。 毕竟考虑到各种场景的客户端展示及容错,能极大提升产品印象和用户体验! 二、怎么做弱网测试 1、用数据线连接iPhone和mac 2、打开xcode7,选择Xcode -> Windows->Devices ,如图: 3、选择自己的手机,右键单击选择Show Provisioning 如图: 5、iOS手机设置 三、弱网要测试什么?
etags-for-rest-with-spring 作者:Eugen Paraschiv 译者:helloworldtang 目录 1.概览 2.REST和ETag 3.使用 curl来验证ETag功能 4.Spring对ETag的支持 5. 3.使用 curl来验证ETag功能 一个通过客户端和服务器通信来简单地测试ETag特性的操作可以分解为以下步骤: – 首先,客户端发起一个对REST API的调用——响应包括了需要存储的ETag头,以便进一步使用 因此,一个从ETag中获益的请求仍然会被作为一个标准请求处理,消耗正常消耗的任何资源(数据库连接等),并且只有在将它的响应返回给客户端之前,ETag支持才会启动。 在这一点上,ETag值将根据响应体计算出来并和响应一起返回给客户端;另外,如果请求携带了If-None-Match头,那也将会被处理。 5.测试ETag 那就开始吧——在检索一个资源时,我们需要验证返回的响应体将包含一个“ETag”头。
UIWebView)WKScriptMessageHandler(只适用于WKWebView,iOS8+)Bridge第三方框架(适用于UIWebView和WKWebView)1. url拦截url拦截是在H5请求一个地址后 ,客户端拦截住这个地址,对地址进行解析处理H5中调用iOS方法代码:弹出登录弹窗(拦截url)iOS中拦截到url代码:- (BOOL)webView - (void)login{ [self.delegate login]; }@end// H5加载完成 (app方法名).postMessage() H5代码<body> <input type="button" name="" value="登录" onclick="login()"><script type JavaScriptInterfaceH5端代码<body> <input type="button" name="" value="登录" onclick="login()"><script type
1 /** 2 * 移动端自适应 3 */ 4 <meta name="viewport" 5 content="width=device-width,user-scalable --maximum-scale=1.0 可视区域的放大级别--> 1 /** 2 * rem适配 iPhone5下html字号为100px,320px下1rem=100px 3 */ 4 (function (doc, win) { 5 var docEl = doc.documentElement, 6 resizeEvt
“慕课网” nice~ 一、前言 首先声明一下自己吧。对JS和CSS都属于、马马虎虎的那种。昨天才发现 原来页面中的JS可以这样写。 H5做的页面确实超级漂亮。但 为了在同事朋友面前装一下,还是要熟悉一下的。然后就可以告诉他们:不就是CSS3新增的那几个动画属性,在加上一下JS的东西嘛,不难!^_^ 昨天看了一下午的一个H5。 然后就是 还会有一些背景音乐控制、个别的还存在视频(不用担心,都是H5提供的接口,需要使用时 查看一下文档就差不多);然后就是 一些页面之间的 过度、这部分 可能会用到 缩放、透明度转换、以及简单地动画效果 // 下面的 代码片段 是从 一个手机H5页面获取的,是不是发现啥了 function startLoading() { // simulate loading something.. <audio id="bg-music" src="http://qn.media.epub360.com/materials/audio/e8e76999019f1ec81f<em>5</em>ee0ca943e1c1c.mp3
对于模拟弱网环境,排查问题,这个工具必不可少,赶紧收藏!
相对于直播而言,目前国内绝大部分网络环境都是弱网。因此弱网是直播不得不面对的问题。 image.png 弱网模拟一些场景: image.png 普通的弱网定义 在当今移动互联网盛行的时代,网络的形态除了有线连接,还有2G/3G/Edge/4G/Wifi等多种手机网络连接方式。 按照移动的特性来说,一般应用低于2G速率的都属于弱网,也可以将3G划分为弱网。除此之外,弱信号的Wifi通常也会被纳入到弱网测试场景中。 4、 网络信号弱,频繁断网重连。 上述4个条件,满足一个,就可以称之为音视频弱网,即由于网络原因,不能正常传输音视频数据。 为了解决推流过程中,网络异常问题,采用了RTMP 302 重定向的方案,具体实现逻辑如下图所示: image.png 步骤一,推流过程中,rtmp server端支持持续弱网检测,支持域名+发布点维度的配置化的弱网检测