2019 Google IO Web 前端內容總結

Web 新產品 / 新技術

• web.dev
  • web.dev
  • 一個能夠用來學習框架、性能、各類 Web 技術的地方
  • 還有實戰 Codelab
  • 正在進行多國翻譯
• Lighthouse Performance Budgets
  • developers.google.com/web/tools/l…
  • 在Lighthouse中設定性能預算，讓Lighthouse在測試性能時使用並打分
• PWA Desktop
  • PWA如今能夠各大桌面平臺系統中安裝了
• Trusted Web Activity
  • developers.google.com/web/updates…
  • Chrome Custom Tab 的升級版，再也不顯示標題欄
  • 一個常見的使用場景是在已有的App中去使用PWA來打包家族應用並打造原生體驗
  • 在網頁中可使用schema url來與App通訊
  • App能夠在網址後附上參數給網頁發送數據
• Perception Toolkit
  • web.dev/perception-…
  • 一個工具包使用Shape Detection API去掃描條碼或者獲取實物信息
  • 從網站的 meta 信息展現相關卡片
  • 提供了WebAssembly版以向下兼容
• Puppeteer with Firefox
  • 可使用Firefox進行自動化了
  • npm i puppeteer-firefox

Web 未來可使用的新功能 / 新Web API / 新 JavaScript API 等

Chrome Only (目前爲止，沒有寫入w3c標準)

• Lazy loading
  • 在圖片和iframe中添加 loading="lazy" 屬性來讓瀏覽器自動懶加載
  • Chrome 75 啓用
• Portals
  • web.dev/hands-on-po…
  • 一個新tag，相似iframe，以提供轉到網頁中嵌入內容的無縫體驗
  • 能夠在Chrome Canary體驗
• Web Packaging
  • github.com/WICG/webpac…
  • 對網頁進行簽名打包，在不一樣服務器上部署，使得瀏覽器能夠不只在源服務器上獲取內容（p2p的感受）
  • 暫時沒有任何 demo
• Paint Holding
  • 同一網站切換頁面時將保持以前的繪製不會白屏一次
  • Chrome Canary 可預覽
• Cookie Changes upcoming in Chrome 76
  • web.dev/samesite-co…
  • 沒有添加Same-Site的Cookie將會自動適用Same-Site=LAX

Chrome 正在開發的

• 原生文件系統
• 無需提早申請便可存儲文件在本地
• 基於短信的驗證

關聯Session： What’s New with Chrome and the Web (Google I/O ’19)

Web API

• 開發中

  • 分享 -> Web Share API (Shipped) -> Web Share Target (v2) (Working)
  • media control on System level -> mediaSession API (Shipped)
  • 檢測條碼與形狀 -> Shape Detection API (FaceDetect / BarcodeDetect both shipped in Chrome Canary)
  • App Badging (App上的數字) -> window.Badge / window.ExperimentalBadge (Origin Trial 78)
  • 喚醒鎖 -> (Screen wake lock / System wake lock) -> Wake Lock (In Development)
  • 文件操做 -> File Picker -> chooseFileSystemEntries (propse stage / In Development)
  • 訪問串口設備（例如打印機） -> Serial API (Proposed API)
  • HID 設備訪問 -> WebHID (Proposed API / In Development)
  • 訪問通信錄 -> Contacts Picker (Proposed API / Experimenting)
  • 訪問安裝字體列表 -> Proposed / In Development

• 很快實裝

  • 剪貼板複製與粘貼圖片 Clipboard API
  • 基於短信的手機號驗證流程
  • 基於時間的推送通知API Notification Triggers API

以上內容年內實裝

在 Chrome 中可參與試用並參與反饋 developers.chrome.com/origintrial…

Web API 可在 Project hugu 參閱進度 Project hugu

相關Session： Unlocking New Capabilities for the Web (Google I/O ’19)

JavaScript API / Syntax

• 類的私有字段 (已實裝) - working on privatter method and getters and setters
• String.prototype.matchAll (已實裝)
• 數字分隔 (Chrome 75)
• BigInt (Chrome 74 與 Firefox nightly 與 node 實裝 & transpiler available)
• Array.prototype.flat (in chrome firefox safari node)
• 從 Entries 反轉化爲 Object (in chrome firefox safari node )
• globalThis (in chrome firefox safari node )
• 正在將數字排序的穩定性寫入標準
• 多國語言相關
  • Intl.RelativeTimeFormat -> today yesterday tomorrow (in chrome firefox node)
  • Intl.ListFormat -> ex. A, B or C (in chrome node)
  • Intl.DateTimeFormat -> ex. May, 5 (in chrome)
  • Intl.Locale -> Internal Translation (in chrome node)
• Promise.allSettled (in chrome 76 nightly) / Promise.any
• WeakRef and finalizers (in chrome with flags) & 寫入標準

關聯Session： What’s new in JavaScript (Google I/O ’19)

經驗分享與性能提高

Chrome 想爲各個框架提供一些API這樣他們在連續執行分塊任務時同時相應用戶輸入

• Scheduling API
  • github.com/WICG/main-t…
  • github.com/WICG/is-inp…
  • github.com/WICG/displa…

Google 分享了他們在性能上的一些作法和建議

• 階段式SSR
• 捕獲JS徹底加載前的用戶點擊
• 保持初始大小的JS
• 交互驅動懶加載組件
• 創建依賴關係圖，聲明性加載功能，同時獲取數據

Google 的性能建議

1. 懶加載
2. 響應式圖片（根據設備像素密度等加載不一樣分辨率圖片）
3. 圖片CDN
4. 延遲第三方JS
5. 移除代價巨大的庫
6. 分離代碼
7. 避免Web Font字體閃爍
8. Prefetch
9. Preconnect
10. Preload
11. 首屏關鍵CSS
12. gzip -> Brotli
13. 響應式加載JS（適應不一樣瀏覽器分別加載不一樣JS）

以及使用Lighthouse 與設定性能預算 LightWallet

相關Session：
Elevating the Web Platform with the JavaScript Framework Community (Google I/O ’19) Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O ’19)

其餘

更多性能其餘案例、How to、以及Web內容可參照 www.youtube.com/playlist?li…