fromqq提升应用内html5的开发及使用体验.pptx

提升应用内HTML5的开发和使用体验 魏晓海@tencent 应用内H5开发的特性与挑战 特性 使用系统WebView 与Native代码耦合 资源来源不同 挑战 Android碎片化问题 无法脱离应用调试调优 需要不同的加载策略 系统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 零成本接入 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 应用内通过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 应用宝滚动优化