Question

我在VueJS项目中使用HightCharts，并且从下面获得了给定的实现。由于项目要求的复杂性，我无法使用highcharts-vue，所以我使用嵌套在Vue组件中的普通JS。

同一时间，每秒运行一个setIntevral方法（用于显示时钟），并且不时运行许多次要的setTimeout方法。

由于JavaScript是在单线程中执行（从本质上来说），所以每次图表加载时我的页面都变得很慢（时钟没有更新，这意味着setInterval甚至没有执行）。

从HighCharts的角度来看，由于项目的要求，我不能使用该选项进行“异步”加载（此选项与HighCharts库严格相关，通常与JavaScript无关）。

因此，基本上，该帖子可以有两个问题：

1）这种添加嵌套在组件中的纯JavaScript的方法是否可以成为这些性能问题的原因？

2）有什么方法可以使来自不同组件的JavaScript代码不被彼此阻塞？

下面给出了加载图表的组件的代码，我想知道这是否违反了VueJS原则，并且是否可能是导致我所面临的性能问题的原因。

<template>
    <div id="chart-container"></div>
</template>

<script>
  import Highcharts from 'highcharts';

  export default {
    function createChart(some_data) {
        //create chartSettings based on the passed variable "some_data"
        let chartSettings = {
            chart: {
                renderTo: this.$el.querySelector('#chart-container'),
                events: {
                    //some chrat related settings
                }
            }
        }
        //here we are also updating data for "some_variable" and "another_variable"
        this.chart = new Highcharts.stockChart(chartSettings);
    }

    function updateCharts() {
        //some calculations where we create new settings for chart
        //here we are also updating data for "some_variable" and "another_variable"
        createChart.call(this, newChartsData);
    }

    data() {
         chart: null,
         some_variable: "one",
         another_variable: "two",
    }
  }
</script>

将VueJS与HighCharts一起使用时的性能问题

0 个答案: