Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Blazor WebAssembly HostedのアプリにMessagePackを使ってみる
Search
tomokusaba
January 27, 2023
Programming
540
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Blazor WebAssembly HostedのアプリにMessagePackを使ってみる
Blazor WebAssembly HostedのアプリにMessagePackを使ってみる
.NETラボ 勉強会 2023年1月
tomokusaba
January 27, 2023
More Decks by tomokusaba
See All by tomokusaba
GitHub Copilot appとGitHub Copilot CLIとVS CodeのCopilot Chat Agent Modeの使い分け
tomokusaba
0
110
GitHub Copilot app最速の発信の裏側
tomokusaba
1
490
自宅サーバの変遷
tomokusaba
0
760
Microsoft Build Keynoteふりかえり
tomokusaba
0
140
GitHub Copilot CLIでWebアクセシビリティを改善した話
tomokusaba
0
720
GitHub Copilot CLI で考える複数エージェント設計
tomokusaba
0
250
GitHub Copilot appで変わる GitHub Copilot CLI開発体験
tomokusaba
1
1.5k
アクセシビリティはすべての人のもの
tomokusaba
0
440
GitHub Copilot Dev Days
tomokusaba
0
210
Other Decks in Programming
See All in Programming
AI時代の仕事技芸論〜ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ(スクフェス仙台 2026バージョン)
kuranuki
0
650
act2-costs.pdf
sumedhbala
0
110
Foundation Models frameworkで画像分析
ryodeveloper
1
120
えっ!!コードを読まずに開発を!?
hananouchi
0
220
yield再入門 #phpcon
o0h
PRO
0
500
AIキャラアプリkaiwaの低遅延音声通話基盤をどう作ったか - AWS Gravitonで支える低遅延・低コストAI Agent基盤
mogamit
0
170
【SRE NEXT 2026 Lunch Session】一人目専任SREの立ち上げを加速する ― AIと進めたオンボーディングで2分を0.04秒にした話
pkshadeck
PRO
0
2.8k
自作OSでスライド発表する
uyuki234
1
3.8k
Generative UI & AI-Assistants for Your Angular Solutions
manfredsteyer
PRO
1
190
Honoでのサプライチェーン侵害対策 〜 3つのライブラリに学ぶ
yusukebe
7
1.9k
吝嗇家のためのAI活用 / AI development for miser - ChatGPT + Issue Driven Development
tooppoo
0
190
作るコストが小さくなった時代 幸せに働くために改めて考えたいこと 〜エンジニアとして価値を出し続けるために注視している二分野〜
yuppeeng
0
110
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
37
7.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.5k
Embracing the Ebb and Flow
colly
88
5.1k
Prompt Engineering for Job Search
mfonobong
0
380
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
400
Building an army of robots
kneath
306
46k
Chasing Engaging Ingredients in Design
codingconduct
0
240
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
62
45k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
3
1.1k
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.3k
Believing is Seeing
oripsolob
1
170
Transcript
Blazor WebAssembly Hostedのアプリに MessagePackを使ってみる 株式会社SAKURUG エンジニアリングユニット 草場 友光 .NETラボ 2023年1月
自己紹介 • 普段は主にWebFormsアプリの保守の お仕事をしてます。 • 古めのシステムが多いので時代に取り 残されぬよう新しい技術を一つでも入 れるよう日々努力しています。 • 2022/08-2023
Microsoft MVP (Developer Technologies) • tomo_kusaba
宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。
注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • #dotnetlabでtweetすると右側に表示されます
今日の目的 • 通常、WebAPIのシリアライザとしてはJSONシリアライザが 使用されている。Webアプリケーションにおいてはパフォーマ ンスにおけるウェイトはデータベースやネットワークに比べシ リアライザーは少ないと考えられる。 • しかしながら、パフォーマンスチューニングは一般的に難しい • そこで、手軽なパフォーマンスアップの方法としてJSONシリ
アライザーをバイナリシリアライザであるMessagePack for C#に置き換えることでどれだけパフォーマンスアップできる か検証してみた
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プロトコル
MessagePack for C#とは
MemoryPackとは • 河合さんによる最新の超高速バイナリシリアライザ • .NET 7及びC#11に最適化
何で速いのか?? • この辺を読んでください • →https://neue.cc/2022/12/08_MemoryPackSessionInDo tNetConfRecapTokyo.html
通常のBlazor WebAssembly+WebAPI サーバー クライアント(ブラウザ) GET JSON (テキスト)
メリット・デメリット • メリット • OpenAPIのエコシステムを享受できる(Swaggerなど) • データのやりとりがテキストなので人間にも読める • デメリット •
テキストへのシリアライズのコストが高い
検証 • まずは、「WeatherForcast」のデモをMessagePackでシリ アライズ/デシリアライズして正常に画面表示できるかどうか を検証する • MessagePackでのパフォーマンスを最大限に引き出すことが 目的ではなく、いかに簡単にJSONシリアライザから MessagePackに置き換えるかを主眼に置いていることに留意 していただきたい。
検証ーController • Controllerは以下のように変更 • 戻り値の型を「IActionResult」 • JSONシリアラズされないようFileとして返す
検証ーShared • MessagePackObject属性をつける
検証ーClient • MessagePackでデシリアライズ
結果 • Weather forcastの表示ができました
サンプルの動作検証 • Edgeの開発者ツールで内容確認したところバイナリデータで 通信していると確認できます。
通常のWebアプリでは・・・ • データベースとネットワークの時間が無視できない。 • データベースとネットワークの時間の揺らぎが大きくそのまま ではシリアライズ・デシリアライズの差が出てくることが難し いのではと予想 • .NETはJITであるため初回と2回目以降の速度に大きく差が出 ると想定
今回の計測環境 • データベースの読み取りの揺らぎ対策 • サーバ内に結果をキャッシュし2回目以降は実データベースへ読みに 行かないようにする。 • 計測専用アプリであるので常に同じ結果を返す • ネットワークの揺らぎ対策
• Webアプリケーションサーバで実行する • JITによる揺らぎ対策 • 2回連続実行し2回目の値を採用する
サーバー側 _dataはSingletonでDI 2回目以降はデータありなのでDBアクセスなしに実行される
クライアント側 計測の2回目を有効な値とする (アドバイス thanks:とっちゃん) 以降、MessagePack、MemoryPackの計測に続く
クライアント側つづき
計測結果 • 各、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
今回の場合の結果 JSON MessagePack MemoryPack 平均 647ms 387ms 252ms 差 -260ms
-135ms サーバー側をWebAPIとしてシリアライザーをJSONからMessagePackまたはMemoryPack に置き換えただけの雑な実装でもそれなりにシリアライズ・デシリアライズ部分のパフォーマンス向上 は見られることは分かった。 しかし、実アプリケーションベースではどうだろうか??
実画面ベースでの実装 • 先ほどのWebAPIを流用し画面のみを制作 • 体感上、有意な変化があるのかそれぞれが判断して欲しい https://kind-moss-0af0a4d00.2.azurestaticapps.net/
実画面ベースでの比較(REST API) 783ms
実画面ベースでの比較(Memory Pack) 539ms
参考文献 • MessagePack for C#(Github) • MemoryPack(Github) • System.Text.Json名前空間
おしまい おしまい