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
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
410
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
430
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
9
870
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
590
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
Terraform Stacks入門 #HashiTalks
msato
0
350
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
SSMRunbook作成の勘所_20241120
koichiotomo
2
130
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.3k
Can We Measure Developer Productivity?
ewolff
1
150
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
250
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
550
Featured
See All Featured
Building an army of robots
kneath
302
43k
The Language of Interfaces
destraynor
154
24k
KATA
mclloyd
29
14k
Site-Speed That Sticks
csswizardry
0
25
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
89
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Done Done
chrislema
181
16k
How to train your dragon (web standard)
notwaldorf
88
5.7k
GitHub's CSS Performance
jonrohan
1030
460k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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!