Frontend Night #14

[stomk]

• 資料の準備をがんばらない
• 参加・途中退席は自由
• スキップしない

2018/08/16 19:00~20:00

話したい・聞きたいネタを書いてく ✏️

ハッシュタグ #frontend_night

[stomk]

Page Lifecycle API

• Page Lifecycle API | Web | Google Developers
• Page Lifecycle - W3C Editor's Draft
• 背景
  • 昨今のモダンブラウザーはマシンのCPUやメモリなどのリソースに過度の負荷をかけないために、優先度の低いページを停止または破棄してリソースを解放することがあり、それをさらに積極的に行えるようにしていきたい
  • OSレベル (iOS, Android, Windows) ではそうした優先度の低いタスクのリソースの解放は一般的になっているが、ウェブではこれまで一般的ではなかった
  • ウェブでもこれまで load, unload, visibilitychange など user-initiated な操作によるページ状態の変化のイベントは取ることができたが、ブラウザーによるページの停止・破棄など system-initiated なイベントは取ることができなかった
  • system-initiated な操作によって生じる状態とそのイベントを定義して、ウェブ開発者がそれらを扱えるようにすることで、ブラウザーによるリソースの解放を積極的に行えるようにしていきたい
• 目的
  • ページ状態のライフサイクルというコンセプトを定義して標準化する
  • ブラウザーがリソースの制限・解放を行うための状態を新たに定義する
  • こうした system-initiated な状態の変化に関わるイベントをウェブ開発者が扱えるようにする

• ページ状態の遷移図

  
  

• 状態
  • Active
  • visible でDOM要素にフォーカスが当たっている
  • Passive
  • visible でDOM要素にフォーカスが当たっていない
  • Hidden
  • タブが隠れていて、freeze はしていない
  • Terminated
  • ユーザー操作によってページが unload されて、メモリが解放される
  • Frozen
  • CPUやバッテリー等の消費を抑えるために、不要なタスクを止める
  • 再開可能
  • ページの戻る・進むで再利用可能な状態として保存しておくのにも使われる (page navigation cache)
  • Discarded
  • リソース状況が厳しいときに、ブラウザーがページを破棄してメモリを解放する
  • 再開不能
  • タブ自体は残っており、再度フォーカスがあたるとページがリロードされる
• イベント
  • pagehide
  • ユーザーがページをナビゲーションして、ブラウザーが元のページを page navigation cache に入れられるとき、event.persisted は true になり、ページは frozen になる。event.persisted が false なら、ページは terminated になる
• Chrome 68で新たに加わったもの
  • document の freeze と resume イベントが取れるようになった
  • document.wasDiscarded で discard されていたかどうかが取れるようになった
• 各状態の DOs & DONTs
  • Hidden
  • ブラウザーが状態の変更を確実に検知できる最後の状態であるため、ユーザーセッションの終わりと見なすべき
    • 特にモバイルでタブマネージャーからタブを破棄したり、ブラウザーアプリ自体を破棄したら、beforeunload, pagehide, unload イベントは発火しない
  • アプリケーション状態の永続化（DB保存など）やアナリティクスデータの送信はここで済ますべき（beforeunload で行うべきではない）
  • アニメーションなど不要なタスクはなるべく止める
  • Frozen
  • Timer やコネクションはすべて切る
    • polling, web socket, IndexedDB, etc.
• beforeunload , unload イベントのリスナーが登録されていると、page navigation cache ができなくなるので、リスナーは付けない方がいい
  • 未保存の変更があってアラートを出すときは、未保存の変更がなくなったときにイベントリスナーを外す
• PageLifecycle.js を使うと、すべてのメジャーブラウザーで page state の変化を取得できる
• chrome://discards/ からページの状態を確認したり、freeze, discard したりできる

[stomk]

前回の Houdini の補足

• https://github.com/wantedly/frontend_night/issues/13
• ep29 Houdini | mozaic.fm
• 目的
  • CSSをより programmable / extensible にする
• 背景
  • CSSで何か新しいしくみを作ってそれがふつうに使えるようになるには、仕様を策定して、各ブラウザーがそれを実装して、新しいブラウザーのバージョンがユーザーに浸透するまで待って、と5~10年単位の時間がかかる。これをもっと簡単にできるようにしたい
  • 例えばJSなら言語の基盤の上にライブラリやフレームワークがあって、エンドディベロッパーはそれを使うことで気軽に新しいことができるようになる
  • CSSでもそうしたエコシステムが実現できるようにしたい
  • そのために必要なプリミティブなパーツを提供する
• 各仕様の関係性
  • Layout API
  • CSS typed OM
    • アニメーションで 60fps で更新していくときに、これまでの getComputedStyle() だと毎フレームごとにすべてのスタイルがシリアライズされた巨大な文字列が生成されてGCが発生しやすくなってしまう。スタイルをオブジェクトで持っておけばそれを避けられるということで CSS typed OM が作られた。
  • Properties & Values
    • パラメーターによって worklet の挙動を変えるという上で自然なデザインは CSS のカスタムプロパティとして設定すること。これを読み取って typed OM で使えるようにするには、カスタムプロパティに型や単位、取りうる値などの情報が必要。それを宣言できるようにする。
  • Font metrics
    • テキストをレイアウトするために、ベースラインの位置や文字の高さなどフォントの情報が必要になるときがあるので、それを取れるようにする
  • Paint API
  • Layout はけっこう仕様が複雑だし、実現するために必要な部品も多い。同じ worklet というしくみを持ったより簡単なものとして Paint を先に作ってみることで、ブラウザベンダーも足慣らしをしつつ、ディベロッパーにも worklet というものを理解してもらえるし、フィードバックも受けられる
  • worket
    • handler を持った JS のクラスを書くと、その handler をブラウザーが別スレッドで実行してくれる。パラメーターは CSS のカスタムプロパティで受け取る。
  • Animation worklet
    • 話は出てなかったけど、同じく worklet で実現できるもの
  • Parser API
  • 上の流れとは割と無関係で、エディターのシンタックスハイライトとかで CSS parser を書いてるけど、CSS parser はブラウザが持ってるんだから、それを外でも使えるように公開してあげようという話

[KentoMoriwaki]

docz

https://github.com/wantedly/ui の進捗について