报表生成工具Stimulsoft Reports.JS如何减少产品脚本的加载时间-Stimulsoft中文网

报表生成工具Stimulsoft Reports.JS如何减少产品脚本的加载时间

发布时间 : 2023-05-11 14:23:33.910|阅读 123 次

概述：JavaScript 报告和仪表板应用程序包含一个在浏览器窗口中运行的组件，主要涉及在网页上加载脚本。在本文中，我们将分享有关如何优化产品脚本加载时间的实用技巧。

Stimulsoft Reports 是一款报告编写器，主要用于在桌面和Web上从头开始创建任何复杂的报告。可以在大多数平台上轻松实现部署，如ASP.NET, WinForms, .NET Core, JavaScript, WPF, Angular, Blazor, PHP, Java等，在你的应用程序中嵌入报告设计器或在线创建报告，支持从云端快速分享你的报告。

Stimulsoft Reports.JS是一个使用JavaScript和HTML5的报表生成平台，它基于JavaScript和HTML5技术设计，包含创建，编辑，构建，查看和导出高复杂性报告所需的一切，无需安装浏览器扩展或框架，便可在任何JavaScript应用程序中使用。

Stimulsoft Reports.JS官方版下载

我们的 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>

在此示例中，我们加载大小为 10 MB 的stimulsoft.reports.js脚本，并输出页数。但是，如此大的脚本会显着影响网页的加载时间。为解决此问题，推荐的解决方案是将大型脚本分成较小的部分，并仅加载必要的部分。例如：

<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 MB；
stimulsoft.reports.chart.js是一个包含在图表中显示数据的函数的脚本。如果您的报表没有提供图表的使用，则不需要加载脚本；
stimulsoft.reports.export.js是一个用于将报告导出为 PDF、MS Word 或 Excel 的脚本。如果您不打算将报表导出为指定格式，则无需添加该脚本；
stimulsoft.reports.import.xlsx.js是一个用于从 MS Excel 导入数据的脚本。因此，如果您使用来自其他类型来源的数据，它将对您没有用处；
stimulsoft.reports.maps.js是用于在报告中构建和显示地图组件的脚本；
stimulsoft.blockly.editor.js是 Blockly 编辑器的特殊脚本。如果您不使用此脚本，代码块本身将继续运行。

使用打包脚本

减少脚本加载时间的另一种选择是使用打包的stimulsoft.*.pack.js文件。这些文件之间的主要区别在于它们是打包的，因此体积更小，下载时间也更短。

加载后，脚本会自行解压，但解压它们可能需要一些时间。换句话说，打包文件的体积会显着降低，从而减少脚本加载网页所需的时间，但解包会花费额外的时间。

换句话说，您可以选择加载哪些脚本。如果网络连接快速可靠，那么最好使用非打包的脚本，在计算能力大的情况下，可以优先考虑打包文件。

异步脚本加载

减少脚本加载时间的另一种解决方案是使用脚本标签的异步属性。在这种情况下，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>

以上便是如何减少 Reports.JS 和 Dashboards.JS 产品脚本的加载时间的全部内容。

如果您有任何问题需了解详情，请联系在线咨询

想要了解Stimulsoft Reports 报价信息的朋友，欢迎咨询慧都官方客服。

加入官方社群 740060302，欢迎相互交流

上一篇：图表控件Stimulsoft 2023.2 带来极致深色主题！一起来看看还有哪些亮点？下一篇：报表控件stimulsoft教程：在报表、仪表板和 PDF 表单自动生成缩略图