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
趣味でつくる アバター×アバター マッチングアプリ~Performanceチューニング編~
Search
BOXP
June 12, 2019
Technology
2
1.7k
趣味でつくる アバター×アバター マッチングアプリ~Performanceチューニング編~
VRCLT #2 用です
BOXP
June 12, 2019
Tweet
Share
More Decks by BOXP
See All by BOXP
Cluster Creator Kitに入門してみた
boxp
0
76
LookingGlassPortraitあそんでみた
boxp
0
54
肉体を捨てた話
boxp
0
75
A story about releasing a online pairing service for avatars living in virtual worlds
boxp
1
330
VketのブースにVRoid製うちのこを召喚してみた
boxp
0
190
Hito Hub 2.0
boxp
0
1.3k
バーチャルマーケット3に ポスターを貼ってみた件
boxp
0
1.5k
趣味でGOOGLE KUBERNETES ENGINEを試したら 財布が薄くなったはなし
boxp
0
1.3k
趣味でつくる アバター×アバター マッチングアプリをリリースした話
boxp
0
120
Other Decks in Technology
See All in Technology
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
740
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
12
5.4k
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
590
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
340
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
660
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
1
210
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
260
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
2
300
PHPでResult型やってみよう
higaki_program
0
190
Data Engineering Study#30 LT資料
tetsuroito
1
570
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
6
340
Building GoReleaser - from shell script to paid product
caarlos0
0
270
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Code Reviewing Like a Champion
maltzj
524
40k
4 Signs Your Business is Dying
shpigford
184
22k
RailsConf 2023
tenderlove
30
1.2k
Bash Introduction
62gerente
613
210k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Building Applications with DynamoDB
mza
95
6.5k
The Pragmatic Product Professional
lauravandoore
35
6.8k
How to Ace a Technical Interview
jacobian
278
23k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Transcript
趣味でつくる アバター×アバター マッチングアプリ ~Performanceチューニング編~ BOXP
自己紹介 • 一箱さん (の体を借りたBOXP) • 某Web企業でソフトウェアエン ジニアをしています • 好きなLispはClojureです
None
製作中のアプリ • VRChat、Virtual Castなどから 好みのアバターを自動で探して くれるサービス • IPhone・Android向けWebアプリ としてリリース予定 •
VRじゃなくてごめんなさい • 所謂PWA(Progressive Web Apps)を目指して製作中
なぜWeb? • 無名のアプリなので インストールの手間があるとその まま直帰してしまう… 多くの人に触ってほしい • このスライドも社内勉強会の資料 を再編集したもの 実験的な技術を試して
業務に活かしたい
なぜWeb? • 無名のアプリなので インストールの手間があるとその まま直帰してしまう… 多くの人に触ってほしい • このスライドも社内勉強会の資料 を再編集したもの 実験的な技術を試して
業務に活かしたい
とは言え インストールの手間がなくても Webページがもっさりしていると 使ってもらえない
もっさりしないために Hito Hubで何をしたか
状況に応じて 必要なパフォーマンス を満たす
Webアプリ 4つの側面 (RAILモデ ル) • Response: ユーザーの入力に対する応答中の状態 • Animation: アニメーション再生中の状態
• Idle: ユーザーの入力を待機している状態 • Load: コンテンツ読み込み中の状態 引用元: RAIL モデルでパフォーマンスを計測する https://developers.google.com/web/fundamentals/performance/rail
快適な パフォーマンス の目安 •100ミリ秒以内の応答 •これよりも遅いと操作と反応のズレを感じる Response •10ミリ秒以内に画面をレンダリング •1000ms / 60fps
- ブラウザによるレンダリング時間 (約6ms) =約10ms Animation •アイドル時間を利用したタスク分担 •100ミリ秒以上かかる処理はアイドル時間まで後回 し •ユーザー入力へのレスポンスが最優先 Idle •読み込みは1000ミリ秒以内に •1000ミリ秒より長いとユーザーの集中力が切れて しまう Load ※Google調べ
Hito Hubですべて満たすまで 最適化してみました
全ての入力に対して 100ms以内に応答する 100ms以内に応答が間に合わ ない場合は別の応答を返す • Rippleを表示させるなど 応答処理と他の処理を同時に 実行させない • リソースの取得などは別スレッド
(WebWorkerなど)で行うか後回しに する Response
アニメーションを60fps で動かす アニメーションが必要なカードだけ別 レイヤーに • will-change: transform;スタイルによって別レ イヤーへ • 重ね合わせによるピクセルの計算をスキッ
プできる 透過・座標移動のみでアニメーション を実現させる • transform,opacityスタイルを使う Animation
読み込み時間を 1秒以内に Load JavaScriptファイルは分割して 必要な分だけロードさせる • 追加のJavaScriptファイルが必要なと きにはじめてロードする 他の画面に必要なファイルを prefetchしておく
• WebWorkerを使って画面の処理を 邪魔せず先読みしておく
最適化の結果
None
最適化の甲斐あって なんとかサクサク動くよう になった
~Fin~
最後に告知的なもの
7月末までにリリース予定!
Thanks!