3. Web App 应该更像 App 而不是一个浏览器 Tab 4. 用户并不关心背后用的是什么技术。 a. App做壳，Web做核 b. Web 会与 OS 更紧密集成，直接提供 Web引擎支持 Chrome App Launcher Chrome Apps Chrome App vs 桌面 App 技术上: ● 独立的窗口 ● 离线使用 ● 通知栏 ● App Launcher 各种技术所做的改进 1. Web的演化 2. 语言篇 a. 语言的发展 b. Dart 介绍 3. 技术篇（Web Components） 大纲 ● 2011年10月对外宣布 ● Chrome V8 团队打造 ● 主要成员包括：Lars Bak、Kasper Lund、Gilad Bracha等 ● 以大量编程语言实现的经验为基础 Dart 语言的诞生 Dart 并非颠覆，而为实用 Dart Tree-shaking ● 语言的设计影响性能 ● 使用snapshot启动速度快10倍 ● 运行时不能改变对象结构有利于VM优化 ● Dart VM 性能已超越 JavaScript V8 ● …… 高性能 性能测试 http://www.dartlang.org/performance/ Dart 语法特性 ● 纯面向对象：类 ● 范型 ● 函数、闭包 ● 库：import

Bridge Binding Text Layout Kraken Protocol Communication JSCallDart DartCallJS Kranken API (C++) V8 JS Engine JS Engine Abstract Flutter Backend Kraken Bridge Protocol Platforms Kraken Bridge Protocol Object Model Bridge Binding Kraken Protocol Communication JSCallDart DartCallJS Kranken API (C++) V8 JS Engine JS Engine Abstract Backend Kraken Bridge Protocol Kraken Bridge Protocol JSC … Document

⽅方案1： H5 WebView Hybrid WebView+Native React Native JavaScript+Native ⾃自⼰己负责渲染 WebView 跨平台的布局引擎： 转化为Native渲染 开发语⾔言：JavaScript 开发语⾔言：JavaScript 为何可以跨平台？ H5、Hybrid：虽然UI⾃自⼰己渲染， 但是渲染性能太低，⽽而且JS运⾏行行 UI布局。 编译流/虚拟机流 ⽅方案3 ⾃自⼰己负责渲染 Unity：虽然渲染性能很强⼤大，但渲染 机制为实时刷新，耗电量量太⼤大，在 APP⾥里里都是局部刷新；⽽而且安装包也 很⼤大 游戏引擎 最终⽅方案 渲染：⾃自⼰己负责渲染 dart：同时⽀支持JIT和AOT，性能⾼高 跨平台 性能 WebView Hybrid Native ReactNative Xamarin

原生性能 初识Flutter Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面 Flutter简介 1 原生性能 生态与模式 C/C++ 引擎操作OpenGL、GPU直接渲染 平台一致性 Flutter简介 1 生态与模式 原生性能 实践框架及页面栈管理 2 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 保存页面栈信息 FlutterEngine/FlutterNativeView Route Navigator 性能优化 3 性能优化 3 泄漏 内存 增量 内存 - 降低20% 引擎 图片加载 性能优化 3 分析调 试 渲染 页面渲染 - 降低20-30% 定制规 则 优先使用StatelessWidget 最小封装原则 减少build函数中过多操作 尝试将部分Widget设置为const

setState 通知 刷新界面 State need update InheritedWidget RichText 本地表情Icon •无支持表情/文本混排控件 •解决方案 1.修改Skia引擎渲染 2.业务层适配, 自动计算表情及文本宽度进行自适应换行 研发数据 •开发人力成本 人日 native flutter 图片库 1.34% engine ？ 0.09% richText

的一致性，更新迭代（类似SDK需按平台维护） • 性能问题(全部使用html5) 客户端是否有 更好的选择？ 为何选择 Flutter • 同样是 Google 发起的跨全平台高性能UI框架 • 基于 Skia 2D 渲染引擎 • 使用类似JS/TS的Dart 语言开发 • 支持代码编辑后热重载, Flutter 支持那些平台 iOS/Android/Web/Windows/Linux/macOS/Embedded