文档章节

H5性能优化方面的探索

杭城小刘
 杭城小刘
发布于 2017/09/18 16:43
字数 1430
阅读 9
收藏 0
点赞 0
评论 0

H5性能优化方面的探索

H5很重要,很重要,很重要,重要的事情必须重复多遍,H5的优点:跨平台、迭代快、开发体验好。缺点:加载慢,用户体验差。所以在接下来很长一段时间内我将会从H5的几个缺点发面去研究如何优化。

一、缓存问题及其解决办法

经常遇到一个问题,H5页面由于缓存问题经常在H5发布新版本之后客户端App看不到最新的效果,之前由于杂七杂八的问题项目工期紧没好好研究,最近抽空研究了下缓存问题。

缓存问题具体表现为:UIWebview首次打开加载慢;第二次加载速度明显快;H5资源更新过后在App上看不到更改的效果

为此我认为是缓存造成的问题,我进入App目录下,看到Library下的Caches下面有很多文件名称很长的文件,点击预览可以看到是图片、css等,本来我想着找出H5资源缓存到App中的特点,然后用NSFileManager删除掉缓存文件,发现此路不通。

我想通过控制变量法研究缓存是否存在。

做了一个实验。步骤如下:

  • 用HBuilder(一个编辑器,开启后本机端口8020就可以访问网页)打开H5工程
  • 在App的一个UIWebview页面上通过和电脑在同一个局域网的方式加载网页
  • 在App上查看效果,观察某个元素的样式
  • 在HBuilder编辑器中修改元素样式
  • 在App上将UIWebView返回上一界面,再次进入查看该元素的样式
  • 确定有没有变化,来确定有没有缓存

结论:页面实时效果变化的,没有缓存

对比实验:

  • 用HBuilder(一个编辑器,开启后本机端口8020就可以访问网页)打开H5工程
  • git提交到服务端
  • 在App的一个UIWebview页面上通过公网IP的方式加载网页
  • 在App上查看效果,观察某个元素的样式
  • 在HBuilder编辑器中修改元素样式
  • git提交后发布到服务器上
  • 在App上将UIWebView返回上一界面,再次进入查看该元素的样式
  • 确定有没有变化,来确定有没有缓存

结论:页面没有看到最新的效果,明显缓存了。但是我很想知道为什么本地局域网的方式请求网页不会缓存,而通过公网IP的方式会缓存。

为此,我做了进一步的实验,用谷歌浏览器分别请求本地局域网和公网ip查看资源加载的情况。

1、公网IP

2、本地局域网

关键词Status Code

结论:从图上可以看出本地局域网不管首次加载还是刷新都是直接请求;而通过局域网的方式请求:首次请求是从服务器上获取,在此刷新的时候是从(from memory cache)中获取的。

猜想

局域网 的方式网速都比较快所以不会缓存;

公网IP的方式可能由于网速问题会将首次请求到的资源缓存下来。

所以确定缓存存在了,那么如何避免缓存?

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    if (webView != _webView) { return YES; }
    NSURL *url = [rntity Tag 的资源直接访问equest URL];
    if ([request.URL.absoluteString containsString:@"http"] || [request.URL.absoluteString containsString:@"https"]) {
        if ([request.URL.absoluteString containsString:@"?"]) {
            url = [NSURL URLWithString:[NSString stringWithFormat:@"%@&h5V=%@",request.URL.absoluteString,[ProjectUtil getH5VersionString]]];
        }else{
            url = [NSURL URLWithString:[NSString stringWithFormat:@"%@?h5V=%@",request.URL.absoluteString,[ProjectUtil getH5VersionString]]];
        }
    }
    LBPLOG(@"url->%@",[url absoluteString]);
    __strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
    if ([_base isCorrectProcotocolScheme:url]) {
        if ([_base isBridgeLoadedURL:url]) {
            [_base injectJavascriptFile];
        } else if ([_base isQueueMessageURL:url]) {
            NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
            [_base flushMessageQueue:messageQueueString];
        } else {
            [_base logUnkownMessage:url];
        }
        return NO;
    } else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
        return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
    } else {
        return YES;
    }
}

