极致的Mobile Web@天猫超市-D2

①猫超的技术选型变迁QWEB的不⾜，我们正努⼒的⽅向猫超的技术选型变迁WebWeb猫超的技术选型变迁早期的Web核⼼问题(Native化的背景)Q加载慢猫超的技术选型变迁猫超的技术选型变迁O1个需求3次开发(iOS、Android、Web)，开发和协同成本⾼Q导购业务迭代频繁&超市北伐等业务临时性需求多，⽽Native发布猫超的技术选型变迁WebWeb猫超的技术选型变迁①滚动过程代码冻结Q加载慢Q⻚头⽆法定制猫超的技术选型变迁猫超的技术选型变迁O滚动过程代码冻结②加载慢Q⻚头⽆法定制猫超的技术选型变迁/cn/articles/mobile-taobao-521-performance-optimization-project猫超的技术选型变迁O滚动过程代码冻结Q加载慢③页头无法定制猫超的技术选型变迁O猫超的技术选型变迁②Web的不⾜，我们正努⼒的⽅向O实现粗糙Q操作体验差Q缺乏可靠性O实现粗糙Q操作体验差Q缺乏可靠性设计稿的静态还原Q基础⽅案：沉淀设计还原的基础⽅案设计稿的静态还原-字体渲染设计稿的静态还原-字体渲染移动端字重设置(iOS+Android)：O跨端的中⽂加粗使⽤bold或者700②谨慎使⽤lighter，iOS下难以辨识，Android⼜不⽀持设计稿的静态还原-字体渲染系统会根据font-family设置中第⼀个能在fonts.xml中匹配上的字体来计算排版，但Android下中⽂⼜没有familyname，导致中⽂或中英混排时⽆法垂直居中i所以针对MIUI设备，可以在font-family最前⾯增加miui来解决：/p/chromium/issues/detail?id=789127设计稿的动态还原O动画⽅式的最佳实践Q缓动模式的最佳实践https://material.io/guidelines/motion/material-motion.html体验00ms内体验响应体验响应体验体验响应注注意点三：通过组合Promise实现精确的预加载体验响应体验00ms内体验体验00ms内00ms内体验作流畅eQ滚动：必须使⽤Passiveeventlisteners@⼿势：配合使⽤touchmove和scroll事件iOS下第⼀次促发scroll事件时存在延时，有时⾼度100px+性能作流畅①跨端预加载机制，保证⻚⾯可加载Q统⼀的异常提⽰和重试机制Q避免误操作跨端预加载机制，保证⻚⾯可加载跨端预加载机制，保证⻚⾯可加载O跨端预加载机制，保证⻚⾯可加载Q统⼀的异常提⽰和重试机制Q避免误操作异常提⽰和重试机制O基于CDN的通⽤缓存策略，尽可能不出错Q统⼀的异常提醒(ing)Q补全异常处理机制(ing)异常提⽰和重试机制点击促发场景模块级异常O跨端预加载机制，保证⻚⾯可加载Q统⼀的异常提⽰和重试机制③避免误操作误操作-点击区域O上下or左右的识别Q浮层内部的区域滚动or整个⻚⾯滚动率的⼿势识别@…开机动画抽屉式的全局导航O精细化O通过规范流程、通⽤⽅案和⼯具来保证静态的设计稿还原Q操作性能Q从阈值促发到实时反馈Q保证动画、滚动、⼿势反馈的流畅性Q可靠性Q统⼀的异常提醒和重试机制Q点击区域优化及⼿势的正确识别@设计语⾔APP化•AppleHumanInterfaceGuidelines•GoogleMaterialDesign•Sketch源⽂件-AndroidMaterialDesign•Sketch源⽂件-iOS11•AndroidUI⽂档•iOSUIKit⽂档•基于flutter实现的UI组件Gallery•Pinterest上各种移动端界⾯&交互设计集合O不依赖框架Q⽀持多种模块依赖机制勾勾极致体验为什么不是WeexorRN？①WK+U4后，操作体验上接近NativeQ基于Web的⼩程序：⽀付宝⼩程