关于 WebView 的一些笔记
什么是 WebView
WebView
是手机中内置了一款高性能webkit
内核浏览器,在SDK
中封装的一个组件。没有提供地址栏和导航栏,WebView
只是单纯的展示一个网页界面。在开发中经常都会用到。
ps: 关于 WebView 的介绍,可以看这里 《谈谈 WebView 的使用》
虽说 WebView 是安卓开发中设计的东西,但是作为一个前端开发人员,关注一些相关的东西还是有必要的.
性能的问题
WebView
是原生 APP
开发中的底层 SDK
,必然有性能上的问题,最直观的感受是比原生的要慢.
APP
在打开一个页面时,有以下的阶段.
- WebView 初始化 ( 页面无反应 )
- 建立连接,接收数据,数据初始化 ( 页面无反应 -- 空白 )
- 页面渲染,页面 loading 中 ( 页面 loading )
- 显示页面 ( 页面展示 )
如图:
WebView 初始化
APP
加载网页与浏览器加载是有区别的,浏览器第一次打开,启动的是浏览器内核,而 APP
首次加载网页,首先是创建 WebView
实例.
分析
在
APP
的WebView
初始化期间,大致会分成以下的过程首次初始化: 客户端冷启动后,第一次打开
WebView
,从开始创建WebView
到开始建立网络连接.二次初始化: 在打开过
WebView
后,退出WebView
,再重新打开.
结论
作为前端开发工程师,统计页面的打开时间,是以网络连接开始作为起点的.但是
WebView
中用户感受到的打开时间会多70~700ms
.
之所以会有这样的结果,原因在于:
- 在浏览器中,我们输入地址时(甚至在之前),浏览器就可以开始加载页面。
- 而在客户端中,客户端需要先花费时间初始化
WebView
完成后,才开始加载。
而这段时间,由于 WebView
还不存在,所有后续的过程是完全阻塞的。
优化
由于这段过程发生在 native
的代码中,单纯靠前端代码是无法优化的;大部分的方案都是前端和客户端协作完成,以下是几个业界采用过的方案。
全局 WebView
方法:
在客户端刚启动时,就初始化一个全局的
WebView
待用,并隐藏;当用户访问了
WebView
时,直接使用这个WebView
加载对应网页,并展示。
这种方法可以比较有效的减少 WebView
在 App
中的首次打开时间。当用户访问页面时,不需要初始化 WebView
的时间。
当然这也带来了一些问题,包括:
- 额外的内存消耗。
- 页面间跳转需要清空上一个页面的痕迹,更容易内存泄露。
【参考东软专利 - 加载网页的方法及装置 CN106250434A】
客户端代理数据请求
方法:
- 在客户端初始化
WebView
的同时,直接由native
开始网络请求数据; - 当页面初始化完成后,向
native
获取其代理请求的数据。
此方法虽然不能减小 WebView
初始化时间,但数据请求和 WebView
初始化可以并行进行,总体的页面加载时间就缩短了;缩短总体的页面加载时间:
【参考腾讯分享:70%以上业务由H5开发,手机QQ Hybrid 的架构如何优化演进?】
还有其他各种优化的方式,不再一一列举,总结起来都是围绕两点:
- 在使用前预先初始化好
WebView
,从而减小耗时。 - 在初始化的同时,通过
Native
来完成一些网络请求等过程,使得WebView
初始化不是完全的阻塞后续过程。
WebView 性能优化总结
一个加载网页的过程中,native
、网络、后端处理、CPU都会参与,各自都有必要的工作和依赖关系;让他们相互并行处理而不是相互阻塞才可以让网页加载更快:
WebView
初始化慢,可以在初始化同时先请求数据,让后端和网络不要闲着。- 后端处理慢,可以让服务器分
trunk
输出,在后端计算的同时前端也加载网络静态资源。 - 脚本执行慢,就让脚本在最后运行,不阻塞页面解析。
- 同时,合理的预加载、预缓存可以让加载速度的瓶颈更小。
WebView
初始化慢,就随时初始化好一个WebView
待用。DNS
和链接慢,想办法复用客户端使用的域名和链接。- 脚本执行慢,可以把框架代码拆分出来,在请求页面之前就执行好。
前端开发中需要了解的关于 WebView
的内容不需要太多,以上基本了解大致的一个过程我个人觉得就足够了,当然关于 WebView
内容不止这些.
文章转载自: 美团点评技术团队 WebView性能、体验分析与优化
关于 WebView 的一些笔记的更多相关文章
- WebView随学笔记
对于WebView而言我们需要掌握的内容是: /** 学习目标:webView * 1).将WebView加入到应用中 * 2).使用WebView加载页面 * 3).获取网络访问 * 4).在Web ...
- Android5.1 WebView遇坑笔记-Resources$NotFoundException
Bugly遇到异常 查找原因,分析发现崩溃发生在Android版本21和22上,在网上查找资料发现下面解决方案 使用自定义WebView替换原生自带WebView解决 package com.test ...
- (转载)android控件之WebView控件缩小
android控件之WebView控件缩小 作者: 字体:[增加 减小] 类型:转载 时间:2013-05-16我要评论 发现这个控件挺好用,能自已控制进度条,而且这个控件的功能非常壮大,先上个简单的 ...
- iOS攻城狮修炼之路
自己总结的学习iOS的笔记,打造一个全面的知识体系,iOS攻城狮修炼之路[持续更新中] iOS学习笔记01-APP相关 iOS学习笔记02-UIScrollView iOS学习笔记03-UITable ...
- 【WP8.1】WebView笔记
之前在WP8的时候做过WebBrowser相关的笔记,在WP8.1的WebView和WebBrowser有些不一样,在这里做一些笔记 下面分为几个部分 1.禁止缩放 2.JS通知后台C#代码(noti ...
- Xamarin开发笔记—WebView双项事件调用
1.Xamarin调用WebView: 原理:Xamarin.Forms WebView内置方法xx.Eval(..)可以调用到页面里面的js函数. WebView展示的代码如下: var htmlS ...
- 安卓开发笔记——WebView组件
我们专业方向本是JAVA Web,这学期突然来了个手机App开发的课设,对于安卓这块,之前自学过一段时间,有些东西太久没用已经淡忘了 准备随笔记录些复习笔记,也当做温故知新吧~ 1.什么是WebVie ...
- Android学习笔记50:使用WebView控件浏览网页
在Android中,可以使用Webview控件来浏览网页.通过使用该控件,我们可以自制一个简单的浏览器,运行效果如图1所示. 图1 运行效果 1.WebView 在使用WebView控件时,首先需要在 ...
- Android开发学习笔记:浅谈WebView(转)
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://liangruijun.blog.51cto.com/3061169/647456 ...
随机推荐
- 使用ajax传值,后台乱码
spring mvc,使用ajax传值,后台发现是乱码 解决方法: 后台的方法里加入 request.setCharacterEncoding("UTF-8"); 就行了 我前 ...
- Linux下汇编语言学习笔记72 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- 3.3-ISDN
3.3-ISDN 综合业务数字网ISDN(Integrated Services Digital Network): ISDN主要有两种接口类型:分为BRI(2B+D=2×64+16K ...
- VM Workstation中如何实现Linux系统的通信
1 确保虚拟机中的Linux是NAT联网方式 2确保Vmware Network Adapter VMnet1和 VMnet8 都是"已启用"状态,如果是"未识别的网 ...
- 热烈庆祝国产编程语言R++1.8研发成功
R++是专为懒人设计的国产编程语言.支持无操作系统裸奔.编译成机器码.android.cocos2dx绑定.中文编程.闭包.惰性求值.JSON.Lisp的S表达式.内联汇编.伪代码.模板.宏.多重继承 ...
- duilib-Ex-Debug
因为一些事件google无法訪问,托管在其上的项目也无法检出也基本无人更新,因此维护了一个版本号,用于排除已有的bug和扩展一些功能.这样能够避免反复造轮子和反复的修车子.欢迎大家一起维护.本人能力和 ...
- iOS 设置启动页面 时间
[NSThread sleepForTimeInterval:3.0]; 时间越大 ,启动页面停留的时间越长 iOS 8之后,,创建项目自带的有 LaunchScreen.xib 可直接用
- 【独立开发人员er Cocos2d-x实战 009】Cocos2dx 菜单项CCMenu使用
Cocos2dx中的菜单用CCMenu/Menu类来实现.该类是一个容器.用来装载各种菜单项,用于菜单项能够是图片.系统字体等. 理论就不说了.先上代码: CCMenuItemToggle* item ...
- LeetCode 389. Find the Difference (找到不同)
Given two strings s and t which consist of only lowercase letters. String t is generated by random s ...
- hdoj-1214-圆桌会议【逆序数】
圆桌会议 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submissi ...