提升应用内HTML5 的开发和使用体验 魏晓海@tencent.

Presentation on theme: "提升应用内HTML5 的开发和使用体验 魏晓海@tencent."— Presentation transcript:

1 提升应用内HTML5 的开发和使用体验

2

3 特性 挑战 应用内H5开发的特性与挑战 使用系统WebView 与Native代码耦合 资源来源不同 Android碎片化问题
无法脱离应用调试调优 需要不同的加载策略

4 系统WebView的挑战 Crash 内存泄露 H5功能 …… Native层的crash无法解决 Native层的内存泄露无法解决
手Q音乐说说 H5 Audio 微信理财通SSL SNI扩展支持 ……

5 应用内HTML5开发调试的挑战 KitKat+ WebView 问题 只有KitKat+版本上可用 需要应用提供调试版本

6 应用内HTML5开发调试的挑战 Web页面与Native代码的耦合 Web页面无法脱离应用在浏览器中调试 登录态的获取 js的注入 应用登录
辅助功能 扩展js API接口 Web页面无法脱离应用在浏览器中调试

7 手机QQ浏览器SDK QQ浏览器X5内核 零开发接入 安全稳定 省流加速 体验优化 功能增强 调试方便 性能调优

8 Android WebView Wrapper
手机QQ浏览器SDK App UI 浏览器UI SDK WebView X5内核 Android WebView Wrapper X5 WebView Wrapper Android WebView X5 WebView App QQ浏览器

9 零成本接入 APK包大小仅增加60K android.webkit.WebView com.tencent.smtt.sdk.WebView
android.webkit.WebViewClient com.tencent.smtt.sdk.WebViewClient android.webkit.WebChromeClient com.tencent.smtt.sdk.WebChromeClient android.webkit.WebSettings com.tencent.smtt.sdk.WebSettings android.webkit.CookieManager com.tencent.smtt.sdk.CookieManager android.webkit.CookieSyncManager com.tencent.smtt.sdk.CookieSyncManager android.webkit.CacheManager com.tencent.smtt.sdk.CacheManager(deprecated) android.webkit.WebBackForwardList com.tencent.smtt.sdk.WebBackForwardList android.webkit.WebHistoryItem com.tencent.smtt.sdk.WebHistoryItem APK包大小仅增加60K

10 应用内通过Inspector调试网页 手机端安装QQ浏览器 Inspector版本
PC端运行 adb forward tcp:9222 tcp:9222 PC端通过Chrome 35+访问localhost:9222 熟悉的Inspector界面 不限Android版本 无需应用修改提供debug设置 直接应用内调试

11

12

13 应用内HTML5性能调优 浏览器内HTML5性能调优 about:tracing 应用内HTML5性能调优 MttTraceEvent

14 MttTraceEvent的使用 手机端安装QQ浏览器Trace版本 运行应用内HTML5应用 退出应用
通过Chrome查看生成的trace文件 分析性能瓶颈 优化

15 MttTraceEvent

16 不同类型的加载 普通网页 Web业务 游戏 （文字+图片） 网络拉取 页面比较简单 部分资源缓存在本地 图片为主
绝大部分本地存储，甚至是内存中生成的

17 赤壁乱舞加载优化

18 赤壁乱舞滚动优化

19 手Q 应用宝滚动优化

20