Blazor 性能
Blazor performance
我想开始使用 Blazor，尽管它仍处于 alpha 级别。
据我了解，Blazor在客户端使用WebAssembly编译C#
我有这些问题：
这种方法 运行 比在 JavaScript 中编译的 React / Vue.js 更快吗？
浏览器每次加载页面时都需要下载 WebAssembly 库是真的吗？
Internet 上没有对流行的 JavaScript 框架的性能进行任何比较。所以想知道微软新框架的理论性能
Is it true that the browser will need to download the WebAssembly
library every time the page loads?
不，浏览器可以缓存文件。 Common CDNs for Blazor applications 就可以了。
Is this system faster to work than, for example, React / Vue.js, compiled
in JavaScript?
Blazor 使用 WebAssembly，理论上 WebAssembly 应该比任何 JavaScript 库都快。然而，并不是所有的浏览器都有成熟的 WebAssembly 解析器。因此，您可能会发现浏览器目前不会 运行 WebAssembly 以最佳速度运行。
您可以创建一个小型 Blazor 应用程序，并在 Firefox、Chrome 或 Edge 中 运行 它。在大多数情况下，Firefox 运行 的 Blazor 应用程序比 Chrome 或 Edge 快得多，这意味着浏览器制造商仍然需要改进，甚至 Firefox 也可以改进。
如果您的应用程序需要频繁访问 DOM，那么与任何 JavaScript 库相比，WebAssembly / Blazor 肯定会更慢，因为 WebAssembly 无法直接访问 DOM使用调用（目前速度很慢。请参考下面我的 Blazor 基准测试）。
在 Firefox 上，10,000 RegisteredFunction.InvokeUnmarshalle 次调用空方法需要 250 毫秒，而 Chrome 和 Edge 在我的电脑上需要超过 2400 毫秒。在纯 JavaScript 中，同一场景所需的时间低于 10 毫秒。
此外，Blazor 的当前实现有自己的 MSIL engine on top of the browser's WebAssembly engine, which means there are two interpreters working to run a Blazor project, like two translators interpreting a conversation instead on one. Currently Microsoft is working on an AOT 编译器，尚未发布。一旦发布，Blazor 将比当前实现快得多。
Mono and WebAssembly - Updates on Static Compilation
我们可以放心地假设 Web 程序集是 Web 开发的未来，但目前我们不能对 Blazor 的未来发表任何看法。从理论上讲，Blazor 可以比现有的任何框架都快，但是我们需要 WebAssembly 维护者、浏览器开发人员、Microsoft 和社区的承诺才能使理论变得实用。
2018 年 7 月 10 日更新
WebAssembly 存储库中有新提案。
允许 WebAssembly 直接处理 DOM。
Interface types #8
带有 GC 的 WebAssembly 的引用类型。 Reference Types for WebAssembly
以上两个提案将为将来 DOM 和 WebAssembly 之间更快的交互铺平道路。也就是说，Blazor以后会快很多。
2018 年 10 月 17 日更新
Firefox 团队能够像 JavaScript-to-JavaScript 方法调用一样快地完成 JavaScript-to-WebAssembly 调用。截至目前，在 WebAssembly 支持方面，Firefox 远远领先于任何其他浏览器。
As I understand it, Blazor uses WebAssembly to compile C# on the client side.
对了一半。您可以将代码写入 WebAssembly (WASM) 客户端（是的，客户端是 C#），但您也可以在逻辑服务器端执行。两者都有好处。如果你走 WASM 路线，你的所有代码都是可见的。但是它可以比逻辑全部基于服务器的情况更快地重新呈现——但是如果它是基于服务器的，那么您的代码是不可见的。
Does this approach run faster than, for example, React / Vue.js, compiled in JavaScript?
没有。我做了很多 Vue.js 并且 Vue.js 运行得更快。 但是 我可以使用 Blazor 更快地编写代码很多。 Blazor 提供了一种虚拟滚动解决方案，可以使其显示得更快。在我的例子中，可用的绘图组件太慢了。我使用 C# 和 JavaScript 编写了一个运行良好的 Blazor 组件。大多数时候我不担心 WASM 代码 运行 太慢......但是绘图需要更快......Blazor 让我吃蛋糕......我只需要做一些JavaScript 的低水平工作。 Blazor 的执行速度在过去六个月中变得更快，该团队表示 .NET 6 出来后会有更多。但对于我需要做的 99% 的事情来说，它已经足够快了。
Is it true that the browser will need to download the WebAssembly library every time the page loads?
如果它们被缓存，则不会。即使是第一次加载，如果连接良好，速度也不会慢。它大约为 10 MB。
伟大的未问问题 -- 值得使用吗？我已经使用它大约六个月了。
对我来说这很棒。 C# 是一种非常好的语言。有时我错过了动态添加 属性 并且通常您必须手动启动重绘，但是具有可空对象检查等功能会警告您您没有检查您的代码是否会导致空引用检查 - 它很多优于 JavaScript。我经常觉得使用 JavaScript“工具链”很痛苦。能够选择退出 JavaScript.
的图书馆颠簸真是太好了
2021 年 4 月，我们针对遗留 Angular.js 网络应用程序以及 Flutter Web（HTML 和 CanvasKit 渲染器）对 Blazor WASM 进行了试验。我们重新创建了旧版应用程序的主页（它本质上是一个具有过滤器、分页、排序等功能的大数据网格）。这里有一些要点：
Lighthouse perf. Scores
Grid Displ. Data transf. Data uncomp. Reqs. FCP SI LCP TTI TBT CLS
Blazor* 2.2s 4.7MB 13.7MB 99 0.5s 1.6s 0.5s 2.1s 1.3s 0.01
Flutter HTML 1.7s 2.1MB 3.7MB 15 1.9s 2.5s 2.2s 2.3 0.2s 0
Flutter CanvasKit^ 2.8s 4.7MB 10.5MB 17 1.0s 2.2s -/- 2.2s 1s 0
AngularJS` 1.9s 2.0MB 5.7MB 294 2.1s 2.2s 2.6s 2.6s 0.1s 0
- 网格显示- 完全显示网格所需的时间（根据 Lighthouse 收集的时间线和屏幕截图判断）
- 数据传输。 - 加载应用程序时传输的数据（DevTools 中的网络选项卡，缓存已清除）
- 数据未压缩。 - 传输数据的未压缩大小（网络选项卡）
- 要求。 - 加载应用程序时发出的请求数（网络选项卡，清除缓存）
- Lighthouse 性能得分细分
- 在 Windows 10、Google Chrome 版本 89.0.4389.128（官方构建，64 位）、Intel Core i5 4460、16GB RAM、有线 LAN 连接上测试
- 发布用于构建应用程序的配置，Blazor WASM/.NET 5，Flutter（测试版，2.1.0-12。2.pre），AngularJS 1.7.7
*Lighthouse 给出了错误的 LCP 值（它将 Blazor 的空白 'Loading...' 页面计为 LCP）
^Flutter 的 CanvasKit 渲染器不允许 Lighthouse 获取 LCP 测量
`遗留应用比创建的 PoC 大得多，有更多的屏幕和资产会影响应用启动时的请求数量
.NET 6 的 ASP.NET 核心路线图可在 github here 上找到。您会发现 Blazor 的任务最多。
请注意，该列表指出了 ASP.NET 团队将重点关注的项目，这意味着他们将重点放在改进 Blazor 上。
This issue represents the list of major investments our team will focus on during .NET 6 timeframe.
The items on this list are only major areas of investments, and do not include all the features and bugfixes we will be tackling during this time.
以下是他们一直在处理的一些任务：
完成的任务：
AOT 编译。 将所有内容编译成 WebAssembly
改进 Blazor 中的 SVG 支持。 Blazor 中 SVG 支持的顶级问题
在 JS Interop 中支持字节数组传输。
正在进行的任务
Blazor 的热重载。 构建性能优化
暂停和恢复 Blazor 应用程序。
定位并部署到桌面平台。
删除 SignalR 消息大小施加的大小限制。
拖放。 提供用户在拖动过程中可以订阅的事件
并放下
我想开始使用 Blazor，尽管它仍处于 alpha 级别。
据我了解，Blazor在客户端使用WebAssembly编译C#
我有这些问题：
这种方法 运行 比在 JavaScript 中编译的 React / Vue.js 更快吗？
浏览器每次加载页面时都需要下载 WebAssembly 库是真的吗？
Internet 上没有对流行的 JavaScript 框架的性能进行任何比较。所以想知道微软新框架的理论性能
Is it true that the browser will need to download the WebAssembly library every time the page loads?
不，浏览器可以缓存文件。 Common CDNs for Blazor applications 就可以了。
Is this system faster to work than, for example, React / Vue.js, compiled in JavaScript?
Blazor 使用 WebAssembly，理论上 WebAssembly 应该比任何 JavaScript 库都快。然而，并不是所有的浏览器都有成熟的 WebAssembly 解析器。因此，您可能会发现浏览器目前不会 运行 WebAssembly 以最佳速度运行。
您可以创建一个小型 Blazor 应用程序，并在 Firefox、Chrome 或 Edge 中 运行 它。在大多数情况下，Firefox 运行 的 Blazor 应用程序比 Chrome 或 Edge 快得多，这意味着浏览器制造商仍然需要改进，甚至 Firefox 也可以改进。
如果您的应用程序需要频繁访问 DOM，那么与任何 JavaScript 库相比，WebAssembly / Blazor 肯定会更慢，因为 WebAssembly 无法直接访问 DOM使用调用（目前速度很慢。请参考下面我的 Blazor 基准测试）。
在 Firefox 上，10,000 RegisteredFunction.InvokeUnmarshalle 次调用空方法需要 250 毫秒，而 Chrome 和 Edge 在我的电脑上需要超过 2400 毫秒。在纯 JavaScript 中，同一场景所需的时间低于 10 毫秒。
此外，Blazor 的当前实现有自己的 MSIL engine on top of the browser's WebAssembly engine, which means there are two interpreters working to run a Blazor project, like two translators interpreting a conversation instead on one. Currently Microsoft is working on an AOT 编译器，尚未发布。一旦发布，Blazor 将比当前实现快得多。
Mono and WebAssembly - Updates on Static Compilation
我们可以放心地假设 Web 程序集是 Web 开发的未来，但目前我们不能对 Blazor 的未来发表任何看法。从理论上讲，Blazor 可以比现有的任何框架都快，但是我们需要 WebAssembly 维护者、浏览器开发人员、Microsoft 和社区的承诺才能使理论变得实用。
2018 年 7 月 10 日更新
WebAssembly 存储库中有新提案。
允许 WebAssembly 直接处理 DOM。 Interface types #8
带有 GC 的 WebAssembly 的引用类型。 Reference Types for WebAssembly
以上两个提案将为将来 DOM 和 WebAssembly 之间更快的交互铺平道路。也就是说，Blazor以后会快很多。
2018 年 10 月 17 日更新
Firefox 团队能够像 JavaScript-to-JavaScript 方法调用一样快地完成 JavaScript-to-WebAssembly 调用。截至目前，在 WebAssembly 支持方面，Firefox 远远领先于任何其他浏览器。
As I understand it, Blazor uses WebAssembly to compile C# on the client side.
对了一半。您可以将代码写入 WebAssembly (WASM) 客户端（是的，客户端是 C#），但您也可以在逻辑服务器端执行。两者都有好处。如果你走 WASM 路线，你的所有代码都是可见的。但是它可以比逻辑全部基于服务器的情况更快地重新呈现——但是如果它是基于服务器的，那么您的代码是不可见的。
Does this approach run faster than, for example, React / Vue.js, compiled in JavaScript?
没有。我做了很多 Vue.js 并且 Vue.js 运行得更快。 但是 我可以使用 Blazor 更快地编写代码很多。 Blazor 提供了一种虚拟滚动解决方案，可以使其显示得更快。在我的例子中，可用的绘图组件太慢了。我使用 C# 和 JavaScript 编写了一个运行良好的 Blazor 组件。大多数时候我不担心 WASM 代码 运行 太慢......但是绘图需要更快......Blazor 让我吃蛋糕......我只需要做一些JavaScript 的低水平工作。 Blazor 的执行速度在过去六个月中变得更快，该团队表示 .NET 6 出来后会有更多。但对于我需要做的 99% 的事情来说，它已经足够快了。
Is it true that the browser will need to download the WebAssembly library every time the page loads?
如果它们被缓存，则不会。即使是第一次加载，如果连接良好，速度也不会慢。它大约为 10 MB。
伟大的未问问题 -- 值得使用吗？我已经使用它大约六个月了。
对我来说这很棒。 C# 是一种非常好的语言。有时我错过了动态添加 属性 并且通常您必须手动启动重绘，但是具有可空对象检查等功能会警告您您没有检查您的代码是否会导致空引用检查 - 它很多优于 JavaScript。我经常觉得使用 JavaScript“工具链”很痛苦。能够选择退出 JavaScript.
的图书馆颠簸真是太好了2021 年 4 月，我们针对遗留 Angular.js 网络应用程序以及 Flutter Web（HTML 和 CanvasKit 渲染器）对 Blazor WASM 进行了试验。我们重新创建了旧版应用程序的主页（它本质上是一个具有过滤器、分页、排序等功能的大数据网格）。这里有一些要点：
Lighthouse perf. Scores
Grid Displ. Data transf. Data uncomp. Reqs. FCP SI LCP TTI TBT CLS
Blazor* 2.2s 4.7MB 13.7MB 99 0.5s 1.6s 0.5s 2.1s 1.3s 0.01
Flutter HTML 1.7s 2.1MB 3.7MB 15 1.9s 2.5s 2.2s 2.3 0.2s 0
Flutter CanvasKit^ 2.8s 4.7MB 10.5MB 17 1.0s 2.2s -/- 2.2s 1s 0
AngularJS` 1.9s 2.0MB 5.7MB 294 2.1s 2.2s 2.6s 2.6s 0.1s 0
- 网格显示- 完全显示网格所需的时间（根据 Lighthouse 收集的时间线和屏幕截图判断）
- 数据传输。 - 加载应用程序时传输的数据（DevTools 中的网络选项卡，缓存已清除）
- 数据未压缩。 - 传输数据的未压缩大小（网络选项卡）
- 要求。 - 加载应用程序时发出的请求数（网络选项卡，清除缓存）
- Lighthouse 性能得分细分
- 在 Windows 10、Google Chrome 版本 89.0.4389.128（官方构建，64 位）、Intel Core i5 4460、16GB RAM、有线 LAN 连接上测试
- 发布用于构建应用程序的配置，Blazor WASM/.NET 5，Flutter（测试版，2.1.0-12。2.pre），AngularJS 1.7.7
*Lighthouse 给出了错误的 LCP 值（它将 Blazor 的空白 'Loading...' 页面计为 LCP）
^Flutter 的 CanvasKit 渲染器不允许 Lighthouse 获取 LCP 测量
`遗留应用比创建的 PoC 大得多，有更多的屏幕和资产会影响应用启动时的请求数量
.NET 6 的 ASP.NET 核心路线图可在 github here 上找到。您会发现 Blazor 的任务最多。
请注意，该列表指出了 ASP.NET 团队将重点关注的项目，这意味着他们将重点放在改进 Blazor 上。
This issue represents the list of major investments our team will focus on during .NET 6 timeframe. The items on this list are only major areas of investments, and do not include all the features and bugfixes we will be tackling during this time.
以下是他们一直在处理的一些任务：
完成的任务：
AOT 编译。 将所有内容编译成 WebAssembly
改进 Blazor 中的 SVG 支持。 Blazor 中 SVG 支持的顶级问题
在 JS Interop 中支持字节数组传输。
正在进行的任务
Blazor 的热重载。 构建性能优化
暂停和恢复 Blazor 应用程序。
定位并部署到桌面平台。
删除 SignalR 消息大小施加的大小限制。
拖放。 提供用户在拖动过程中可以订阅的事件 并放下