总结:

App的缓存问题暂时研究到这里,后期会继续研究其他方面的问题

拓展

通过浏览器我们知道有的缓存是200 OK(from cache ),有的缓存是304 Not modified。如果运维移除了Entity Tag就一直是200(from cache)。如果没有移除的话2者是交替出现的。

为什么2者会有区别?

  • 200 OK(from cache)是直接点击链接或者在浏览器地址栏中输入网址敲回车键的结果
  • 而304 modified是我们刷新了浏览器页面时触发或者设置了长缓存、但Entity Tags没有移除时触发

做了 实验得出结论:

  • 直接访问有缓存的网站都触发 200 OK (from cache)

  • 刷新浏览器则会触发304

  • 同一域名下,没有 Entity Tag 的资源直接访问,是 200 OK (from cache) 的结果

  • 同一域名下,有Entity Tag 的资源直接访问,是出现304 Not Modified

© 著作权归作者所有

共有 人打赏支持
杭城小刘
粉丝 14
博文 108
码字总数 47960
作品 0
杭州
iOS工程师
移动端本地 H5 秒开方案探索与实现

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过调研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的...

腾讯云加社区 ⋅ 06/11 ⋅ 0

移动动态化方案在蜂鸟的架构演进(含React Native与Weex对比)

当下,移动动态化已经成为各大公司都回避不了的问题,产品的快速迭代对技术提出了更高的要求,而移动端的动态化方案也是层出不穷:Hypid、结构化 Native View、React Native、Weex,什么样的...

雪夜凋零 ⋅ 2017/08/18 ⋅ 0

2015年双11手机淘宝前端技术之H5性能最佳实践

文/Tancy 前言 2015年是全面『无线化』的一年,在BAT(财报)几家公司都已经超过50%的流量来自移动端,这次 双11 更是占到了68.67%无线交易(天猫微博)。 手淘中大量的业务采用H5的方式开发...

zyt_1978 ⋅ 2016/07/03 ⋅ 0

技术干货分享:如何选择 HTML5 游戏引擎

原生手游市场已是红海,腾讯、网易等寡头独霸天下,H5游戏市场或将成为下一个风口。据笔者所知,很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折。如何选择适合团队和项目的引擎,笔...

html5VR ⋅ 2016/04/27 ⋅ 0

Android混合开发

前端周刊第 52 期:JS Conf 2017 开始报名、苹果腾讯开战、React Native 周边 哈哈,互联网圈本周的大事件是微信公众号关闭 iOS 平台打赏入口,讨论这件事情的文章很多,前端周刊就没有收录相...

掘金官方 ⋅ 2017/12/14 ⋅ 0

PHPWind 8.3正式发布 体验优化及功能改善

12月1日,阿里巴巴旗下通用型建站软件与服务提供商phpwind宣布发布代号为“猎豹”的phpwind8.3正式版。据了解,这是该产品在延续了上一版本在电子商务开放服务及程序效率方面的良好口碑,在p...

红薯 ⋅ 2010/12/03 ⋅ 0

白鹭引擎和layabox哪个好用,哪个技术更成熟 ?

作者:匿名用户 链接:https://www.zhihu.com/question/37819832/answer/104230057 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。...

wangyihero8 ⋅ 04/11 ⋅ 0

轻量级高性能Hybrid框架VasSonic秒开实现解析

H5很重要,H5很重要,H5很重要,重要的事情要说三遍。VasSonic是腾讯开源的解决H5首屏渲染痛点的开源项目,本文通过解读代码来学习WebView的优化思路。 H5的优劣 H5的优势很明显,跨平台、迭...

疯魔程序员 ⋅ 2017/09/10 ⋅ 0

