Our JavaScript reports and dashboards applications contain a component that runs right in the browser window, which primarily involves loading scripts on a web page. In this article, we will share practical tips on how to optimize the loading time of product scripts.

---

Let's dive right in with an example to get you started:

<title>Loading the Report</title>
<!-- Stimulsoft Reports.JS -->
<script src="/../scripts/stimulsoft.reports.js" type="text/javascript"></script>

<!-- Loading the Report -->
<script type="text/javascript">
    // Create a new report instance
    var report = new Stimulsoft.Report.StiReport();
    // Load report
    report.loadFile("../reports/SimpleList.mrt");
    // Render report
    report.renderAsync(function () {
        document.write("Complete.<br>");
        document.write("Rendered page count: " + report.renderedPages.count);
    });
</script>

In this example, we load the stimulsoft.reports.js script, which has a size of 10 MB, and output the number of pages. However, such a large script can significantly impact the loading time of the web page. To address this, a recommended solution is to break the large script into smaller parts and only load the ones that are necessary. For instance:

<title>Loading the Report</title>
<!-- Stimulsoft Reports.JS -->
<script src="/../scripts/stimulsoft.reports.engine.js" type="text/javascript"></script>
<script src="/../scripts/stimulsoft.reports.chart.js" type="text/javascript"></script>

<!-- Loading the Report -->
<script type="text/javascript">
    // Create a new report instance
    var report = new Stimulsoft.Report.StiReport();
    // Load report
    report.loadFile("../reports/SimpleList.mrt");
    // Render report
    report.renderAsync(function () {
        document.write("Complete.<br>");
        document.write("Rendered page count: " + report.renderedPages.count);
    });
</script>

In this example, we load only the minimum required functionality, which is contained in the stimulsoft.reports.engine file. Additionally, we load stimulsoft.reports.chart, which is responsible for building charts.

What are the scripts for?

• stimulsoft.reports.engine.js - the minimum required file, size - 5.5 MB;


• stimulsoft.reports.chart.js is a script that contains functions to display data in charts. If your report does not provide for the use of charts, the script does not need to be loaded;


• stimulsoft.reports.export.js is a script for exporting a report to PDF, MS Word or Excel. If you do not plan to export the report to the specified formats, it is not necessary to add this script;


• stimulsoft.reports.import.xlsx.js is a script for data import from MS Excel. Accordingly, it will not be useful to you if you use data from other types of sources;


• stimulsoft.reports.maps.js is a script for building and displaying the Maps component in a report;


• stimulsoft.blockly.editor.js is a special script for the Blockly editor. If you don't use this script, the code blocks themselves will continue to function.

Using packed scripts

Another option to reduce script loading time is to use packed stimulsoft.*.pack.js files. The main difference between these files is that they are packed and, accordingly, have less size and take less time to download.

When loaded, the scripts unpack themselves, but it may take time to unpack them. In other words, the volume of packed files will be significantly lower, which reduces the time it takes for scripts to load a web page, but unpacking will take additional time.

In other words, you can choose which scripts to load. If the Internet connection is fast and reliable, then it is better to use non-packaged scripts, and in case of working with large computing power, priority can be given to packed files.

Asynchronous script loading

An alternative solution to reduce script loading time is to use the async attribute of the script tag. Asynchronous loading of JS scripts and their execution in this case takes place in the background, which, in turn, allows you to display the entire web page at once, without waiting for all files and scripts to be fully loaded. An example of asynchronous loading of JS scripts:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Loading Scripts in Part to Minify Project</title>
    <!-- Stimulsoft Reports.JS -->
    <script async src="/../scripts/stimulsoft.reports.engine.js" type="text/javascript"></script>
    <script async src="/../scripts/stimulsoft.reports.chart.js" type="text/javascript"></script>
    <script async src="/../scripts/stimulsoft.reports.export.js" type="text/javascript"></script>
    <script async src="/../scripts/stimulsoft.reports.import.xlsx.js" type="text/javascript"></script>
    <script async src="/../scripts/stimulsoft.reports.maps.js" type="text/javascript"></script>
    <script async src="/../scripts/stimulsoft.blockly.editor.js" type="text/javascript"></script>

	<!-- Loading the Report -->
    <script type="text/javascript">
        function onLoad() {
            // Create a new report instance
            var report = new Stimulsoft.Report.StiReport();
            // Load report
            report.loadFile("../reports/SimpleList.mrt");
            // Render report
            report.renderAsync(function () {
                document.write("Complete.<br>");
                document.write("Rendered page count: " + report.renderedPages.count);
            });
        }
    </script>
</head>
<body onload="onLoad()">
    <div id="content"></div>
</body>
</html>