Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Blazor WebAssembly HostedのアプリにMessagePackを使ってみる

tomokusaba
January 27, 2023

Blazor WebAssembly HostedのアプリにMessagePackを使ってみる

Blazor WebAssembly HostedのアプリにMessagePackを使ってみる
.NETラボ 勉強会 2023年1月

tomokusaba

January 27, 2023
Tweet

More Decks by tomokusaba

Other Decks in Programming

Transcript

  1. Blazor WebAssembly
    Hostedのアプリに
    MessagePackを使ってみる
    株式会社SAKURUG
    エンジニアリングユニット
    草場 友光
    .NETラボ 2023年1月

    View full-size slide

  2. 自己紹介
    • 普段は主にWebFormsアプリの保守の
    お仕事をしてます。
    • 古めのシステムが多いので時代に取り
    残されぬよう新しい技術を一つでも入
    れるよう日々努力しています。
    • 2022/08-2023 Microsoft MVP
    (Developer Technologies)
    • tomo_kusaba

    View full-size slide

  3. 宣伝
    【VISION】ひとの可能性を開花させる企業であり続ける
    VISIONに共感できる仲間募集中。

    View full-size slide

  4. 注意
    • 個人の見解・解釈が多分に入っています。
    • 見解の相違・事実誤認などありましたらご指摘ください。
    • #dotnetlabでtweetすると右側に表示されます

    View full-size slide

  5. 今日の目的
    • 通常、WebAPIのシリアライザとしてはJSONシリアライザが
    使用されている。Webアプリケーションにおいてはパフォーマ
    ンスにおけるウェイトはデータベースやネットワークに比べシ
    リアライザーは少ないと考えられる。
    • しかしながら、パフォーマンスチューニングは一般的に難しい
    • そこで、手軽なパフォーマンスアップの方法としてJSONシリ
    アライザーをバイナリシリアライザであるMessagePack for
    C#に置き換えることでどれだけパフォーマンスアップできる
    か検証してみた

    View full-size slide

  6. MessagePack for C#とは
    • C#用の超高速バイナリシリアライザ
    • .NET Standard2.0以上がターゲットで.NET Core 2.1以上向
    けの最適化がされている
    • 河合さん(@neuecc)/Microsoft MVP for Developer
    Techologiesにより開発
    • Visual Studio 2022の内部通信
    • SignalRのMessagePack Hub
    • Blazor Serverプロトコル

    View full-size slide

  7. MessagePack for C#とは

    View full-size slide

  8. MemoryPackとは
    • 河合さんによる最新の超高速バイナリシリアライザ
    • .NET 7及びC#11に最適化

    View full-size slide

  9. 何で速いのか??
    • この辺を読んでください
    • →https://neue.cc/2022/12/08_MemoryPackSessionInDo
    tNetConfRecapTokyo.html

    View full-size slide

  10. 通常のBlazor WebAssembly+WebAPI
    サーバー
    クライアント(ブラウザ)
    GET
    JSON
    (テキスト)

    View full-size slide

  11. メリット・デメリット
    • メリット
    • OpenAPIのエコシステムを享受できる(Swaggerなど)
    • データのやりとりがテキストなので人間にも読める
    • デメリット
    • テキストへのシリアライズのコストが高い

    View full-size slide

  12. 検証
    • まずは、「WeatherForcast」のデモをMessagePackでシリ
    アライズ/デシリアライズして正常に画面表示できるかどうか
    を検証する
    • MessagePackでのパフォーマンスを最大限に引き出すことが
    目的ではなく、いかに簡単にJSONシリアライザから
    MessagePackに置き換えるかを主眼に置いていることに留意
    していただきたい。

    View full-size slide

  13. 検証ーController
    • Controllerは以下のように変更
    • 戻り値の型を「IActionResult」
    • JSONシリアラズされないようFileとして返す

    View full-size slide

  14. 検証ーShared
    • MessagePackObject属性をつける

    View full-size slide

  15. 検証ーClient
    • MessagePackでデシリアライズ

    View full-size slide

  16. 結果
    • Weather forcastの表示ができました

    View full-size slide

  17. サンプルの動作検証
    • Edgeの開発者ツールで内容確認したところバイナリデータで
    通信していると確認できます。

    View full-size slide

  18. 通常のWebアプリでは・・・
    • データベースとネットワークの時間が無視できない。
    • データベースとネットワークの時間の揺らぎが大きくそのまま
    ではシリアライズ・デシリアライズの差が出てくることが難し
    いのではと予想
    • .NETはJITであるため初回と2回目以降の速度に大きく差が出
    ると想定

    View full-size slide

  19. 今回の計測環境
    • データベースの読み取りの揺らぎ対策
    • サーバ内に結果をキャッシュし2回目以降は実データベースへ読みに
    行かないようにする。
    • 計測専用アプリであるので常に同じ結果を返す
    • ネットワークの揺らぎ対策
    • Webアプリケーションサーバで実行する
    • JITによる揺らぎ対策
    • 2回連続実行し2回目の値を採用する

    View full-size slide

  20. サーバー側
    _dataはSingletonでDI
    2回目以降はデータありなのでDBアクセスなしに実行される

    View full-size slide

  21. クライアント側
    計測の2回目を有効な値とする
    (アドバイス thanks:とっちゃん)
    以降、MessagePack、MemoryPackの計測に続く

    View full-size slide

  22. クライアント側つづき

    View full-size slide

  23. 計測結果
    • 各、20ループ
    JSON MessagePack MemoryPack
    計測1 637ms 293ms 218ms
    計測2 535ms 484ms 252ms
    計測3 853ms 345ms 231ms
    計測4 522ms 332ms 288ms
    計測5 625ms 537ms 305ms
    計測6 653ms 426ms 249ms
    計測7 713ms 341ms 222ms
    計測8 582ms 292ms 257ms
    計測9 484ms 289ms 211ms
    計測10 868ms 530ms 283ms
    平均 647ms 387ms 252ms

    View full-size slide

  24. 今回の場合の結果
    JSON MessagePack MemoryPack
    平均 647ms 387ms 252ms
    差 -260ms -135ms
    サーバー側をWebAPIとしてシリアライザーをJSONからMessagePackまたはMemoryPack
    に置き換えただけの雑な実装でもそれなりにシリアライズ・デシリアライズ部分のパフォーマンス向上
    は見られることは分かった。
    しかし、実アプリケーションベースではどうだろうか??

    View full-size slide

  25. 実画面ベースでの実装
    • 先ほどのWebAPIを流用し画面のみを制作
    • 体感上、有意な変化があるのかそれぞれが判断して欲しい
    https://kind-moss-0af0a4d00.2.azurestaticapps.net/

    View full-size slide

  26. 実画面ベースでの比較(REST API)
    783ms

    View full-size slide

  27. 実画面ベースでの比較(Memory Pack)
    539ms

    View full-size slide

  28. 参考文献
    • MessagePack for C#(Github)
    • MemoryPack(Github)
    • System.Text.Json名前空間

    View full-size slide

  29. おしまい
    おしまい

    View full-size slide