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

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

背景

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

常见的点云标注任务有 动态帧(连续帧),静态帧(叠帧),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

目录
相关文章
|
24天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
20 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
1天前
|
前端开发 JavaScript Go
构建高性能Web应用:优化前端资源加载
在构建现代Web应用时,优化前端资源加载是至关重要的一步。本文将介绍一些提升Web应用性能的关键策略,包括减少HTTP请求、压缩和合并资源、使用CDN加速、以及异步加载技术等。通过实施这些优化策略,开发人员可以显著提升网站的加载速度和用户体验。
|
2天前
|
前端开发 JavaScript UED
如何优化前端网页加载速度
在当今互联网时代,网页加载速度成为了用户体验的重要指标之一。本文将介绍一些优化前端网页加载速度的方法,包括压缩资源、使用CDN加速、延迟加载等技术手段,帮助开发者提升网页性能,提高用户满意度。
|
9天前
|
缓存 前端开发 UED
优化前端性能的六大技巧
在当今互联网高速发展的时代,优化前端性能是每个开发者都必须重视的任务。本文将介绍六大实用的技巧,帮助开发者提升前端应用的性能,提升用户体验。
|
10天前
|
存储 缓存 前端开发
前端如何利用indexDB进行数据优化
使用IndexedDB作为浏览器内置的客户端数据库,用于存储大量数据和实现离线支持。它能缓存常用数据,减少服务器请求,提高用户体验。IndexedDB支持数据索引、复杂查询及版本管理,允许离线操作并同步到服务器。但需熟悉其异步API,可借助Dexie.js、localForage等库简化使用。
|
13天前
|
机器学习/深度学习 前端开发 算法
使用机器学习优化前端用户体验
在当今高度竞争的互联网市场中,用户体验是至关重要的。本文将探讨如何利用机器学习技术来优化前端用户体验,从而提高用户满意度和留存率。我们将介绍如何利用机器学习算法分析用户行为数据,优化网站性能和内容推荐,以及如何实时调整界面设计和交互方式,从而实现个性化、智能化的用户体验。
|
14天前
|
前端开发 算法 JavaScript
如何优化前端性能:探索图片压缩与延迟加载技术
本文深入探讨了前端性能优化中的关键问题:图片压缩与延迟加载技术。通过介绍图片压缩的原理和方法,并结合实例说明了如何有效减少图片大小、提升加载速度;同时,详细解析了延迟加载技术的实现原理及其在提高页面加载性能中的作用,为前端开发者提供了实用的优化方案。
|
16天前
|
缓存 前端开发 JavaScript
如何优化前端网页加载速度:7个实用技巧
在当今互联网时代,网页加载速度对用户体验至关重要。本文将介绍7个实用的技巧,帮助前端开发者优化网页加载速度,提升用户体验。从压缩资源到异步加载,从图片优化到缓存策略,这些技巧将帮助你在前端开发中取得更好的效果。
|
24天前
|
前端开发 JavaScript UED
如何优化前端网页性能提升用户体验
本文将探讨如何通过一系列前端优化技术,提高网页加载速度、减少资源请求次数,从而优化用户体验。我们将介绍一些常用的性能优化技巧,包括资源压缩、懒加载、CDN 加速等方法,帮助开发者更好地构建高效、流畅的前端网页。
|
1月前
|
编解码 前端开发 UED
现代前端开发中的响应式设计原则与实践
在当今移动互联网时代,响应式设计已成为现代前端开发的重要组成部分。本文将介绍响应式设计的基本原则及实践方法,包括弹性网格布局、媒体查询和流式布局等技术,以及在实际项目中的应用经验和常见挑战。