Наши JavaScript-приложения для создания отчетов и дашбордов содержат компонент, который работает прямо в окне браузера, а это, в первую очередь, подразумевает загрузку скриптов на веб-странице. Сегодня мы дадим несколько практических советов по уменьшению времени загрузки скриптов продуктов.

---

И сразу начнём с примера:

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

В данном примере загружается скрипт stimulsoft.reports.js и выводится количество страниц. Размер указанного скрипта составляет 10 МБ, что не позволит быстро загрузить всю веб-страницу. Логичное решение в данном случае – разбить большой скрипт на мелкие части, и загружать только нужные. Например:

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

В данном примере мы загружаем минимально необходимый функционал, который содержится в файле stimulsoft.reports.engine и дополнительно stimulsoft.reports.chart, который отвечает за построение графиков.

Значение скриптов

• stimulsoft.reports.engine.js - минимально необходимый файл, объём – 5,5 МБ;


• stimulsoft.reports.chart.js скрипт, который содержит функции для отображения данных в диаграммах. Если в вашем отчете использование диаграмм не предусмотрено, скрипт можно не загружать;


• stimulsoft.reports.export.js скрипт для экспорта отчета в PDF, MS Word или Excel. Здесь ситуация та же – если вы не планируете экспортировать отчет в указанные форматы, необязательно добавлять этот скрипт;


• stimulsoft.reports.import.xlsx.js скрипт для импорта данных из MS Excel. Соответственно, он вам не пригодится, если вы используете данные из других типов источников;


• stimulsoft.reports.maps.js необходимый скрипт для построения и отображения компонента Карты (Maps) в отчете;


• stimulsoft.blockly.editor.js специальный скрипт для работы редактора Blockly. Если вы не будете использовать этот скрипт, сами блоки кода продолжат функционировать.

Использование упакованных скриптов

Ещё один вариант уменьшения времени загрузки скриптов – использование упакованных файлов stimulsoft.*.pack.js. Основное отличие этих файлов – они упакованы и, соответственно, имеют меньший размер и требуют меньше времени для загрузки.

При загрузке скрипты распаковываются сами, однако может потребоваться время на их распаковку. То есть, объем упакованных файлов будет существенно ниже, что сокращает время загрузки скриптов веб-страницей, но распаковка займет дополнительное время.

Иначе говоря, вы сами можете выбирать, какие скрипты загружать. Если соединение с интернетом быстрое и надёжное, то лучше использовать не упакованные скрипты, а в случае работы с большими вычислительными мощностями приоритет может быть отдан упакованным файлам.

Асинхронная загрузка скриптов

Альтернативным решением сокращения времени загрузки скриптов является использование атрибута async тега script. Асинхронная загрузка JS-скриптов и их выполнение в данном случае происходит в фоновом режиме, что, в свою очередь, позволяет сразу отобразить всю веб-страницу, не ожидая полной загрузки всех файлов и скриптов. Пример асинхронной загрузки JS-скриптов:

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