原文鏈接:https://blazor-university.com/javascript-interop/javascript-boot-process/
JavaScript 啟動過程
在 Blazor 啟動過程中,瀏覽器將在 Blazor 初始化之前創建 HTML 文檔,這意味著從引導 HTML 引用的任何 JavaScript 都將立即加載,并且在這些 JavaScript 文件中自動執行的任何代碼都將在 Blazor 有機會在初始化之前執行。
源代碼[1]
要觀察這一點,請創建一個新的 Blazor 服務器端應用程序:
編輯 /App.razor
添加以下
OnInitialized
方法。
@code?{protected?override?void?OnInitialized(){System.Diagnostics.Debug.WriteLine("Blazor?initialised:?"?+?DateTime.Now.ToString("mm:ss.fff"));base.OnInitialized();}
}
在 /wwwroot 文件夾下創建一個名為 scripts 的文件夾
在該文件夾中創建一個名為 JavaScriptBootProcess.js 的文件 -添加以下腳本
const?now?=?new?Date();
console.log('JavaScript?initialised:?'?+?now.getMinutes()?+?":"?+?now.getSeconds()?+?"."?+?now.getMilliseconds());
編輯 /Pages/_Host.cshtml
找到文本“ServerPrerendered”并將其更改為“Server”
在頁面底部附近現有的
<script>
標記下方,添加以下標記
<script?src="~/scripts/JavaScriptBootProcess.js"></script>
運行應用程序并查看瀏覽器的控制臺輸出和 Visual Studio 的輸出窗口。比較輸出,我們將看到如下內容:
JavaScript?initialised:?15:20.317
Blazor?initialised:?15:20.466
由于這種行為,JavaScript 不可能立即調用 .NET 方法。使用 JavaScript 互操作時,我建議盡可能從 Blazor 端啟動通信。
ServerPrerendering
如果我們現在編輯同一個項目并將渲染模式更改回 ServerPrerendered
,我們將看到如下內容:
Blazor?initialised:?42:22.559
JavaScript?initialised:?42:22.631
Blazor?initialised:?42:22.690
當用戶第一次訪問我們應用的 URL 時,Blazor 將在瀏覽器之外呈現 App.razor 組件并將生成的 HTML 發送到瀏覽器。之后,初始化 JavaScript,最后初始化 Blazor 以供客戶端交互。
參考資料
[1]
源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/JavaScriptInterop/JavaScriptBootProcess