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…