飞度bim，前端性能保障体系

一、背景

酷家乐是全球领先的3D云设计平台，作为一款主打室内装修设计软件，面向家居、公装、建筑、房产等领域，为企业和个人提供设计、营销、生产、管理等一站式解决方案，致力于“用设计让未来生活所见即所得”。那么要支撑云设计工具用户体验丝般顺滑，快速渲染出效果图、全景图和720°漫游图，离不开端到端的性能保障体系的支撑，这边重点介绍一下酷家乐前端性能保障体系：从2022年H2开始，明确提出前端性能领域体系化建设思路，全方位覆盖以云设计工具为主，包含酷家乐、美间、国际站、模袋云为产品代表的端到端用户体验的标准化性能保障体系。

二、性能标准&流程规约

目前酷家乐主要是2套性能标准、1套线下性能卡口流程规约：

那么我们接下来了解一下相关性能标准。

W3C性能标准

W3C-.是W3C提供的用来测量网页和Web应用程序的性能api

按图所示，.就记录从用户在浏览器输入url开始到前端页面达到页面加载完成达到完全可交互状态，酷家乐当前各业务站点的网页性能也是结合W3C业界通用标准梳理出相关核心性能指标。

性能体验标准

在2020年5 月5日提出了新的基于用户体验量化方式 Web 来衡量网站的用户体验来综合评估移动友好性、浏览安全性，以及Core Web 中关于加载性能、交互性、视觉稳定性等，而且本身提供系列指标项，将这些衡量结果用作其排名算法的一部分，所以我们一般会使用 的指标做行业的竞争性能的排行。为了更好地理解这些内容，让我们来看看这些重要指标是什么

核心指标

目前这套标准部分指标，比如LCP（ ）用于衡量加载体验，从真实用户的角度衡量网页的加载速度，作为国际站主站线上很重要的一个性能指标。同时，网站线下性能自动化，也广泛地应用了这FCP、LCP、TTI、CLS、TBT进行web页面的线下性能自动化评判标准。那么怎么样算是优秀的，通过给出一套标准的性能体验评级推荐。

例如，LCP耗时在2.5秒之内被认为当前页面处于性能优秀，LCP指标耗时在2.5秒和4秒内，性能有待提升，而大于4秒则属于性能较差

再比如，当某些时候网页中的元素在加载时出现移动，这不是用户期待的优秀体验。在这样的场景中，CLS（ ）测量在页面的整个生命周期中发生的每个意外的样式移动的所有单独布局更改得分的总和，可以方便地用来度量 web 页面的视觉表现。布局的移动可能发生在可见元素从一帧到下一帧改变位置的任何时候。为了提供良好的用户体验，网站应努力使 CLS 分数小于 0.1

设计工具性能标准

作为酷家乐的主营业务，不可不提云设计工具，这套是公司自定义的性能标准。《 云设计工具性能标准 》 、《 线下宽口径性能卡口标准 》当前定义了非常详细的标准，主要分为加载类和消耗类两大类性能指标项，具体见下图：

其中难点在于卡顿类的指标，平均帧率和最长帧耗时、最长帧耗时之间的关系是怎么样的，可以从下面这部分内容了解

屏幕成像原理及卡顿原因

屏幕显示原理 屏幕会把像素点上，由左往右，完成第一行的像素扫描，然后等待水平同步信号的到来，电子枪会来到第二行的初始位置，这样由左往右，从上往下，逐行扫描，来到显示器的右下方，等待垂直同步信号（ ）的到来。这样就完成第一帧画面的绘制，电子枪复位，回到左上角。上面第二张图，主要描述，计算机系统中CPU、GPU、显示器相关模块的协同工作。CPU 计算好显示内容提交到 GPU，GPU 渲染完成后将渲染结果放入帧缓冲区，随后视频控制器会按照 信号逐行读取帧缓冲区的数据，经过可能的数模转换传递给显示器显示。

