cesium-Web页面优化总结_浏览器优化cesium性能

cesium-Web页面优化总结

介绍

在介绍如何优化之前，我们先要了解一下cesium需要优化的几种情况（目前我遇到的一些情况）

1. 直接加载cesium的时候就开始卡顿不流畅（还未加载大量数据）
2. cesium在vue等单页面应用中使用的时候，刚开始加载还正常，但随着刷新、数据交互等操作后开始卡顿
3. cesium在加载3dtiles（这里主要是说倾斜摄影模型）时，随着加载的数据多了后开始明显卡顿

这三种是我目前遇到的问题，后面有其他的问题我再更新进来，欢迎大家一起探讨

解决步骤

问题一

针对第一个问题，这个就比较明显了。

一般是老电脑没有独立显卡，使用核心显卡来加载，性能不够造成的，这个直接换电脑就行！（我之前公司的电脑就不太行，后来直接使用自己的笔记本来开发了）

还有一种情况，就是我们的电脑有独立显卡，配置还不错，但还是有些卡。这个可能是由于我们没有配置好电脑显卡设置造成的。我们需要让浏览器使用独显来渲染webGL数据。

这里我以我现在用的电脑为例：

• 显卡为GTX2060super
• 系统为win11
• 处理器为i5-7400

在电脑右下角有个英伟达显卡驱动图标

右击打开驱动设置

选择管理3D设置

这里我们可以全局设置所有的应用都使用独立显卡来渲染（费电），也可指定应用来使用独显，这里我们指定程序

我们将浏览器添加到程序设置中（如果你在下拉菜单中没有找到），让独立显卡来管理（优先使用独立显卡）

加入管理后，还可以设置参数来调优，这里我就不介绍了，有兴趣可以百度看看

问题二

在vue项目中使用cesium时，我们习惯让vue来管理对象，所以就将cesium交由vue管理。

vue的数据双向绑定导致Cesium相关的对象一直被监听。

一般Vue项目内存泄露常发生在某些地方我们引用的第三方库自己创建和维护了DOM，所以Vue在页面卸载时虽然这些对象的引用都释放了，但是因为这些对象自身关联了DOM所以内存无法释放。

解决方法也很简单，我们把cesium对象从vue中提取出来。

// cesium交给window对象管理
window.viewer = new Cesium.Viewer('cesiumContainer', {});
// 数据定义在外面
let dataSource = null
1
2
3
4

• 不要把任何的cesium对象放在data中监听，因为在data中的变量 ，vue会劫持数据 ，导致迟缓。
• vue组件的data选项，只存储和UI关联的数据，没关联的一定不要存储在data选项里面，提出Vue对象作用域。

问题三

我们在加载3dtiles倾斜摄影模型的时候，如果使用默认的配置

new Cesium.Cesium3DTileset({
        url: '../3dtiles/chuangzhuang/tileset.json',
        modelMatrix: Cesium.Matrix4.fromArray([1, 5.551115123125783e-16, 5.898416033378595e-9, 0, -6.106226635438361e-16, 1, -1.1355608731111744e-8, 0, -5.898416061134171e-9, 1.1355608731111744e-8, 0.9999999999999999, 0, 9.912469893228263, -19.08345020748675, -14.613607150502503, 1]),
      });
1
2
3
4

可能会随着数据的加载，页面变得越来越卡，内存占用越来越高

这个时候我们需要修改一下Cesium3DTileset的配置，来优化加载，提升流畅度，配置如下

new Cesium.Cesium3DTileset({
        url:tilesUrl + '/3dtiles/chuangzhuang/tileset.json',
        modelMatrix: Cesium.Matrix4.fromArray([1,5.551115123125783e-16,5.898416033378595e-9,0,-6.106226635438361e-16,1,-1.1355608731111744e-8,0,-5.898416061134171e-9,1.1355608731111744e-8,0.9999999999999999,0,9.912469893228263,-19.08345020748675,-14.613607150502503,1]),
        skipLevelOfDetail: true,
        baseScreenSpaceError: 1024,
        maximumScreenSpaceError: 256, // 数值加大，能让最终成像变模糊
        skipScreenSpaceErrorFactor: 16,
        skipLevels: 1,
        immediatelyLoadDesiredLevelOfDetail: false,
        loadSiblings: true, // 如果为true则不会在已加载完概况房屋后，自动从中心开始超清化房屋
        cullWithChildrenBounds: true,
        cullRequestsWhileMoving: true,
        cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除
        preloadWhenHidden: true,
        preferLeaves: true,
        maximumMemoryUsage: 128, // 内存分配变小有利于倾斜摄影数据回收，提升性能体验
        progressiveResolutionHeightFraction: 0.5, // 数值偏于0能够让初始加载变得模糊
        dynamicScreenSpaceErrorDensity: 0.1, // 数值加大，能让周边加载变快
        dynamicScreenSpaceErrorFactor: 1, 
        dynamicScreenSpaceError: true // 有了这个后，会在真正的全屏加载完之后才清晰化房屋
      });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21