Запустите веб-сокет в веб-воркере или сервис-воркере - javascript

Поскольку вы используете веб-сокеты, было бы неплохо использовать SharedWorker< /a>, чтобы создать новый поток для ваших веб-сокетов. Разница между обычным WebWorker и SharedWorker заключается в том, что веб-воркер будет создавать новый сеанс на каждой вкладке или в браузере при загрузке страницы, тогда как общий воркер будет использовать один и тот же сеанс на каждой вкладке. Таким образом, все ваши вкладки или окна будут иметь один и тот же рабочий процесс и одно и то же подключение к веб-сокету для работы.

Если данные обновляются очень часто (более 60 раз в секунду) и DOM необходимо обновлять каждый раз, используйте requestAnimationFrame, чтобы регулировать количество обновлений DOM. Он будет ждать следующего цикла перерисовки, прежде чем обновлять DOM новым содержимым, что составляет около 60 раз в секунду или 60 кадров в секунду.

Реализация этого хотела бы пример ниже:

Основная нить.

// Create shared worker.
const webSocketWorker = new SharedWorker('web-sockets-worker.js');

/**
 * Sends a message to the worker and passes that to the Web Socket.
 * @param {any} message 
 */
const sendMessageToSocket = message => {
  webSocketWorker.port.postMessage({ 
    action: 'send', 
    value: message,
  });
};

// Event to listen for incoming data from the worker and update the DOM.
webSocketWorker.port.addEventListener('message', ({ data }) => {
  requestAnimationFrame(() => {
    appendGatePublicTickersData(data);
  });
});
  
// Initialize the port connection.
webSocketWorker.port.start();

// Remove the current worker port from the connected ports list.
// This way your connectedPorts list stays true to the actual connected ports, 
// as they array won't get automatically updated when a port is disconnected.
window.addEventListener('beforeunload', () => {
  webSocketWorker.port.postMessage({ 
    action: 'unload', 
    value: null,
  });

  webSocketWorker.port.close();
});

Веб работник.

/**
 * Array to store all the connected ports in.
 */
const connectedPorts = [];

// Create socket instance.
const socket = new WebSocket("wss://fx-ws.gateio.ws/v4/ws/btc");

// Send initial package on open.
socket.addEventListener('open', () => {
  const package = JSON.stringify({
    "time": 123456,
    "channel": "futures.tickers",
    "event": "subscribe",
    "payload": ["BTC_USD", "ETH_USD"]
  });

  socket.send(package);
});

// Send data from socket to all open tabs.
socket.addEventListener('message', ({ data }) => {
  const package = JSON.parse(data);
  connectedPorts.forEach(port => port.postMessage(package));
});

/**
 * When a new thread is connected to the shared worker,
 * start listening for messages from the new thread.
 */
self.addEventListener('connect', ({ ports }) => {
  const port = ports[0];

  // Add this new port to the list of connected ports.
  connectedPorts.push(port);

  /**
   * Receive data from main thread and determine which
   * actions it should take based on the received data.
   */
  port.addEventListener('message', ({ data }) => {
    const { action, value } = data;

    // Send message to socket.
    if (action === 'send') {
      socket.send(JSON.stringify(value));

    // Remove port from connected ports list.
    } else if (action === 'unload') {
      const index = connectedPorts.indexOf(port);
      connectedPorts.splice(index, 1);
    }
  });

  // Start the port broadcasting.
  port.start();
});

Примечание: ваш appendGatePublicTickersData не использует ключевое слово await, поэтому он не обязательно должен быть функцией async.