一些新的功能笔记

#Chrome 控制台相关

#控制台支持`let`和`class`重新声明

https://developers.google.com/web/updates/2019/12/devtools?hl=zh-CN#redeclarations

#请求启动链

可以快捷查看因某个脚本触发的网络活动

https://developers.google.com/web/updates/2019/12/devtools?hl=zh-CN#initiators

#CSS 相关

CSS.registerProperty({
    name: '--g-color',
    syntax: '<color>',
    inherits: false,
    initialValue: '#375689'
})

https://developers.google.com/web/updates/2019/10/nic78?hl=zh-CN#css-prop-val

#JS 相关

#文件系统

对文件的操作能力（保存、另保存、读取）

使用chooseFileSystemEntriesAPI 打开文件/文件夹或者另存为

目前不支持打开特定路径，不支持打开非 ASCII 文件名，仅通过弹窗选择文件夹或者文件的方式进行读取或写入

https://web.dev/native-file-system/?hl=zh-CN

想法：

下载文件夹，这个很合适

#其他

#延迟加载

chrome76 开始提供延迟加载

<img src="./image.png" loading="lazy" alt="..." />

Chrome69 开始引入一个新的操作 cookie 的方式，叫做cookieStore，它是一个异步的操作，document.cookie 是一个同步的操作在获取时会导致浏览器 JS 暂停，目前尚未正式出现在 Chrome 浏览器上。地址

#CSS scroll-snap 属性

每次滚动操作后停止的位置。适用于分页和图像轮播

DEMO 描述

#Web Locks API

这是一个异步的 API，当多个脚本使用这个 API 时，会等待第一个使用 API 的执行函数完毕后才能执行

MDN

#CSS4 的一些规范

参考 W3C

#OffscreenCanvas

Chrome Beta 可直接使用，Firefox 需手动启用

一个可以在 Web Worker 使用的 canvas 属性的 API，canvas 操作必须要 Canvas DOM 因此无法在 web worker 中使用，OffscreenCanvas 不依赖 DOM 因此可以在 Web worker 中使用，也可以使用‘Canvas.prototype.transferControlToOffscreen’属性将主线程 Canvas 转交给 Web worker 执行

参考 MDN