加载HTML内容会导致性能下降（JQuery）

时间：2015-05-09 20:16:20

标签： javascript jquery html

我遇到的问题是我试图将应用程序保持在每秒50帧左右的高性能，但是当我浏览页面（page1.html，page2.html和page3.html）时，应用程序运行速度变慢因为我相信html页面正在后台运行......

我想要实现的是保持单击的HTML文件=显示，同时保持其余部分完全空闲，只有当前页面必须可见。

如何保持应用程序的高性能？我已经尝试过很多JQuery命令，比如remove（），empty（），hide（），但是没有一个能提高性能高达50 fps。我得到的最高速度是25 fps with remove（），但是我不能找回我删除的内容，非常奇怪。

为了更好地了解我遇到的问题，我在下面对其进行了描述：

如果我从if语句中删除$("#page1").load("page1.html");和$("#page2").load("page2.html");，page3.html每秒最多运行50帧（fps），这就是我的目标。 

 $('[data-target]').on('click', function() {
        var target = $(this).attr('data-target');

        if (target == 1) {

        } else if(target == 2){

        } else if(target == 3){ 
            $("#page3").load("page3.html");
        }
    });

但是，如果我添加$("#page1").load("page1.html");和$("#page2").load("page2.html");，那么page3.html每秒最多运行15帧，这非常糟糕，而且正是我想要避免的。 

 $('[data-target]').on('click', function() {
    var target = $(this).attr('data-target');

    if (target == 1) {
        $("#page1").load("page1.html");
    } else if(target == 2){
        $("#page2").load("page2.html");
    } else if(target == 3){ 
        $("#page3").load("page3.html");
    }
});

page1.html： 

<div>
  <script src="js/dashboard/highcharts.js"></script>
  <script src="js/dashboard/highcharts-more.js"></script>
  <script src="js/dashboard/FastCanvas.js"></script>
  <script type="text/javascript" src="js/dashboard/fusioncharts.js"></script>
  <script type="text/javascript" src="js/dashboard/fusioncharts.charts.js"></script>
  <script type="text/javascript" src="js/dashboard/fusioncharts.widgets.js"></script>
  <script type="text/javascript" src="js/dashboard/dashboard.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Squada+One' rel='stylesheet' type='text/css'> 

  <style>        @font-face {           
      font-family: "digital";
      src: url("http://joekuan.org/digital.ttf") format("truetype"); }
  </style>
<div id="container" style="width:315px; height:315px; border-radius: 50%; overflow:hidden; margin-top: 220px; margin-left: 479px; position: absolute; z-index: 2;"></div>
<div id="chart-container1" style="margin-left:264px; margin-top: 315px; position: absolute; z-index: 3;"></div>
<div id="chart-container2" style=" margin-left: 365px; margin-top: 315px; position: absolute; z-index: 4;"></div>
<div id="text-area" style="height: 90px; width: 200px; margin-left: 835px; margin-top: 350px; background-color: #1e1e1e; position: absolute; z-index: 9; "></div>
<div id="map" style="margin-left: 845px; margin-top: 360px; color: #ffffff; font-size: 10px; position: absolute; z-index: 10"> </div>
<p id="time" style=" margin-top: 500px; margin-left: 430px; color: #ffffff; position: absolute; z-index: 5; font-family: 'Helvetica', Sans-Serif; font-weight: bold; font-size: 20px;"></p>
<p id="inside-temp" style=" margin-top: 500px; margin-left: 790px; color: #ffffff; position: absolute; z-index: 6; font-family: 'Helvetica', Sans-Serif; font-weight: bold; font-size: 20px;">22&deg;C</p>
<p id="temp-sign" style=" margin-top: 468px; margin-left: 315px; color: #ffffff; position: absolute; z-index: 6;font-family: 'Helvetica', Sans-Serif;font-weight: bold; font-size: 18px;">&deg;C</p>
<p id="liter" style=" margin-top: 470px; margin-left: 418px; color: #ffffff; position: absolute; z-index: 6;font-family: 'Helvetica', Sans-Serif; font-weight: bold; font-size: 18px;">l</p>

<p style=" margin-top: 320px; margin-left: 435px; color: #ffffff; position: absolute; z-index: 6;font-family: 'Helvetica', Sans-Serif; font-weight: bold; font-size: 11px;">30</p>
<p style=" margin-top: 382px; margin-left: 435px; color: #ffffff; position: absolute; z-index: 6;font-family: 'Helvetica', Sans-Serif; font-weight: bold; font-size: 11px;">15</p>
<p style=" margin-top: 444px; margin-left: 435px; color: #ffffff; position: absolute; z-index: 6;font-family: 'Helvetica', Sans-Serif; font-weight: bold; font-size: 11px;">0</p>

