请问为什么加载标签文字的时候，导致页面上出现卡顿？

Question

请大佬们，帮忙看看，我这样写的渲染标签文字，有什么性能上面的优化嘛？🤔现在渲染出来标签文字的时候就感觉有点卡。求大佬们指点一下，谢谢

function webValue() {
  const data = JSON.stringify({ command: 1, serializeAlgorithm: 1, token: window.localStorage.getItem('token') });
  const pingMessage = JSON.stringify({ command: 2, serializeAlgorithm: 1 });
  // 初始Websocket
  const onOpen = () => {
    ws.send(data); // 发送JSON字符串
    // 设置心跳间隔为5秒
    pingInterval.value = window.setInterval(() => {
      ws.send(pingMessage);
    }, 5000);
  };
  // 接收websocket数据
  const onMessage = async (event) => {
    const data = JSON.parse(event.data);
    if (data.data == undefined) {
      console.log('未响应');
    } else {
      if (data.data.state !== undefined) {
        return;
      } else {
        processPositionParams(data.data);
        updateCarModelPosition(positionParams);// 实时更新车辆移动位置
        if (!polylineInitialized) {
          initializePolyline(positionParams); // 初始化轨迹线
          polylineInitialized = true;// 标记轨迹线已初始化
        } else {
          updatePolylinePosition(positionParams); // 更新轨迹线位置
        }
      }
    }
  };
  // 封装处理位置参数的函数
  function processPositionParams(data) {
    const targetingTypes = {
      0x10: 'RTK',
      0x11: 'UWB',
      0x12: '融合'
    };
    const newPositionParam = {
      TargetingType: targetingTypes[data.type],
      UID: data.uid,
      Angle: data.angle,
      Height: data.height,
      longitude: data.longitude,
      latitude: data.latitude
    };
    positionParams.push(newPositionParam);
    // 超过缓冲区大小限制时移除最旧的位置参数数据
    if (positionParams.length > bufferLimit) {
      positionParams.shift();
    }
    const labelText = `终端ID:${data.uid},定位类型:${targetingTypes[data.type]}\n经度:${data.longitude},纬度:${data.latitude}\n角度:${data.angle},高度:${data.height}`;
    point(positionParams);// 更新实体点位置信息
    if (!labelEntities[data.uid]) {
      // 如果该UID的标签实体不存在，则创建一个新的标签实体
      createLabelEntity(data.uid, data.longitude, data.latitude, labelText);
    } else {
      // 如果该UID的标签实体已存在，则更新标签文字
      updateLabelEntity(data.uid, data.longitude, data.latitude, labelText);
    }
  }

  const onClose = () => {
    window.clearInterval(pingInterval.value); // 清除心跳间隔定时器
    console.log('Websocket连接关闭');
    // webValue();
  };
  const onError = (error) => {
    console.log('Websocket连接错误');
    ws.close();
    window.clearInterval(pingInterval.value); // 清除心跳间隔定时器
    // webValue();
  };
  ws.addEventListener('open', onOpen);
  ws.addEventListener('message', onMessage);
  ws.addEventListener('close', onClose);
  ws.addEventListener('error', onError);
}
// //  文字标签
const labelEntities = {}; // 用于存储不同UID的标签实体
function createLabelEntity(uid, longitude, latitude, labelText) {
  const positionCallback = new Cesium.CallbackProperty(() => {
    return Cesium.Cartesian3.fromDegrees(longitude, latitude, 0.02);
  }, false);
  const pointLabel = new Cesium.Entity({
    label: {
      text: labelText,
      font: '14pt monospace',
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      outlineWidth: 2,
      show: true,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      pixelOffset: new Cesium.Cartesian2(0, -9),
      scaleByDistance: new Cesium.NearFarScalar(300, 1, 1200, 0.4),
      scale: 1,
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.WHITE,
    },
  });
  // 直接将位置回调存储在标签实体对象中
  pointLabel.position = positionCallback;
  viewer.entities.add(pointLabel);
  labelEntities[uid] = pointLabel;
}
function updateLabelEntity(uid, longitude, latitude, labelText) {
  const labelEntity = labelEntities[uid];
  labelEntity.label.text = labelText;
  // 更新标签实体的位置回调
  labelEntity.position = new Cesium.CallbackProperty(() => {
    return Cesium.Cartesian3.fromDegrees(longitude, latitude, 0.02);
  }, false);
}