屏幕卡顿 在 信号到来后，系统图形服务会通过 等机制通知 App，App 主线程开始在 CPU 中计算显示内容。随后 CPU 会将计算好的内容提交到 GPU 去，由 GPU 进行变换、合成、渲染。随后 GPU 会把渲染结果提交到帧缓冲区去，等待下一次 信号到来时显示到屏幕上。由于垂直同步的机制，如果在一个 时间内，CPU 或者 GPU 没有完成内容提交，则那一帧就会被丢弃，等待下一次机会再显示，而这时显示屏会保留之前的内容不变，中间这个等待的过程就造成了掉帧，也就是会卡顿。如图所示，是一个显示过程，第 1 帧在 到来前，处理完成，正常显示，第 2 帧在 到来后，仍在处理中，此时屏幕不刷新，依旧显示第 1 帧，此时就出现了掉帧情况，渲染时就会出现明显的卡顿现象

最长帧/最大帧耗时对屏幕是否卡顿进行辅助性能分析，大家看上图-卡顿掉帧原因，垂直同步信号发生的间隔为16.67毫秒，也就是一帧的耗时。蓝色CPU计算和红色GPU渲染并行处理时间如果在2次间隔时间也就是16.67毫秒内完成不了，那么这一帧就丢了，这种行为就像赶公交车，连续赶不上10趟公交车，那么总卡顿时长=16.67*10约为，可能发生在中间就可能成为最大帧耗时，发生在最后就是最尾帧耗时。

性能卡口流程规约

参照云图发布流程 ，要求云图发布双周大版本实施性能卡口，卡口范围包含方案加载耗时、核心场景平均帧率/最长帧/最后帧&内存增长、包体积卡点，线下性能基线新老版本对比性能退化超5%卡住不予以发布。

测试在云图大版本迭代的前一周周三/周四/周五部署sit环境，当周周一/周二beta环境，进行性能自动化持续集成（定时任务不低于1小时/次，单日性能采样大于15次以上）。严重/大范围影响：方案加载耗时超20%；内存增长超10%（大范围表示核心场景超过50%及以上），不能走紧急报备，问题插件方排查修复后才能发布。局部/小范围影响:场景平均帧率/最大帧耗时/最大帧耗时超5%但小于10%局部场景、内存超5%局部场景，包体积：超5%短期不发修复，可走紧急发布邮件审批流程，限期整改修复上线。详见流程规约《 线下宽口径性能标准及卡口流程规约 》

性能卡口问题处理流程

三、性能体系优化方法&手段

性能监控度量分析体系

在整个性能保障体系中，性能度量及性能监控体系作为很重要的一环。通过监控发现问题，进行专项治理，结合性能标准等进行长效治理，做到性能长效保鲜防退化。同时结合线上/线下基线，结合业务关联特性，对监控体系的数据进行有效分析度量。

性能监控体系产品介绍

性能月报综合度量分析：形成闭环，通过性能月报定义反馈线上性能大盘水位线，持续跟进线上问题情况，同时核心业务增设线下性能准出，对比性能基线，长效保险防退化。

监控完善关键事件

国内酷家乐工具前端前端监控告警建设-经过2023上半年的工具前端告警监控事项的推进，目前已覆盖国内酷家乐工具前端整体性能及云图工具、户型、定制、硬装、渲染、BIM施工图、水电等主要插件方。

国内酷家乐线下性能卡口性能看板建设- 为支撑国内酷家乐工具前端在2023年1月启动云图大版本性能卡口事项，各业务插件方逐步完善核心场景性能检查项，通过看板持续关注大版本发布前的线下性能表现情况

用户行为回朔-

美间性能优化性能看板建设- 为支撑美间工具及美间平台，美间工具性能攻坚项目：美间工具性能瓶颈和低性能优化、美间工具操作性能优化、美间工具加载性能（图片性能优化）、渲染耗时长的页面数据和分析、慢渲染；平台侧性能优化项目：客户端内核升级、客户端监控SDK对接、全站webp支持(美间主站、插件、企业版)

国际站性能一期- 国际化性能专项一期，结合国际站前端性能基线，完善国际站前端线上性能分析度量体系、前端性能监控SDK、基线告警（分国家）、静态资源网络性能等基础建设

大场景专题

大场景性能思路

酷家乐发展至今，其实大场景性能前面已经做了3期（ 2021年-工具大场景三期）了，架构为了适应业务快速增长不断垒叠本身已非常庞大负担不堪，本身所带来各种性能&用户体验问题，工具性能优化技术在当下已经进入性能深水区；那么随着我们的客户诉求提升，我们为了能支撑更大的面积，更复杂的模型，更流程的性能体验，于2022年底继续起航！

大场景性能自动化能力建设

大场景专题关键事项描述

线上P99大场景性能分析报告

大场景性能技术优化项

图片专题

图片性能标准

大类

细类

备注（标准）

图片

图片大小统一口径

推荐最终图片大小不超过

webP格式转化

尺寸裁剪

业务场景关联尺寸比例（、，等），可与webp策略叠加

Q值压测

Q值压缩（Q90、Q70、Q50等），可与webp/尺寸裁剪策略叠加

图片域名收敛

当前一个一个域名，100多个域名（爆炸），域名解析耗费太多

动图&短视频

监控类

图片监控

CDN

图片优化技术

对于图片性能优化，目前最有效且高ROI的主要是图片的压缩策略，目前酷家乐主要的CDN厂商腾讯云提供了几种标准的图片压缩策略，接下来主要讲一下webp图片转化技术

图片压缩指在图片质量保持不变的情况飞度bim，前端性能保障体系，尽可能地减小图片大小，以达到节省图片存储空间、减少图片访问流量、提升图片访问速度的效果。对象存储（ ，COS）基于 数据万象（ ，CI） 产品推出了 WebP 压缩功能，可将图片转换为 webp 压缩图片格式，其在压缩方面相比 jpg 格式更优越。在相同图片质量的情况下，webp 格式图片要比 jpg 格式图片减小25%以上，可以适配多终端使用场景。那么webp图片转化策略，是通过支持将 jpg、png、bmp、gif、tpg、heif、avif 等格式图片转换为 webp 格式，从美间及酷家乐实测《 图片webp格式转化实测记录 》，对于png图片转webp压缩比在75%以上，jps图片转webp压测在25%以上。

图片优化效果

美间《 工具教程图片webp优化项目 》图片优化效果非常好，不仅是美间工具这边的教程图片，还是gif教程动图等，结果来看体积优化和耗时优化可以说都到了极限（比如之前图片性能优化%，还实际提升了不少）

图片专题相关事项介绍

图片问题跟进

图片监控完善

美间图片优化项目

酷家乐线下性能基建能力建设

性能自动化能力基础

从酷家乐国内工具开始对云图发布双周大版本实施线下性能卡口，为了能具备性能高度自动化持续集成能力，且覆盖核心业务线场景诸多性能指标项考证含金量排行榜，在大版本发布前3天做到性能问题发现，有效拦截，定位并修复上线，给云图各业务插件提出非常高的要求和挑战。

应对挑战关键事项

提升业务线核心场景覆盖密度 覆盖密度从最开始不足20-30% ——> 95%

性能自动化脚本能力提升 性能指标原理解读↑ && 编写技巧提升↑ && 性能公共方法API丰富↑

性能自动化环境问题解决 工具半年累计持续集成 3万+ 次 && 发现问题 33+ && 不断总结积累↑

其他端到端性能优化技术介绍

前端性能优化总体策略：空间换时间，异步化，并行

如上图所示，从最开始容器初始化之后，把load JS、JS &Run、请求发送之前都是串行的独立任务统一并行提前到初始化后，缩短整体端到端耗时，同时对页面dom节点数进行优化减小，同时对JS包体积进行瘦身也很关键，以及对JS包的提前预加载来缩减其耗时，这样提前自动更新，推送到用户本地侧，对页面性能加载优化提升起到了明显的效果。

