2019 Google IO Web 前端内容总结-CSDN博客

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

Google 分享了他们在性能上的一些做法和建议

阶段式SSR
捕获JS完全加载前的用户点击
保持初始大小的JS
交互驱动懒加载组件
建立依赖关系图，声明性加载功能，同时获取数据

Google 的性能建议

懒加载
响应式图片（根据设备像素密度等加载不同分辨率图片）
图片CDN
延迟第三方JS
移除代价巨大的库
分离代码
避免Web Font字体闪烁
Prefetch
Preconnect
Preload
首屏关键CSS
gzip -> Brotli
响应式加载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)