Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rail というUIパフォーマンスモデル

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

Rail というUIパフォーマンスモデル

Avatar for Benoît Quenaudon

Benoît Quenaudon

April 05, 2016
Tweet

More Decks by Benoît Quenaudon

Other Decks in Programming

Transcript

  1. ユーザが感じる:返事 遅延 所感 0 - 100 ms 即刻 100 -

    1000 ms 集中切れず遅延を感じる 1000+ ms 脳コンテキストスイッチ 10,000+ ms また今度
  2. Response:GChrome風 onListItemClick() { let spinnerTimeout = setTimeout(showSpinner, 300); loadDetailsData().then(data =>

    { clearTimeout(spinnerTimeout); hideSpinner(); transitionToDetailsView(data); } }
  3. Idle:GChrome風 let tasks = []; let MIN_TASK_TIME = 20; function

    handleTasks(deadline) { while (tasks.length && deadline.timeRemaining() > MIN_TASK_TIME) processTask(tasks.pop()); if (tasks.length) requestIdleCallback(handleTasks); } requestIdleCallback(handleTasks);
  4. RAIL:まとめ Response < 100ms 即刻ユーザにフィードバックを Animation < 16ms サクサク、統一感上で動く Idle

    < 50ms バックグラウンド処理をする Load < 1000ms クリティカル情報を先に出す あなたのアプリのRAILはどうなっているの?
  5. パフォーマンスって改善して意味あるのか。 - Google:2% スピード減少 = 2% ユーザ検索減少 - Yahoo:400ms 速度上昇

    = 9% トラフィック増加 - AOL:速いロード = PV増加 - Amazon:100ms 速度上昇 = 1% 売上増加 - Google:ウェブサイトのスピードがランキングの指標としてある
  6. Animation:ローコストレンダリング Response Animation • Position: transform: translate(mpx, npx); • Scale:

    transform: scale(n); • Rotation: transform: rotate(ndeg); • Opacity: opacity: 0...1; 100ms 100ms にAnimationに必要な処理を入れれば?
  7. Animation:FLIP技 - First:初期の状態を記録。(位置+サイズ) - Last:アニメーション後の状態に更新 - 例:el.classList.add(‘expanded’); - Invert:transformを利用してコンポネントを処理の状態の戻す -

    例:transform: translate(-100px, -50px) scale(0.3); - Play:Invertで適用したスタイルを無効にし、最低コストで最後 の状態に更に戻す - 例:transform: none;