2018年基于HTML5开发高性能跨平台APP.pdf

1、基于HTML5开发高性能跨平台APP跨平台技术为什么越来越火HTML5在跨平台APP开发中的实践如何选择HTML5跨平台APP技术方案HTML5技术跨平台应用在APICloud中的实践开发者的烦恼屏幕碎片化硬件参差不齐手机厂商众多系统版本、刘海屏、全面屏老板：我不管这些，赶紧给我做出来！企业的焦虑10个人成本基础团队 iOS Android开发项目经理 产品经理 UI 测试服务器开发人员 前端开发人员 100万？!啥时候能上线.啥时候上线.上线.线？!主流的跨平台技术方向Html5Native混合中间语言编译PhoneGapAPICloud小程序FlutterXamarinReact Nati

2、ve为什么选择HTML5天然跨平台Android、IOS、Window、Mac 快速迭代一次编码 发布所有平台简单易学没有比HTML5更简单的编程语言了成本降低技术的初衷就是为了提高生产力，降低成本生态系统发达应用最广泛的技术之一 社区 商业 大公司主导跨平台技术为什么越来越火HTML5在跨平台APP开发中的实践如何选择HTML5跨平台APP技术方案HTML5技术跨平台应用在APICloud中的实践系统架构-APP引擎系统架构-应用流程性能问题渲染能力，动画卡顿事件延迟、多平台不兼容手机厂商，系统版本众多，适配艰难交互效果差，产品需求与技术标准不匹配功能问题难以扩展，API不足与硬件不同步：摄

3、像头、传感器、麦克风无法对接行业创新：推送、IM、直播、IOT、AI本地服务缺失，无法后台运行严重依赖网络：传统的BS架构如何优化性能优化-原生架构BS架构Browser通过B/S To C/S实现Html5本地化，加载速度提升，渲染效率提升DataServicehttpCS架构Html5 FilesFunctionUIajaxHTML5本地化CS模式下的HTML5代码存储在APP安装包中Html5像原生APP一样 先占位布局进行渲染Ajax请求数据，填充UI性能优化-原生UI结构原生View包裹Html5+多窗口架构设计，实现原生渲染、动画效果 大量UI模块，支持混合布局性能优化-原生事件管

4、理全局手势及事件处理，原生事件分发机制设备事件、交互事件、应用事件、窗口事件、Dom事件、自定义事件.Event Queuel addEventListenerl removeEventListenerl sendEventNativeHTML5功能问题-模块化复用高模块化架构设计，接口标准规范，通过扩展支持众多业务场景和功能功能问题-模块化复用百度MAP极光推送融云IM美恰客服科大讯飞支付宝后台服务诸葛IO微信支付海康威视七牛直播声网指纹识别活体检测var baiduMap=api.require(baiduMap);baiduMap.open(x:0,y:0,width:auto,heig

5、ht:auto,center:lon:116.402131,lat:39.999448,function(ret,err)/TODO);标准的模块引入机制，API遵循CommonJS规范，参数设计规范集成大量开发平台服务：支付，地图，分享，推送，及时通信，客服，IOT，AI等，避免重复造轮子HTML5优化-渲染减少内存占用缩放图片的高耗性能客户端服务器配合解决图片占用内存算法：RAM=图宽 图高 4分辨率为200的图片：200 200 4=160KB分辨率为600的图片：600 600 4=1.44M 相差9倍！避免发生图片缩放，img标签多大，图片就给多大下载一张3M图片花5s=下载150张

6、20kb的缩略使用第三方云存储现有的缩略图服务HTML5优化-加速加载HTML、CSS、JS代码写在同一个页面中尽量减少过多的link或script标签避免使用jQuery或BootStrap等重型的框架使用Mobile First，功能独立的框架通用的CSS、JS抽象成工具库使用，同时尽量小HTML5优化-适配HTML5的viewport标签UI尺寸及切图量图box线性布局，背景/图片自适应display:-webkit-box;display:-webkit-flex;-