Open huruji opened 6 years ago
Web 和 Native 最大的差距不是调用底层接口的能力甚至不是性能，而在于各种细节，保证从设计到实现做到精细化。
流程规范：设计稿标准 + 视觉走查流程
基础方案：沉淀设计还原的基础方案
工具辅助：视觉还原对比工具
对于动画我们应该参考 iOS 和 Android 的原生动画，参考其动画方式和缓动模式。
主要反映在以下几点：
极速响应：在100ms内响应用户的操作
实时反馈：实时响应手势过程
操作流畅：动画、手势响应、滚动
并行加载资源和数据
足够快时不需要Loading
组合Promise
另外可以前端采集响应时间大于100ms的异常进行上报。
跨端加载机制，保证页面可加载（基于 Service Worker 的跨端预加载方案，保证页面一定能打开，并且秒开）
统一的异常提示和重试机制
避免误操作-点击区域（尽可能将点击区域做大，防止用户点击无响应）
Refs
D2前端技术论坛官网
天猫web目前的不足
Web 和 Native 最大的差距不是调用底层接口的能力甚至不是性能，而在于各种细节，保证从设计到实现做到精细化。
如何保证设计稿的高度还原
流程规范：设计稿标准 + 视觉走查流程
基础方案：沉淀设计还原的基础方案
工具辅助：视觉还原对比工具
设计稿的静态还原
字体
设计稿的动态还原
对于动画我们应该参考 iOS 和 Android 的原生动画，参考其动画方式和缓动模式。
用户操作体验
主要反映在以下几点：
极速响应：在100ms内响应用户的操作
实时反馈：实时响应手势过程
操作流畅：动画、手势响应、滚动
极速响应
并行加载资源和数据
足够快时不需要Loading
组合Promise
另外可以前端采集响应时间大于100ms的异常进行上报。
操作流畅
可靠性
跨端加载机制，保证页面可加载（基于 Service Worker 的跨端预加载方案，保证页面一定能打开，并且秒开）
统一的异常提示和重试机制
避免误操作-点击区域（尽可能将点击区域做大，防止用户点击无响应）
回顾
Refs
D2前端技术论坛官网