缓慢应用性能
我遇到的问题是，应用程序的性能非常慢，因为我相信它们对于在后台运行的许多图来说是非常缓慢的，换句话说，在index.html内部发生了很多事情。
如何只能在用户正在查看时才能运行一个关系图，并将其余的图表保持在空闲状态直到它们被选中？
我有两个HTML文件和五个JavaScript文件。
- Index.html
- NavigationList.html
- Diagram1.js
- Diagram2.js
- Diagram3.js
- Diagram4.js
- Diagram5.js
这是index.html，这里我已经包含了5个图，它们可以作为ID在<body>中查看。
<!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“单独运行图表，但是这个线程图仍然在后台运行，所以我需要找到一种方法来阻止它们同时运行？
</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个图表中的1.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);
});回答 1
Stack Overflow用户
发布于 2015-05-06 16:50:20
您必须记住，JavaScript中的时间是毫秒而不是秒完成的。
当您调用var updateInterval = 1;时，您告诉它每1毫秒运行一次。
这意味着每1秒你就要求它跑1000次。这可能是瓶颈。
如果这不是你的意图，你可能想尝试一个更大的价值。1秒= 1000毫秒。
尝试将代码更新为var updateInterval = 1000;。
下面是关于JavaScript定时事件的附加资源：timing.asp
https://stackoverflow.com/questions/30082695
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号