updateTable method is very slow on Chrome

[AlexiZ]

Hello there, and first of all thank you for this tool, it's working really well ! ... except on Chrome, here is why : Below is the code I'm using to render a spreadsheet, with data coming from a CSV file (121x121 table). This table loads and renders in less than 1 second on Firefox but takes up to 25 seconds with Chrome. Here is the code, minus some keys like "text" of "tableHeight" that does not affect loading time. The method "updateTable" slows Chome : without it, table renders as fast as Firefox. But there is nothing really looking time-consuming in this method even thought I have tried to remove some parts, without really finding anything relevant.

Can you help me understand how to improve performances with Chrome please ?

jspreadsheet(document.getElementById('spreadsheet'), {
  csv: /* some route giving CSV data */,
  csvHeaders: false,
  updateTable: function (el, cell, x, y, source, value, id) {
    if (x < 2 || y=== 0 || y === 1) {
        cell.style.color = 'black';
        cell.classList.add('readonly');
        $(cell).html(value).text();
    }
    if (x < 2) {
        cell.style.textAlign = 'left';
    }
    if (y === 1) {
        cell.style.writingMode = 'vertical-rl';
        cell.style.textAlign = 'center';
    }
    if (y % 2 === 0) {
        cell.style.backgroundColor = '#f4f4f4';
    }
    if (x === y && x > 1) {
        cell.style.backgroundColor = '#717171';
        cell.style.color = '#fff';
    }
  },
});

[hodeware]

Yes, calling style many times can lead to lot of browser recalculating/rendering. You might choose external CSS...

[AlexiZ]

Thank you for your quick answer. I managed to apply your suggestion and it did solve my problem.

For those having the same issue, here are the corrections on the code above :

<script>
  jspreadsheet(document.getElementById('spreadsheet'), {
    csv: /* some route giving CSV data */,
    csvHeaders: false,
    updateTable: function (el, cell, x, y, source, value, id) {
      if (x < 2 || y === 0 || y === 1) {
        cell.classList.add('readonly');
      }
      if (x === y && x > 1) {
        cell.classList.add('diagonal');
      }
    },
  });
</script>

<style>
  .jexcel_content td[data-y="1"] {
    writing-mode: vertical-rl;
    text-align: center;
  }
  .jexcel_content td[data-x="0"], .jexcel_content td[data-x="1"] {
    text-align: left;
  }
  .jexcel_content tr:nth-child(odd) {
    background-color: #f4f4f4;
  }
  .jexcel_content td.diagonal {
    background-color: #717171;
    color: #fff;
  }
  .jexcel_content td[data-y="0"], .jexcel_content td[data-y="1"], .jexcel_content td[data-x="0"], .jexcel_content td[data-x="1"] {
    color: black;
  }
</style>