Spreadsheet performance

In this section, we will cover some important considerations about spreadsheet performance when dealing with large datasets.

What's new

There are significant changes on Engine 8, which is the base for the new Jspreadsheet Basic and Pro distributions. The lazy loading is deprecated, and as a replacement, there is a smart DOM management that will create and show DOM elements on-demand as the user navigates in the viewport. The viewport would be automatically enabled when the pagination, tableOverflow, or fullscreen properties is used.

Viewport

The following properties will enable your viewport and activate the smart DOM management.

tableOverflow: boolean

It works along with tableWidth and tableHeight properties to define a fixed viewport width and height dimensions.

fullscreen: boolean

It renders as many cells available to fit all available screen space.

pagination: number

It renders as many rows defined by your property and create a page navigation.


Formulas

The formula handler has been decouple from the jspreadsheet and it has been encasulated as a extension. That allow us to optimize and improve how JSS parses the formulas. The results are an amazing performance and more options for the developers.


Example

The following example will create a table from an array with 20 columns x 50000 rows (1 million cells)





Source code

<html>
<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<div id="spreadsheet"></div>

<script>
var data = [];

// Create the data
for (var j = 0; j < 50000; j++) {
    data[j] = [];
    for (var i = 0; i < 20; i++) {
        data[j][i] = jspreadsheet.helpers.getColumnNameFromCoords(i, j);
    }
}

// Initial time before creating the table
var s = Date.now();

// Create the table
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: data,
        tableOverflow: true,
        tableWidth: '800px',
        tableHeight: '300px',
    }],
    onload: function() {
        // Final time 
        var e = Date.now();
        // Update console
        document.getElementById('console').innerText = 'The table has been created in: ' + (e - s) + 'ms';
    },
    license: 'MWEzMTE4MGFkNWY5YzQzNjE4NjZiNmE1NThhM2M0Yjc1NmUyNGM2N2YzZjU2NDQ5ZjM1MGFiYWNmOTFkNTkwODFiYmYwNDE1YjhhM2ViNGUyMzM2YjYzY2Q4NTcyMWE4MGQ4YjVjNjI2NWY4NWYyMTBjMWU5M2ZmNTU4OGI1MDQsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5UZzVOakk0TURBc0ltUnZiV0ZwYmlJNld5SnFjM0J5WldGa2MyaGxaWFF1WTI5dElpd2lZM05pTG1Gd2NDSXNJbXB6YUdWc2JDNXVaWFFpTENKc2IyTmhiR2h2YzNRaVhTd2ljR3hoYmlJNklqSWlMQ0p6WTI5d1pTSTZXeUoyTnlJc0luWTRJaXdpY0dGeWMyVnlJaXdpYzJobFpYUnpJaXdpWm05eWJYTWlMQ0p5Wlc1a1pYSWlMQ0ptYjNKdGRXeGhJbDE5',
    parseFormulas: false,
})
</script>
</html>