ReactNative For Android 项目实战总结

版权声明:本文由王少鸣原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/159 来源:腾云阁 https://www.qcloud.com/community Android Qzone 6.1版本在情...

偶素浅小浅 ⋅ 2016/11/05 ⋅ 0

OneAPM x 腾讯 | OneAPM 技术公开课·深圳 报名:前端性能大作战!

「 OneAPM 技术公开课」由应用性能管理第一品牌 OneAPM 发起,内容面向 IT 开发和运维人员。云集技术牛人、知名架构师、实践专家共同探讨技术热点。 11月28日,OneAPM 技术公开课第五期将走进...

OneAPM蓝海讯通 ⋅ 2015/11/16 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【elasticsearch】 随笔 Date datatype

一。时间类型的本质 首先json是没有时间类型的,对于es来说,时间类型的标示可以是下面三种情况 1.一个时间格式的字符串,如:"2014-11-27T08:05:32Z","2015-01-01" or "2015/01/01 12:10:3...

xiaomin0322 ⋅ 15分钟前 ⋅ 0

阿里云资源编排ROS使用教程

阿里云资源编排ROS详细内容: 阿里云资源编排ROS使用教程 资源编排(Resource Orchestration)是一种简单易用的云计算资源管理和自动化运维服务。用户通过模板描述多个云计算资源的依赖关系、...

mcy0425 ⋅ 18分钟前 ⋅ 0

适配器设计模式

1、适配器模式 把一个类的接口变换成客户端所期待的另一种接口 使原本因接口不匹配而无法在一起工作的两个类能够在一起工作 分为类的适配器模式和对象的适配器模式 2、类适配器模式 类的适配...

职业搬砖20年 ⋅ 22分钟前 ⋅ 0

npm操作报错 _stream_writable.js:61

有一天 不知道什么原因(估计和node的版本有关),无论你做什么npm的操作 都会报错/usr/local/lib/node_modules/npm/node_modules/readable-stream/lib/_stream_writable.js:61 这时候只要执...

lilugirl ⋅ 26分钟前 ⋅ 0

Eclipse安装插件的几种方式

Eclipse魅力之一就是支持可扩展的插件,来丰富自身的功能,这种方式也是建立在开源思想之上的。具体使用什么方式去安装插件,要看我们拿到的是什么。 1. 拿到的是一串URL,如http://subclips...

GordonNemo ⋅ 28分钟前 ⋅ 0

div图片叠加

css实现代码如下: <div style="position: relative;"><!--这个层为外面的父层,需设置相对位置样式--> <div style="position: absolute;"><!--子层,需设置绝对位置样式--> <i......

niithub ⋅ 30分钟前 ⋅ 0

作用域slot

如果父组件需要使用子组件中的内容怎么办,比如父组件需要控制子组件的显示 <div id="root"><child><template slot-scope="props"><h1>{{props.item}} <div>编辑</div></h1><......

金于虎 ⋅ 32分钟前 ⋅ 1

HongHu commonservice-eureka 项目构建过程

上一篇我们回顾了关于 spring cloud eureka的相关基础知识,现在我们针对于HongHu cloud的eureka项目做以下构建,整个构建的过程很简单,我会将每一步都构建过程记录下来,希望可以帮助到大家...

明理萝 ⋅ 35分钟前 ⋅ 1

xml和对象的相互转化

@Data//setter和getter方法,toString和equals,hashcode方法@EqualsAndHashCode//代表重写equals和hashcode方法@XmlAccessorType(XmlAccessType.FIELD)public class Classroom {@X......

拐美人 ⋅ 35分钟前 ⋅ 0

tableView cell的高度 分组头部尾部的高度 自适应

@property (nonatomic) CGFloat rowHeight; // default is UITableViewAutomaticDimension@property (nonatomic) CGFloat sectionHeaderHeight; // default is UITableViewA......

娜一片蓝色星海 ⋅ 36分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部