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.6k
趣味でつくる アバター×アバター マッチングアプリ~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
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
170
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
300
Application Development WG Intro at AppDeveloperCon
salaboy
0
190
アプリエンジニアのためのGraphQL入門.pdf
spycwolf
0
100
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.5k
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
690
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
150
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
160
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
130
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Code Reviewing Like a Champion
maltzj
520
39k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The Invisible Side of Design
smashingmag
298
50k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Happy Clients
brianwarren
98
6.7k
Site-Speed That Sticks
csswizardry
0
28
The Language of Interfaces
destraynor
154
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
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!