前端性能优化思想模型,在自动驾驶领域的实践(上)

简介: 前端性能优化思想模型,在自动驾驶领域的实践

背景

上一篇文章《当前端遇到自动驾驶》有详细介绍过自动驾驶点云标注的背景,就不再赘述了,这里只稍微再补充一点领域知识:

常见的点云标注任务有 动态帧(连续帧),静态帧(叠帧),2D&3D融合 等等。

不同的任务场景有不同的技术难点,我们今天针对动&静态帧标注这两个场景下的点云渲染和加载性能优化来展开。




挑战

挑战1: 数据量大

每个PCD[1]的点云数量高达几十万量级,而3D框体调整需要实时渲染,全量扫描点云极度消耗机器资源,产生交互卡顿,如何优化?

挑战2: 文件体积大

每个PCD文件包含大量数据,ASCII编码模式下单文件大小高达20多MB,在静态帧标注场景,单帧能达到几百MB,用户光加载个文件都要等很久,如何优化?

静态帧:将N个PCD数据叠加在同一个场景(scene)下进行处理,主要用于标注一些建筑物和路标等静止物体。

方法论

在进入实际问题解决之前,我们先引入几个思想模型(方法论):

分治

分治[2],字面意思就是“分而治之”,就是把复杂问题拆分成多个简单问题来处理,最后再合并处理结果。

这个思想在计算机领域极其常见,本身就是计算机诞生的原理性支点。

编码

编解码在计算机领域也是极其常见的,在不同场景下切换不同的编解码方式,可以在易用高效之间灵活切换。

流式

从微观视角看没有绝对的流式,一切都是批处理,是离散的。但我们在顶层应用的开发时,从宏观视角看,就会出现流式现象,本质上就是粒度更小的批处理




实战效果

先简单讲下基本思路,其实不管是解决什么问题,多大规模的问题,最本质的方法论都是普适的。比如解决规模问题,无非就是采用“分治”的策略嘛,分而治之,多大的问题都能被拆解为若干个相似的小问题,再逐一治理。

上面我们已经介绍了三种最常用的思想模型,接下来我们看看如何在遇到的两个挑战里进行实操。

挑战1

挑战1(数据量大)明显是个规模问题,既然是规模问题,就可以用分治思想解决。

我们先把整个点云所覆盖的XY平面,拆分为N个矩形单元,比如10 x 10一个单元,那如果整体覆盖面大小是1000 x 1000 的话,就会被分拆为10000个处理单元,每个单元都有自己的坐标边界(Xmin,Xmax,Ymin,Ymax),当我们绘制3D框体时候,可以先用哈希表找出该框体所占用的单元面积,做一个标记,等整体用户操作完成后,再统一渲染,并且只渲染被标记为“活动” 的处理单元即可。

image.png

这样下来,其实每次渲染只需要重新更新10 x 10范围内的点云,这个数量级基本上可以从十万级降低到百级(取决于处理单元的大小),处理速度也会快很多。

目前这个方案的代码尚未开发完成,暂时不放出来了,感兴趣的朋友也可以自己试着实现一版。

挑战2

挑战2(文件体积大)其实就是解决资源文件过大问题,在前端这里早就司空见惯了,无非就是下面几种方式:

  1. 压缩文件 —— 对应编解码模型
  2. 拆分文件 —— 对应分治模型
  3. 流式加载 —— 对应流式模型

编码压缩

先来说压缩,PCD文件有很多种编码格式,其中ASCII格式比较直观,我们可以直接读懂文件,明文看到该文件点位的信息,方便我们及时纠错,但是缺点就是太大了。

image.pngASCII编码的PCD文件

所以我们将生产环境用的PCD文件,统一重新进行了二进制编码,采用binary方式写文件,这就极大的缩小了文件体积(压缩到原来的20%)。

image.png

目录
相关文章
|
12天前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
103 5
|
4月前
|
前端开发 JavaScript 索引
前端性能优化:虚拟滚动技术原理与实战
前端性能优化:虚拟滚动技术原理与实战
524 80
|
4月前
|
缓存 监控 前端开发
前端性能优化:现代框架的关键策略
前端性能优化:现代框架的关键策略
224 74
|
4月前
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅的用户体验
前端性能优化:打造流畅的用户体验
|
8月前
|
缓存 前端开发 UED
如何优化前端性能以提高加载速度
前端性能优化对提升网站加载速度至关重要,直接影响用户体验、SEO排名和转化率。本文介绍了优化前端加载速度的关键技巧,包括最小化HTTP请求、使用CDN、优化图片、利用浏览器缓存、压缩文件和实现懒加载。通过这些方法,可以显著减少页面加载时间,提高网站的整体性能和用户满意度。
|
5月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
300 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
9月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
8月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
342 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
7月前
|
人工智能 JavaScript 前端开发
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
682 5