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…

转载于:https://juejin.im/post/5cf0e0d8e51d454f6f16eb78