企鹅电竞Weex实践和性能优化.PDF

企鹅电竞Weex实践和性能优化 渠宏伟 Contents 01 02 03 接⼊和收益 努⼒填坑 性能优化 H5页面存在的问题 加载耗时⻓ 交互体验差 WebView启动慢、资源加载慢 ⻓列表滚动、测滑不流畅 H5极速加载方案 —— VasSonic • WebView和⻚⾯并⾏加载 • 资源离线预推 • ⻚⾯局部刷新 • 动态缓存 H5⻚⾯⾸屏实现秒开 /Tencent/VasSonic 企鹅电竞Weex实践 前端⻚⾯原⽣渲染，增强前端⻚⾯体验 ⼀次开发⽀持三端 （Android 、iOS、H5） 运⾏，提⾼开发效率 企鹅电竞Weex实践 300 2000 250 1500 200 150 H5 1000 H5 Weex Weex 100 500 50 0 0 内存 （m ） FPS （帧/秒 ） 加载耗时(ms) • 内存降低 45%，帧率提⾼ 15.7% ；打开耗时下降 44.9% • 开发效率⽐终端提升 40%，有效释放终端开发⼈⼒ • ⻚⾯更新不依赖版本发布，特性发布效率提升 构建流程改造 实际业务⽐较复杂，时常需要 在webview中增加⼀些特殊逻 辑。将特殊逻辑、冗余代码打 ⼊到终端运⾏的JSBundle并不 合理。 构建流程改造 分离⼊⼝再引⽤相同的app.js， 可以让web版本和weex版本保 持相同逻辑，也可以独⽴扩展， 互不影响。 接头暗号 // { framework: Vue} 头部的{framework: Vue}告诉解析 /******/ (function(modules) { 器⽤Vue的语法解析JSBundle 。如果 删除了这⾏注释，将会 ⽩屏。 /******/ })