fromQQ提升应用内HTML5的开发和使用体验.pptx

文档介绍：提升应用内HTML5的开发和使用体验
魏晓海***@tencent
应用内H5开发的特性与挑战
系统WebView的挑战
Crash
Native层的crash无法解决
内存泄露
Native层的内存泄露无法解决
H5功能
手Q提升应用内HTML5的开发和使用体验
魏晓海***@tencent
应用内H5开发的特性与挑战
系统WebView的挑战
Crash
Native层的crash无法解决
内存泄露
Native层的内存泄露无法解决
H5功能
手Q音乐说说 H5 Audio
微信理财通SSL SNI扩展支持
……
应用内HTML5开发调试的挑战
KitKat+ WebView
问题
只有KitKat+版本上可用
需要应用提供调试版本
应用内HTML5开发调试的挑战
Web页面与Native代码的耦合
登录态的获取
应用登录
Web页面不需要再次登录
js的注入
辅助功能
扩展js API接口
Web页面无法脱离应用在浏览器中调试
手机QQ浏览器SDK
手机QQ浏览器SDK
浏览器UI
X5内核
QQ浏览器
App
App UI
SDK WebView
Android WebView Wrapper
X5 WebView Wrapper
Android WebView
X5 WebView
零成本接入













(deprecated)




APK包大小仅增加60K
应用内通过Inspector调试网页
手机端安装QQ浏览器 Inspector版本
PC端运行 adb forward tcp:9222 tcp:9222
PC端通过Chrome 35+访问localhost:9222
熟悉的Inspector界面
不限Android版本
无需应用修改提供debug设置
直接应用内调试
应用内HTML5性能调优
浏览器内HTML5性能调优
about:tracing
应用内HTML5性能调优
MttTraceEvent
MttTraceEvent的使用
手机端安装QQ浏览器Trace版本
运行应用内HTML5应用
退出应用
通过Chrome查看生成的trace文件
分析性能瓶颈
优化
MttTraceEvent
不同类型的加载
普通网页
（文字+图片）
网络拉取
Web业务
页面比较简单
部分资源缓存在本地
游戏
图片为主
绝大部分本地存储，甚至是内存中生成的
赤壁乱舞加载优化
赤壁乱舞滚动优化
手Q 应用宝滚动优化