<p style=" margin-top: 320px; margin-left: 334px; color: #ffffff; position: absolute; z-index: 6;font-family: 'Helvetica', Sans-Serif; font-weight: bold; font-size: 11px;">120</p>
<p style=" margin-top: 390px; margin-left: 334px; color: #ffffff; position: absolute; z-index: 6;font-family: 'Helvetica', Sans-Serif; font-weight: bold; font-size: 11px;">90</p>
<p style=" margin-top: 444px; margin-left: 334px; color: #ffffff; position: absolute; z-index: 6;font-family: 'Helvetica', Sans-Serif; font-weight: bold; font-size: 11px;">60</p>

<img src="img/icon-temp.png" style="width:20px;height:20px;margin-left: 258px;margin-top:470px; position: absolute; z-index: 7">
<img src="img/fuel-icon.png" style="width:17px;height:18px;margin-left: 358px;margin-top:470px; position: absolute; z-index: 7">

<script src="js/dashboard/dash.js"></script>
</div>

page3.html 

<script type="text/javascript">
    $("#selectTable").load("ListOfTableSensors.html");
</script>

      <div id="table1"  class="table"></div>
      <div id="table2"  class="table"></div>
      <div id="table3"  class="table"></div>
      <div id="table4"  class="table"></div>
      <div id="table5"  class="table"></div>
      <div id="table6"  class="table"></div>
      <div id="table8"  class="table"></div>
      <div id="table9"  class="table"></div>
      <div id="table10" class="table"></div>
      <div id="table11" class="table"></div>
      <div id="table12" class="table"></div>               
      <div id="selectTable"></div>

JS /仪表板/ dash.js 

FusionCharts.ready(function () {
    var chart = new FusionCharts({
      animation: {
                  duration: 800 //animasjonen på speedometeret
                },
        type: 'cylinder',
        renderAt: 'chart-container1',
        id: 'fluid_temperature_water',
        width: '70',
        height: '180',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "",
                "subcaption": "",
                "subcaptionFontBold": "1",
                "lowerLimit": "60",
                "upperLimit": "120",
                "numberSuffix": "",                
                "bgColor": "#000000",
                "showBorder": "0",
                "thmFillColor": "#993333",
                "BgAlpha": "91.9",
                "showTickMarks":"1",
                "showTickValues":"0",
                "baseFontColor":"FFFFFF"
                //"animation":'0' //fjerne all animasjon for cylinderen
            },
            "value": CTS },
        "events": {
            "rendered" : function (evtObj, argObj){
                var intervalVar = setInterval(function () {
                  FusionCharts.items["fluid_temperature_water"].feedData("&value="+CTS);
                }, 1000);
            }
        }
    })
    .render();
});



FusionCharts.ready(function () {
    var chart = new FusionCharts({
      animation: {
                  duration: 800 //animasjonen på speedometeret
                },
        type: 'cylinder',
        renderAt: 'chart-container2',
        id: 'fuel-cylinder',
        width: '70',
        height: '180',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "",
                "subcaption": "",
                "subcaptionFontBold": "1",
                "lowerLimit": "0",
                "upperLimit": "30",
                "numberSuffix": "",                
                "bgColor": "#000000",
                "showBorder": "0",
                "thmFillColor": "#993333",
                "BgAlpha": "91.9",
                "showTickMarks":"1",
                "showTickValues":"0",
                "baseFontColor":"FFFFFF"
                //"animation":'0' //fjerne all animasjon for cylinderen
            },
            "value": FPS },
        "events": {
            "rendered" : function (evtObj, argObj){
                var intervalVar = setInterval(function () {
                  FusionCharts.items["fuel-cylinder"].feedData("&value="+FPS);
                }, 1000);
            }
        }
    })
    .render();
});


function time_updater(){
  var currentTime = new Date()
  var hours = currentTime.getHours()
  var minutes = currentTime.getMinutes()

  if (minutes < 10)
  minutes = "0" + minutes
  document.getElementById("time").innerHTML = ("<p>" + hours + ":" + minutes + " " + "</p>");
}
    setInterval(time_updater, 1000);

    setInterval(function() {
    $("#map").html("Manifold Absolute Pressure:  " + MAP);
    }, 0);

1 个答案:

答案 0 :(得分：1)

增加dash.js底部的延迟。

setInterval(function() {
    $("#map").html("Manifold Absolute Pressure:  " + MAP);
}, 1000);
相关问题
最新问题