余烬缀记

一些新的功能笔记

edited on:
笔记

# 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 变量

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

#JavaScript