Chrome 74 新特性

• 文檔說明
  • 做者：西樓聽雨
  • 禁止轉載
  • 本文同時發佈於幕布平臺：mubu.com/doc/explore…
• 新特性一：支持私有實例字段（private class filed）
  • Chrome 72 發佈時，對公有實例字段（pulibc class field）已經實現了支持；此次，Chrome 74 的發佈，則實現了對私有實例字段的支持。他的語法相似於公有實例字段，只需在字段名稱前加上「#」符號便可（你能夠把它當成是字段名稱的一部分）
    • 示例
      • class IncreasingCounter {
        • // Private class field
        • #privateValue= 0;
        • get value() {
          • return this.#privateValue;
        • }
        • increment() {
          • this.#privateValue++;
        • }
      • }
  • 實例字段語法能夠帶來的好處：
    • 1. 能夠省去需在 constructor 函數中初始化實例字段的麻煩
    • 2. 清晰的語法和語義
  • 更多資料
    • 1. 公有實例字段介紹（需越牆）
      developers.google.com/web/updates…​​
    • 2. 實例字段介紹（需越牆）
      developers.google.com/web/updates…
• 新特性二：支持媒體查詢選項 「prefers-reduced-motion」
  • 背景介紹
    • 咱們都知道界面動效會消耗必定的性能，若是設備自己性能不佳，或者設備當前性能不足時，動效就會給用戶帶來卡頓的感受，反而會下降體驗；因此許多操做系統都提供了緩解或取消動效的選項。prefers-reduced-motion （媒體查詢選項之一）就是這樣一項能夠用來檢測這類選項是否已開啓的媒體查詢項。
      • 操做系統中的減小或取消動效的選項示例
        
  • @media (prefers-reduced-motion: reduce)
  • 使用示例
    • 假設咱們如今有一個登陸按鈕，它上面設置了一個動畫，其代碼以下：
      • button { animation: vibrate 0.3s linear infinite both; }
    • 若是咱們想在用戶開啓了減輕動畫選項時禁用這個按鈕的動畫，咱們能夠這樣作：
      • @media (prefers-reduced-motion: reduce) {
        • button { animation: none; }
      • }
  • 更多資料
    • 1. perfers-reduced-motion 媒體查詢選項介紹（需越牆）
      developers.google.com/web/updates…
    • 2. 媒體查詢規範第5階段規範文檔中關於 prefers-reduced-motion 的描述
      drafts.csswg.org/mediaquerie…
• 新特性三：支持 CSS transition 過程事件
  • CSS Transitions 規範中規定了：
    • 當一個 transition 進入隊列、開始、結束、取消時，都必須發出相對應的 transition 事件。
      這些事件在其餘瀏覽器中已經被支持了一段時間了，但在 Chrome 74 以前還沒支持
  • 在 Chrome 74 以後，咱們能夠監聽如下事件：
    • transitionrun ：發生在 transition 進入隊列時
    • transitionstart ：發生在 transition 開始執行
    • transitionend：發生在 transition 結束之時
    • transitioncancel：發生在 transition 被取消之時
  • 這些過程性事件帶給咱們的意義：
    • 咱們能夠藉助這些事件來作一些關聯性的動做，好比在一個操做按鈕 transition 結束前禁用這個操做按鈕
  • 瞭解更多
    • 1. CSS-Transition 規範中對 transition 事件的描述
      www.w3.org/TR/css-tran…
• 新特性四：新增了一些特性政策（Feature Policy）API
  • 特性政策簡介
    • 特性政策能夠用來選擇性地容許、禁用某些特性或修改特性的行爲。它能夠經過兩種方式來設置：
      • 兩種方式的示例：
        • HTTP 響應頭：Feature-Policy: geolocation 'self'
          • 經過<meta> 標籤的 http-equiv 屬性來設置的方式與此等價
        • allow 屬性：<iframe ... allow="geolocation self"></iframe>
  • 新增的 API
    • 1. 獲取不受禁止的全部特性
      • document.featurePolicy.allowedFeatures()
        
    • 2. 查詢某項特性是否不受禁止
      • document.featurePolicy.allowsFeature(...)
        
    • 3. 查詢某項特性在當前頁面上不受禁止的全部域名
      • document.fetaturePolicy.getAllowlistForFeature(...)
        
  • 瞭解更多
    • 1. 特性政策介紹（需越牆）
      developers.google.com/web/updates…
• 新特性五：速度超快的異步鍵值對存儲服務 KV Storage
  編注：該項特性還處於 Origin Trail 階段，並未開放。Origin Trail 是谷歌的一種新特性試驗機制，想要嘗試新特性的網站，須要在 Origin Trail 先進行登記。
  • 關於 KV Storage 的介紹（需越牆）
    developers.google.com/web/updates…