翻譯|行業(yè)資訊|編輯:周思宇|2023-05-11 14:23:33.910|閱讀 171 次
概述:JavaScript 報(bào)告和儀表板應(yīng)用程序包含一個(gè)在瀏覽器窗口中運(yùn)行的組件,主要涉及在網(wǎng)頁上加載腳本。在本文中,我們將分享有關(guān)如何優(yōu)化產(chǎn)品腳本加載時(shí)間的實(shí)用技巧。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
Stimulsoft Reports 是一款報(bào)告編寫器,主要用于在桌面和Web上從頭開始創(chuàng)建任何復(fù)雜的報(bào)告。可以在大多數(shù)平臺上輕松實(shí)現(xiàn)部署,如ASP.NET, WinForms, .NET Core, JavaScript, WPF, Angular, Blazor, PHP, Java等,在你的應(yīng)用程序中嵌入報(bào)告設(shè)計(jì)器或在線創(chuàng)建報(bào)告,支持從云端快速分享你的報(bào)告。
Stimulsoft Reports.JS是一個(gè)使用JavaScript和HTML5的報(bào)表生成平臺,它基于JavaScript和HTML5技術(shù)設(shè)計(jì),包含創(chuàng)建,編輯,構(gòu)建,查看和導(dǎo)出高復(fù)雜性報(bào)告所需的一切,無需安裝瀏覽器擴(kuò)展或框架,便可在任何JavaScript應(yīng)用程序中使用。
我們的 JavaScript 報(bào)告和儀表板應(yīng)用程序包含一個(gè)在瀏覽器窗口中運(yùn)行的組件,主要涉及在網(wǎng)頁上加載腳本。在本文中,我們將分享有關(guān)如何優(yōu)化產(chǎn)品腳本加載時(shí)間的實(shí)用技巧。
下面將展示一個(gè)示例以幫助您入門:
<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腳本,并輸出頁數(shù)。但是,如此大的腳本會(huì)顯著影響網(wǎng)頁的加載時(shí)間。為解決此問題,推薦的解決方案是將大型腳本分成較小的部分,并僅加載必要的部分。例如:
<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,它負(fù)責(zé)構(gòu)建圖表。
減少腳本加載時(shí)間的另一種選擇是使用打包的stimulsoft.*.pack.js文件。這些文件之間的主要區(qū)別在于它們是打包的,因此體積更小,下載時(shí)間也更短。
加載后,腳本會(huì)自行解壓,但解壓它們可能需要一些時(shí)間。換句話說,打包文件的體積會(huì)顯著降低,從而減少腳本加載網(wǎng)頁所需的時(shí)間,但解包會(huì)花費(fèi)額外的時(shí)間。
換句話說,您可以選擇加載哪些腳本。如果網(wǎng)絡(luò)連接快速可靠,那么最好使用非打包的腳本,在計(jì)算能力大的情況下,可以優(yōu)先考慮打包文件。
減少腳本加載時(shí)間的另一種解決方案是使用腳本標(biāo)簽的異步屬性。在這種情況下,JS 腳本的異步加載及其執(zhí)行在后臺進(jìn)行,這反過來又允許您一次顯示整個(gè)網(wǎng)頁,而無需等待所有文件和腳本完全加載。一個(gè)異步加載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 產(chǎn)品腳本的加載時(shí)間的全部內(nèi)容。
如果您有任何問題需了解詳情,請聯(lián)系
想要了解Stimulsoft Reports 報(bào)價(jià)信息的朋友,歡迎咨詢。
加入官方社群 740060302,歡迎相互交流
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn