Unsere JavaScript-Anwendungen für Erstellen von Berichten und Dashboards haben eine Komponente, die direkt im Browser-Fenster funktioniert. Das bedeutet, dass die Skripte auf der Web-Seite geladen werden.

---

Heute geben wir euch einige Tipps über Optimierung der Ladezeit von Skripten der Softwares und am Anfang bieten wir ein Beispiel:

<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 diesem Beispiel wird der Skript stimulsoft.reports.js geladen, und die Anzahl von Seiten wird ausgegeben. Die Größe angegebenes Skripts beträgt 10 MB, darum kann nicht die volle Seite schnell geladen werden. Passende Lösung in diesem Fall – ein großes Skript in einige Teile zu zerbrechen und nur erforderliche Teile zu laden. Zum Beispiel:

<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 diesem Beispiel laden wir nur erforderliche Funktionalität, die sich in der Date stimulsoft.reports.engine befindet, und zusätzlich stimulsoft.reports.chart, die für Erstellen von Diagrammen verantwortlich ist.

Bedeutung der Skripte

• stimulsoft.reports.engine.js - minimale erforderliche Datei, die Größe – 5.5 MB;


• stimulsoft.reports.chart.js ist das Skript, das die Funktionen für die Anzeige von Daten in Diagrammen enthält. Wenn Sie in Ihrem Bericht keine Diagramme verwenden, laden Sie dieses Skript nicht;


• stimulsoft.reports.export.js ist das Skript für Export vom Bericht in PDF, MS Word oder Excel. Hier ist dieselbe Situation wie oben – wenn Sie den Bericht in angegebene Formate nicht exportieren werden, fügen Sie dieses Skript nicht hinzu;


• stimulsoft.reports.import.xlsx.js – ein Skript für Import von Daten aus MS Excel. Dementsprechend, brauchen Sie dieses Skript nicht, wenn Sie die Daten aus anderen Datenquellen verwenden;


• stimulsoft.reports.maps.js ist das erforderliche Skript für Rendern und Anzeige der Komponenten Karten (Maps) im Bericht;


• stimulsoft.blockly.editor.js das spezielle Skript für die Arbeit vom Blockly-Editor. Wenn Sie dieses Skript nicht verwenden, werden die Code-Blöcke funktionieren.

Verwendung von verpackten Skripten

Noch eine Möglichkeit, die Ladezeit von Skripten zu reduzieren, ist die Verwendung von verpackten Dateien stimulsoft.*.pack.js. Der wichtigste Unterschied dieser Dateien besteht darin, dass sie verpackt sind, entsprechend, haben wenige Größe und fordern wenige Zeit für Laden.

Beim Laden werden die Skripte selbständig entpackt werden, aber man braucht die Zeit für Entpacken. Als Ergebnis, die Größe von verpackten Dateien ist wesentlich weniger, was die Ladezeit der Skripte auf Webseite reduziert, aber das Entpacken fordert auch zusätzliche Zeit.

Anders gesagt, Sie können selbst auswählen, welche Skripte zu laden. Wenn Ihre Internet-Verbindung schnell und zuverlässig ist, empfehlen wir unverpackte Skripte zu verwenden, aber im Falle von Arbeit mit großen Rechenleistungen ist es besser, verpackte Dateien zu verwenden.

Asynchrones Laden von Skripten

Alternative Lösung für Reduzieren der Ladezeit von Skripten ist die Verwendung vom Attribut async des Tags script. Asynchrones Laden von JS-Skripten und ihre Ausführung werden in diesem Fall im Hintergrund verwirklicht, was erlaubt die ganze Webseite sofort anzuzeigen, ohne Laden von allen Dateien und Skripte zu erwarten. Ein Beispiel vom asynchronen Laden von JS-Skripten:

<!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>