4-酷家乐前端性能保障体系终稿-车晓-0709.pdf

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

2、秒钟生成效果图 1分钟生成3D虚拟样板间厂商面临的挑战和问题方案加载慢，打不开面临的问题渲染慢，出不来图操作模型&画布卡顿大方案打不开，国际网络延迟大，体验差崩溃、黑白屏挑战1性能年年优化，但缺乏体系化，前端性能是重灾区挑战2性能专项技术攻坚，解决大场景问题、解决崩溃&黑白屏等性能问题厂商背景设计工具保障体系大场景性能专题CONTENTS未来展望目录设计工具性能保障体系01性能标准&卡口流程02性能监控03性能技术治理04性能基建标准统一、指标细化、基线对比&卡口策略，版本常态化性能保鲜性能监控体系及性能度量作为很重要的一环，通过监控发现问题，结合性能标准进行专项治理。对预加载、懒加载、包体积

3、优化、场景帧率卡顿、崩溃&黑白屏等常见的前端优化性能技术原理进行剖析性能自动化框架、性能API及专项检查方法设计工具性能标准发展历程2022年H2之前2024年-H1非标准化，指标单一2023年 方案加载耗时 场景帧率标准&体系化，发布性能卡口性能左移 内存泄漏卡点 内存极限探测工具发版性能卡口流程参照设计工具版本发布流程，要求双周大版本实施性能卡口，卡口范围包含方案加载耗时、核心场景平均帧率/最长帧/最后帧&内存增长、包体积、内存泄漏卡点，线下性能基线新老版本对比性能退化超5%卡住不予以发布卡口要求 局部/小范围：当期修复不了可走紧急报备，进入限期整改流程 严重/大范围：方案加载耗时超20%

4、&内存增长超10%，核心场景帧率超50%，属红线不能走紧急报备，当期必须修复工具发版性能流程升级-性能左移 背景：版本卡口时间窗短，性能问题暴露晚，开发定位&排查问题慢，当期卡口问题修复率低，通过左移发现周期，需求相对分散commit减少也便于排查定位。左移业务试点：设计工具云图、户型、定制业务线 举例：日常工作分支作为左移环境，小时持续集成，提前发现性能问题，缓解开发排查时间短压力23年底复盘数据卡口拦截率：79%当期修复率：32%为什么要进行性能左移？线下性能告警通知机制原始采样算法均值算法业务线诉求强：线下监控至少2套、性能场景200-300特点：均值和原始采样算法均适用于线下离散、数据

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

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