A4--车薇--酷家乐前端性能保障体系.pdf

1、酷家乐前端性能保障体系车薇群核科技(酷家乐)测试开发专家车薇酷家乐、阿里巴巴等互联网公司具备13年测试开发经验。多年全站性能优化、质量架构、专项保障经验；熟悉toB、toC不同行业领域体系技术架构；具备海外全球化复杂网络应对策略、及跨国多机房端到端性能保障体系；多项（6-8）国家个人专利获得者。酷家乐测试开发专家，酷家乐全站性能优化负责人目录CONTENTS!01 !#$%&()*02 +,-%&./03 01%&./04 01背景酷家乐酷家乐云设计工具介绍假如你是一位马上要装修的业主户型是不是要改一下?地面用什么瓷砖？卧室做几个衣柜，用什么颜色？客厅沙发用什么款式，怎么摆放？.酷家乐云设计工

2、具是一款在线家装设计工具5分钟搞定装修设计10秒钟生成效果图1分钟生成3D虚拟样板间面临的性能问题&挑战大方案打不开，国际网络延迟大，体验差黑白屏、崩溃操作模型&画布卡顿渲染慢，出不了图方案加载慢，打不开性能年年优化，但缺乏体系化，前端性能是重灾区性能专项技术攻坚，解决大场景问题、解决黑白屏、图片性能问题面临的问题挑战1挑战202设计工具性能保障体系!性能标准&卡口流程!#性能监控!$性能技术治理!%性能基建设计工具性能保障体系标准统一、指标细化、基线对比&卡口策略，版本常态化性能保鲜对预加载、懒加载、包体积优化、场景帧率卡顿等常见的前端优化性能技术原理进行剖析性能自动化框架、性能API及专项

3、检查方法性能监控体系及性能度量作为很重要的一环，通过监控发现问题，结合性能标准，进行专项治理。设计工具性能标准2022之前2022之后VS指标丰富，体系化标准化指标单一，非标准化!#$%&()*工具发版性能卡口流程参照设计工具版本发布流程，要求双周大版本实施性能卡口，卡口范围包含方案加载耗时、核心场景平均帧率/最长帧/最后帧&内存增长、包体积卡点，线下性能基线新老版本对比性能退化超5%卡住不予以发布卡口要求局部/小范围：当期修复不了可走紧急报备，进入限期整改流程严重/大范围：方案加载耗时超20%&内存增长超10%，核心场景帧率退化超50%，属红线不能就紧急报备，当期必须修复性能监控度量体系性能

4、度量及性能监控体系作为很重要的一环，通过监控发现问题，进行专项治理，结合性能标准等进行长效治理。性能监控体系产品介绍设计工具性能主要有哪些问题加载慢原因&技术手段性能基建如何发现卡顿原因&技术手段性能基建如何发现黑白屏-内存泄漏&崩溃技术原因&防止手段性能基建如何发现如何做到防、治相结合？加载慢常见原因方案加载慢进入云图工具方案打开慢方案加载失败，提示无法访问页面从主工具进入全屋定制方案打开慢Coohom国际站进方案99%卡住了二级入口功能耗时长进入施工图纸慢单操作耗时长：图纸自动标注慢瞬时行为耗时长：删除墙、渲染手动灯光-3D放置各类光源瞬时性能耗时久，存在明显的阻力业务侧常见的加载慢问题有

5、哪些？性能特征是什么？性能加载治理-Prefetch预加载、包体积瘦身总 体 策 略：空 间 换 时 间，异 步 化，并 行Prefetch要点在启动阶段，利用浏览器的空闲时间在预加载后续会使用到的资源和数据，需保证几点不能阻塞主线程不能占用太多内存不能占用太多带宽性能加载治理-懒加载名词定义 延时加载：代码和数据在云图启动阶段不加载，推迟到功能被激活的时刻再加载 按需加载：在云图启动阶段，根据权限点等来决定是否加载某个插件，在后续云图使用的过程中，不会动态的调整这个是否加载的结论4 40%0%!哪些是 延时加载 ，哪些是按需加载？针对产品形态的切分方式：代码加载的时间变化，数据注入（docu

6、ment source）时间变化用户的体感的影响：!#$%&()*+,-./0123456*78-9./01,-:;#$/?A78-BCDE#$%&工具性能体系-防-性能自动化框架关系图工具性能体系-防-加载性能自动化检测API工具方案加载耗时API：第一次无缓存、第三次打开方案有缓存验证方案细分耗时-应用程序启动：openDesignAppStart加载类-单操作耗时：Performance getPerfInfo()瞬时行为-渲染阻塞耗时：Performance getInstantPerfInfoGoogle Lighthouse加载耗时：Performance getInstantPe