ep56 Monthly Web 201908



第 56 回のテーマは 2019 年 8 月の Monthly Web です。

Show Note

Chrome 動向

Firefox 動向

Safari 動向

  • Stable: 12.1.2
  • Updates
    • Release Notes for Safari Technology Preview 89
      • https://webkit.org/blog/9497/release-notes-for-safari-technology-preview-89/
      • Implemented nullish coalescing with the ?? operator for ESNext (r247819)
      • Added referrerpolicy attribute support for <script> elements (r247509)
      • Made storing cross-origin top-level prefetches in HTTP cache optional (r247860)
      • Exposed the aria-label attribute for <video> elements (r247891)
      • Enabled a WebRTC debug mode without encryption (r247438)
      • Added support for console.screenshot with detached (not in main DOM tree) <img> and <picture> elements (r247814)
      • Added support for console.screenshot with ImageData and ImageBitmap (r247812)
      • Added an indicator/separator around items in the Images collection in the Resources tab (r248019)
      • Add special case for about:blank resources to show "Resource has no content" message (r247747)
    • Release Notes for Safari Technology Preview 90
    • Announcing the WebKit Tracking Prevention Policy
    • How Web Content Can Affect Power Usage
      • https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/
      • バッテリーを長持ちさせるためのガイドライン
      • マシンリソースのハイパワーな状態の時間を減らしできるだけアイドルにする
      • インタラクションの 3 状態
      • アクティブにインタラクションしている
      • ページは最前面に出ているがインタラクションしていない
      • ページが最前面ではない
      • User Interaction のための fast paths をあけておく
        • FP/ロードの最適化は、電力消費にも効果的
        • 初期ロード後は、 JS をすばやくアイドルにすることが重要
        • OS で可能な操作(スクロール etc) は JS でやらずに OS に任せるほうが効率的。
      • できるだけ電力を消費しない
        • 頻繁に CPU を起こすような Timer の数を減らす。
        • 動き続けるアニメーション(GIF, spinner, auto-play video etc)を減らす。
        • IntersectionObserver を用いて見えてない要素の処理を減らす。
        • アニメーションはスクリプトではなく最適化の効く CSS を利用。
        • 定期的なネットワークのポーリングをやめ WebSocket や KeepAlive fetch を利用。
      • 消費電力ゼロ
        • ページがインアクティブになると以下を実施
          • rAF の停止
          • CSS/SVG アニメーションの停止
          • タイマーを間引く
        • さらに OS が以下を実施
          • iOS: タブを完全にサスペンド
          • macOS: App Nap でスロットル
        • ただし CPU は起こせてしまうため以下を併用
          • Page Visibility API
          • fucus されてない場合に発生する blur event
  • Other

Edge 動向


TC39 動向