Question

我遇到的问题是应用程序性能非常慢，因为我相信它们是在后台运行的许多图表，换句话说，在index.html内部会有很多。

如何才能让一个图表仅在用户查看时运行，并将其余图表保持空闲状态直到被选中？

我有两个HTML文件和五个JavaScript文件。

Index.html
NavigationList.html
Diagram1.js
Diagram2.js
Diagram3.js
Diagram4.js
Diagram5.js

这是index.html，在这里我已经包含了5个可在<body>内查看的图表作为ID。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">    
    <script src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="canvasjs-1.6.2/canvasjs.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <!--Import diagrams-->
    <script src="diagram1.js"></script>
    <script src="diagram2.js"></script>
    <script src="diagram3.js"></script>
    <script src="diagram4.js"></script>
    <script src="diagram5.js"></script>

    <script> 
        $(function(){
        $("#selectTable").load("NavigationList.html"); // Navigation list for diagrams  
        }); 
    </script> 

</head>
<body>
      <div id="toolbar"></div>
      <div id="diagram1"  class="table"></div>
      <div id="diagram2"  class="table"></div>
      <div id="diagram3"  class="table"></div>
      <div id="diagram4"  class="table"></div>
      <div id="diagram5"  class="table"></div>             
      <div id="NavigationList"></div>
</body>
</html>

这是NavigationList.html，它由两部分组成。第一部分是负责显示用户列表的html内容。第二部分是处理点击事件的JQuery。我很怀疑，并且相信可能问题可能出在JQuery代码中，因为它只能通过“display：none / block”单独运行图表，但这个stidiagrams仍然在后台运行，所以我需要找到一种方法来停止他们同时跑步？

</div>
    <ul class="list-group">
        <!--Set this inside a div to individuelly choose-->
        <div id='list_row1' data-row="1"><li class="list-group-item">Exhaust Temperature</li></div>
        <div id='list_row2' data-row="2"><li class="list-group-item">Cylinder Pressure</li></div>
        <div id='list_row3' data-row="3"><li class="list-group-item">Mass Air Flow</li></div>
        <div id='list_row4' data-row="4"><li class="list-group-item">Flywheel</li></div>
        <div id='list_row5' data-row="5"><li class="list-group-item">Lambda</li></div>
        <div id='list_row6' data-row="6"><li class="list-group-item">Knock</li></div>
        <!--<div id='list_row7' data-row="7"><li class="list-group-item">Camshaft position</li></div>-->
        <div id='list_row8' data-row="8"><li class="list-group-item">Fluid Temperature</li></div>
        <div id='list_row9' data-row="9"><li class="list-group-item">Fluid Pressure</li></div>
        <div id='list_row10' data-row="10"><li class="list-group-item">Throttle Position</li></div>
        <div id='list_row11' data-row="11"><li class="list-group-item">Manifold Absolute Pressure</li></div>
        <div id='list_row12' data-row="12"><li class="list-group-item">Flex Fuel</li></div>
    </ul>
</div>

<script>
  $(function(){
    $('[data-row]').on('click', function() {
        var row = $(this).attr('data-row');
         $('.active').removeClass('active');
         $('#table' + row).addClass('active');          
    });             
 });
</script>

这是其他5个图中的diagram1.js。该文件包含在index.html中。这里的代码负责显示带有一些随机生成数据的图表。但是如果index.html中包含5个图表，则会降低性能。

$(window).on("load", function() {
        var dps = []; 
        var chart = new CanvasJS.Chart("diagram1",
        { 
        data: [
          {        
            type: "spline",
            dataPoints: dps
          }]

        });
        var xVal = 0;
        var yVal = 100; 
        var updateInterval = 1; 
        var dataLength = 50; 

        var updateChart = function (count) {
            count = count || 1;
            // count is number of times loop runs to generate random dataPoints.

            for (var j = 0; j < count; j++) {
                yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
                dps.push({
                    x: xVal,
                    y: yVal       
                });
                xVal++;
            }; 
            if (dps.length > dataLength )
            {
                dps.shift();             
            }
            chart.render();     
        };

        // generates first set of dataPoints
        updateChart(dataLength); 

        // update chart after specified time. 
        setInterval(function(){updateChart()}, updateInterval); 
});

Answer 1

你必须记住JavaScript中的时间是以毫秒而不是秒来完成的。

当你致电var updateInterval = 1;时，你告诉它每1毫秒运行一次。

这意味着您每1秒钟要求它运行1,000次。这可能是瓶颈。

如果这不是你的意图，你可能想尝试更大的价值。 1秒= 1000毫秒。

尝试将代码更新为var updateInterval = 1000;。

以下是有关JavaScript时间事件的其他资源：http://www.w3schools.com/js/js_timing.asp

应用程序性能低下

1 个答案: