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.5k
趣味でつくる アバター×アバター マッチングアプリ~Performanceチューニング編~
VRCLT #2 用です
BOXP
June 12, 2019
Tweet
Share
More Decks by BOXP
See All by BOXP
Cluster Creator Kitに入門してみた
boxp
0
65
LookingGlassPortraitあそんでみた
boxp
0
37
肉体を捨てた話
boxp
0
63
A story about releasing a online pairing service for avatars living in virtual worlds
boxp
1
280
VketのブースにVRoid製うちのこを召喚してみた
boxp
0
180
Hito Hub 2.0
boxp
0
1.1k
バーチャルマーケット3に ポスターを貼ってみた件
boxp
0
1.4k
趣味でGOOGLE KUBERNETES ENGINEを試したら 財布が薄くなったはなし
boxp
0
1.2k
趣味でつくる アバター×アバター マッチングアプリをリリースした話
boxp
0
110
Other Decks in Technology
See All in Technology
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.6k
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
130
一休.comレストランにおけるRustの活用
kymmt90
3
590
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
180
Gradle: The Build System That Loves To Hate You
aurimas
2
150
いまさらのStorybook
ikumatadokoro
0
150
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
470
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
27
12k
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.1k
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
510
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
RailsConf 2023
tenderlove
29
880
Measuring & Analyzing Core Web Vitals
bluesmoon
1
41
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Typedesign – Prime Four
hannesfritz
39
2.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
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!