如何打造业务专属的CAN I USE

1. 如何打造业务专属的CAN I USE 步悠蚂蚁前端工程师

2. 目录 01 02 背景方案 03 数据结论 04 后续探索

3. /01 背景前端兼容性问题

4. 背景浏览器对web标准的不同实现导致了兼容性问题，兼容性问题是前端工程最重要的工作之一。 2012～2021 移动端浏览器市场份额趋势图(数据来源于statista.com)

5. 背景？浏览器兼容性是否等价支付宝客户端兼容性支付宝客户端使用UC内核全球浏览器占比无法推出支付宝端浏览器占比

6. 背景 Can I use ___ in Alipay ?

7. /02 方案支付宝客户端上探测

8. 方案在支付宝客户端上进行Can I use探测 Fx 服务端上传探测代码拉取探测url 代码托管 1. 探测脚本开发上报数据支付宝离线数据监控平台 2. 数据上报数据开发离线数据平台 3. 数据开发生成报表 OceanBase 图表展示 4. 数据展示

9. 关键点1：样本充足亿级样本 100+操作系统版本 Android低至2.3.3, iOS低至7.1 近万种机型 x86内核手机

10. 关键点2: 脚本开发 js探测脚本探测内容丰富 JS、CSS、HTML5、SVG、自定义内容等 css探测脚本高扩展性按照规定格式即可新增探测内容，T+1产出数据自定义探测脚本

11. 关键点3: 业务隔离 1）代码隔离 2）发布隔离客户端 CDN就近节点 iframe 代码地址不变代码托管 oss内容存储发布解耦隔离业务代码隔离polypill污染探测脚本开发

12. 关键点4: 大数据处理 uv 采样率 * 亿级客户端原始表亿 * 178 条探测方法操作系统维度中间表数据嗅探基础表级数据操作系统维度汇总表操作系统维度回流表万级内核维度中间表内核维度汇总表内核维度回流表聚合上报离线数据占比结果表第一步：数据拆分笛卡尔积占比回流表第二步：数据聚合第三步：数据汇总第四步：数据回流小版本 -> 大版本数据整合可实时查询实时数据

13. 关键点5: 可视化展示聚焦移动端兼容性(Android vs iOS) 特点给出用户占比基于UC内核维度分析

14. /03 数据结论有趣的数据发现

15. 数据结论 iOS 8、Chrome 40以下无需考虑兼容性完全支持所有 ES5 属性 ES6属性的支持度超过99%，不支持的集中在UC4 2.0、iOS9以下

16. 数据结论 Chrome 63以上支持 UC4 2.0 (Chrome 57) 以上支持

17. 数据结论 Chrome 34以上支持 UC内核均不支持

18. 数据结论屏效：屏幕单位时间、单位面积内的信息带来的商业收益，提升屏效能提升转化。 99.03%的用户可⻅ 52.56%的用户可⻅ 99%以上的用户能看到iPhone 6/7/8p的手机看到的内容

19. /04 后续探索未来小畅想

20. 后续探索性能多维度分析浏览器、前端api兼容性演进趋势分析可用 poly ll.io最佳实践

21. 回顾一下如果你也想定制自己业务的can i use 探测脚本开发探测结果上报探测数据清洗脚本开发数据上报数据开发汇总结果展示可视化展示

22. FAQ 钉钉微信

23. 谢谢观看