GoogleIO-2022

发布于May 14, 2022

Priority Hints

1.script标签的defer和async属性可在下载的时候不阻碍HTML Parsing。均为为异步加载，和优先级没有关系。defer是在Parsing完成后执行,async是在下载完成后执行。依赖DOM的脚本不能使用async属性。

2.link标签的preload可以使浏览器预先获取和缓存对应资源(mdn=>)。

3.fetchpriority属性可以设置资源的优先级，用于link,img,script,iframe标签。有high,low,auto三种值选择，同时fetch请求也可指定priority。目前只有chrome支持。

4.img标签中可以使用loading=“lazy”属性，可以延迟图片的加载。包含auto、lazy、eager三种值，auto是默认值，lazy是延迟加载，eager是立即加载。但在何时进行加载需要根据浏览器的实现而定。

原始文章
 GooleIO 视频

Deep-copy

1.可以不用在使用JSON.parse(JSON.stringify(obj))，进行深拷贝。

2.使用JSON的方式容易出现错误的情况，比如：

const obj = {
date: new Date
}
obj.date.getFullYear() // 2021
const temp = JSON.parse(JSON.stringify(obj))
temp.date.getFullYear() // TypeError: temp.date.getFullYear is not a function

时间对象会变成时间字符串，所以会出现错误。

const arr = [1]
arr.push(arr)
JSON.parse(JSON.stringify(arr)) // VM411:1 Uncaught TypeError: Converting circular structure to JSON

出现了循环引用。
3.关于structuredClone
详情查看mdn=>

Cascade layers

css样式应用覆盖规则为:

!important > 内联style > #id > .class > 标签

使用@layer属性可以设置css样式的层级。对解决样式冲突问题很有帮助，但目前并没有大规模使用起来。目前开发最多的时候还是使用的less或sass的nest解决。