【Cesium开发】Vue.js 项目中优化 Cesium.Viewer 性能问题的详细分析

二进制的伽利略

已于 2024-08-27 23:25:16 修改

阅读量758

点赞数 19

文章标签： vue

于 2024-08-27 23:18:12 首次发布

本文链接：https://blog.csdn.net/m0_46299825/article/details/141614823

版权

Vue.js 项目中优化 Cesium.Viewer 性能问题的详细分析

在构建基于 Vue.js 和 Cesium.js 的 3D 地图应用时，性能优化是一个非常关键的点。如果处理不当，可能会导致应用出现卡顿、帧率下降的情况。本文将详细探讨在 Vue.js 中使用 ref 来管理 Cesium.Viewer 对象导致的性能问题，并提供有效的优化方案。

背景

在一个使用 Vue.js 和 Cesium.js 开发的 3D 地图项目中，我发现当用户点击按钮运行粒子特效时，应用的帧率（FPS）突然大幅下降，导致严重卡顿。通过代码分析和测试，我确定问题出在使用 Vue.js 的 ref 来管理 Cesium.Viewer 对象上。

什么是 `ref`？

ref 是 Vue 3 中的一个核心概念，用于创建响应式数据。当你使用 ref 创建一个变量时，Vue 会将其包裹在一个响应式对象中，并将这个响应式对象返回。该对象有一个 value 属性，真正的数据存储在 value 中，任何对 value 的访问或修改都会触发 Vue 的响应式系统进行更新和重新渲染。

例如：

import { ref } from 'vue';

const count = ref(0);

// 访问和修改时
count.value = 1;
console.log(count.value);

`ref` 与普通变量的区别

响应式管理：ref 是响应式的，当 value 发生变化时，Vue 会追踪并响应这个变化，自动更新视图。而普通变量则没有这样的机制。
类型封装：ref 会将原始数据封装在一个对象中，并通过 value 属性访问。而普通变量直接持有数据。
性能开销：ref 的响应式管理会带来额外的性能开销，特别是在处理复杂对象时。每次访问 ref 的 value 属性时，Vue 都会进行依赖追踪，这在数据复杂或频繁更新时可能造成明显的性能下降。

初始实现（A 版本）

在 A 版本的代码中，我们使用 ref 来管理 Cesium.Viewer 对象：

import { onMounted, ref } from 'vue';
import CesiumWindy from '../utils/windy/index';

const viewer = ref<window.Cesium.Viewer | null>(null); // 使用 ref 管理 Viewer 对象

const showWindy = () => {
  if (viewer.value) {
    // 使用 viewer.value 操作 Cesium.Viewer 对象
  }
};

onMounted(() => {
  viewer.value = new Cesium.Viewer('cesiumContainer', {
    // Cesium.Viewer 的初始化配置
  });
});

在这个实现中，viewer 被封装在 ref 对象中，Vue 会对 viewer.value 的访问和修改进行响应式管理。

性能问题分析

由于 Cesium.Viewer 是一个非常复杂的对象，内部包含了大量的方法和属性。将 Cesium.Viewer 对象封装在 ref 中会导致 Vue 的响应式系统对其进行代理，触发大量的依赖追踪和响应式更新，这会显著增加系统的负担。当 viewer.value 被频繁访问或修改时，Vue 的响应式系统会频繁触发不必要的更新，导致严重的性能问题，表现为帧率下降和 UI 卡顿。

优化方案

为了避免 Vue 的响应式系统对 Cesium.Viewer 进行不必要的代理，我们决定将 viewer 从 ref 修改为普通变量，并且将所有 viewer.value 的引用改为直接使用 viewer。通过绕过 Vue 的响应式系统，我们可以直接操作 Cesium 对象，从而提升性能。

优化后的实现（B 版本）

在 B 版本中，我们将 viewer 修改为普通变量：

import { onMounted } from 'vue';
import CesiumWindy from '../utils/windy/index';

let viewer: any = null; // 使用普通变量管理 Viewer 对象

const showWindy = () => {
  if (viewer) {
    // 直接使用 viewer 操作 Cesium.Viewer 对象
  }
};

onMounted(() => {
  viewer = new Cesium.Viewer('cesiumContainer', {
    // Cesium.Viewer 的初始化配置
  });
});