SW缓存机制（ ）

是运行在浏览器背后的一个脚本，可以使网页具备离线访问、推送通知和缓存数据等能力。其中， 的缓存机制是其重要功能之一。 缓存机制允许开发人员将资源（如HTML文件、CSS样式表、脚本和图像等）存储在客户端，而无需每次请求都从服务器获取。这提供了更快的加载速度和离线访问功能。它有两重意义：1、JS资源在页面打开前就预先下载好，降低js下载时间；2、让JS到 code的结果可以被缓存，从而降低js编译时间。

预加载（）

在页面加载生命周期，把相关资源提前发起，同时利用浏览器的空闲时间进行异步任务，当前要保证几点：

懒加载（）

JS包体积瘦身

JS包体积，目前主要指云图工具、BIM工具应用层代码包体积。其JS包代码体积大小和空方案/非方案加载有正相关性。在《 云图加载性能优化及包体积瘦身项目 》对于云图应用的代码体积包大小进行优化完成30%的瘦身。到2023年5月，云图和bim工具包体积持续下降创新低，云图包体积70多m接近80m左右飞度bim，那会儿云图空方案12秒，最近云图总体积接近60m(瘦包26-28%左右)，空方案耗时8.5秒(28%)

项目优化成果保鲜持续防范挑战大，这是一个长期过程，还好从2023年开始云图发布大版本实施包体积大小性能卡口，从根本抑制了对云图&BIM工具整体及各插件微应用细分包大小随着不断的需求发布导致JS体积增长，效果非常明显

酷品秀端到端性能优化

后端：

四、未来展望

酷家乐是以分布式并行计算和多媒体数据挖掘为技术核心，推出的家居云设计平台，致力于云渲染、云设计、BIM、VR、AR、AI等技术的研发，实现“所见即所得”体验，5分钟生成装修方案，10秒生成效果图，一键生成VR方案，极大提升行业整体效率。作为“设计入口”，酷家乐致力于打造一个连接全球设计师、家居品牌商、装修公司以及业主的强生态平台，实现全人类的“所见即所得”体验。

正如酷家乐员工手册中映入眼帘的第一句话，我们在这条道路上始终坚信，并持之以恒……

重云端 利用云的CPU/GPU，将云端海量的运算及渲染能力发挥到极致，充分利用云端的资源，未来我们所有的产品设计理念及技术改造思路一定秉持这个理念继续前行。除了之前大量的篇幅介绍了前端性能之外，未来我们也会重点持续对应用集群的综合性能更清晰的去衡量和要求，作为稳定性&性能非常重要组成部分，整体的内存（频繁导致GC、OOM、内存异步化消峰）、方案大对象、长生命周期对象、是否支持分布式处理，计算维护：CPU飙高、请求维度：大量的请求出现流量尖峰（读写放大、负载不均衡、无线轮询、不合理不必要的请求）、任务积压、实例负载飙高等，配合长期的稳定性&性能专项保障及预案专项治理。

更大更复杂 未来，我们要实现1万平，甚至去探索10万平，支持更大更复杂的方案，更好的服务商业空间，商超，办公行业，室外建筑等大型生态行业客户。整体的架构为支持这个目标需要不断的迭代和革新，性能在此启动关键作用，作为评判用户交互体验的准绳。

国际化 驰骋在全球化的海洋中，做深做广，拥抱全人类。目标是宏远的，要做到此，未来还有很多事情需要去做，酷家乐当前的架构绝大部分还是以国内机房为主，升级改造衍生为国际化架构，解决跨国机房所有服务海外对等部署，全方位打造并逐步升级为跨国多机房标准模式，和海外云服务商共同合作，完善全球化网络拓扑节点，和国家POP边缘节点加速策略，以提升并有效适配海外不同国家和地区，努力打造访问酷家乐就如同访问本国本地机房的丝般顺滑的性能体感。

更智能 随着AI、AR等技术的飞度发展，酷家乐也会拥抱和全面迎接AI时代的到来。