javascript - 如何防止我的 javascript 锁定浏览器？

Question

我有一个 WebSocket 以大约 50hz 的速率接收数据。每次将更新推送到浏览器时，它会将已发布的 JSON 数据转换为一些漂亮的图表。

$(document).ready(function() {
    console.log('Connecting web socket for status publishing')
    allRawDataPublisher = new ReconnectingWebSocket("ws://" + location.host + '/raw/allrawdata');

    var rawUnprocessedData = [];

    for (i = 0; i < 256; i++)
    {
        rawUnprocessedData.push({x:i, y:0});
    }

    var unprocessedRawChart = new CanvasJS.Chart("rawUnprocessedData",{
        title :{ text: "Raw Unprocessed Data"},
        axisX: { title: "Bin"},
        axisY: { title: "SNR"},
        data: [{ type: "line", dataPoints : rawUnprocessedData},{ type: "line", dataPoints : noiseFloorData}]
    });

    var updateChart = function (dps, newData, chart) {
        for (i = 0; i < 256; i++)
        {
          dps[i].y = newData[i];
        }
        chart.render();
    };

    allRawDataPublisher.onmessage = function (message) {
        jsonPayload = JSON.parse(message.data);
        var dataElements = jsonPayload["Raw Data Packet"]
        updateChart(rawUnprocessedData, dataElements["RAW_DATA"].Val, unprocessedRawChart)
    };

    unprocessedRawChart.render();
});

这在我的笔记本电脑插入电源 socket 时效果很好，但如果我拔掉电源，我的笔记本电脑的处理能力就会下降(同样的问题也会出现在低规范的平板电脑、手机等上)。当可用处理能力较低时，浏览器 (Chrome) 会完全锁定。

我猜 javascript 接收更新的速度快于浏览器渲染它们的速度，因此锁定了标签页。

如果浏览器无法以请求的速率更新，我希望它丢弃新数据，直到它准备好呈现新的更新。是否有一种标准方法来检查浏览器是否有足够的时间来呈现更新并丢弃新帧(如果不是这种情况)？

*[编辑]

我对 Chrome 的分析器进行了一些挖掘，确认(正如预期的那样)它正在重新绘制占用大量处理能力的图表。

Answer 1

您可以使用 window.requestAnimationFrame 在帧之间工作。

传递给此函数的回调将以每秒最多 60 次的方式调用 - 或与显示器的刷新率相匹配的次数。

它也保证在下一次重绘之前和上一次重绘完成之后被调用。

来自 MDN window.requestAnimationFrame()

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.

这是一个如何使用它的例子:

function renderChart () {
   // pull data from your array and do rendering here
   console.log('rendering...')
   requestAnimationFrame(renderChart)
}

requestAnimationFrame(renderChart)

---

但是，最好分批 呈现对图形的更改，而不是对通过或在每一帧上出现的每个数据进行渲染工作。

这是一个 Fiddle使用 Chart.js代码:

• 每 100 毫秒(10 赫兹)将数据推送到一个数组
• 每 1000 毫秒 (1 Hz) 以 4 个为一组呈现数据

---

const values = []
const ctx = document.getElementById('chartContainer').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['start'],
    datasets: [{
      label: 'mm of rain',
      data: [1],
      borderWidth: 1
    }]
  }
});

// Push 1 item every 100ms (10 Hz), simulates 
// your data coming through at a faster
// rate than you can render
setInterval(() => {
  values.push(Math.random())
}, 100)

// Pull last 4 items every 1 second (1 Hz)
setInterval(() => {
  // splice last 4 items, add them to the chart's data
  values.splice(values.length - 4, 4)
    .forEach((value, index) => {
      chart.data.labels.push(index)
      chart.data.datasets[0].data.push(value)
    })

  // finally, command the chart to update once!
  chart.update()
}, 1000)

请注意，上述概念需要适本地处理异常，否则 values Array 将开始积累如此多的数据，以至于进程耗尽内存。

您还必须小心渲染批处理的方式。如果您的值渲染速率低于填充 values Array 的速率，您最终会遇到内存问题。

最后但同样重要的是:我真的不相信您需要以超过 2 Hz 的速度更新数据，因为我怀疑人脑能否以如此快的速度做出有用的解释。