翻譯|行業資訊|編輯:周思宇|2023-05-11 14:23:33.910|閱讀 171 次
概述:JavaScript 報告和儀表板應用程序包含一個在瀏覽器窗口中運行的組件,主要涉及在網頁上加載腳本。在本文中,我們將分享有關如何優化產品腳本加載時間的實用技巧。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
Stimulsoft Reports 是一款報告編寫器,主要用于在桌面和Web上從頭開始創建任何復雜的報告。可以在大多數平臺上輕松實現部署,如ASP.NET, WinForms, .NET Core, JavaScript, WPF, Angular, Blazor, PHP, Java等,在你的應用程序中嵌入報告設計器或在線創建報告,支持從云端快速分享你的報告。
Stimulsoft Reports.JS是一個使用JavaScript和HTML5的報表生成平臺,它基于JavaScript和HTML5技術設計,包含創建,編輯,構建,查看和導出高復雜性報告所需的一切,無需安裝瀏覽器擴展或框架,便可在任何JavaScript應用程序中使用。
我們的 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.*.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,歡迎相互交流
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn