aria-labelledby

html 属性，可以表示一些元素是当前元素的无障碍内容 例如下面的例子，链接会念出标题

<div id="title">标题</div>
<a aria-labelledby="title">link</div>

speculationrules

预渲染，目前没得到太大的支持，和<link rel="prerender">类似，可以让浏览器提取渲染一些 html 页面，但不会执行 js，对于一些静态页面可以提升跳转的渲染速度。很自然的想到 Astro，果然有相关的配置。

对于单页应用，这个预渲染并没有什么效果，不过有一些类似的预加载的方法可以提升一些体验。使用模块化的网站也可以使用 modulepreload，例如<link rel="modulepreload" href="important-module.js" />，这个方法会解析并编译文件，而 preload 只是下载文件。

outline

类似与 border，但不会影响盒子大小。 这个是在这篇文章中看到的，

width: fit-content

类似于display：inline-block，会根据内容的大小来决定宽度。还有一个类似的属性field-sizing: content;,这个是用于<input>元素的，可以根据内容的大小来决定宽度。

overscroll-behavior

可以控制滚动到边界时的行为，例如overscroll-behavior: contain可以阻止滚动到边界时的回弹效果。

FSD

一个前端项目的架构方法, 一个比较新的前端架构方法，大体是根据业务拆分模块，然后每个模块下继续拆分，这个对业务和技术的理解要求都比较高，我也没尝试过，就不多评价了。

Navigator.sendBeacon()

可用于通过 POST 方法将数据发送给服务器，这个方法不会阻塞页面的卸载，就算页面关闭了也会发送。这个方法可以用于一些统计数据的发送。另外，进行页面埋点处理这个方法和传统的 ajax 请求外，还可以使用非常小的<img>标签的src属性，这个可以做到跨域发送。

scheduler

异步任务调度器，支持比较有限，scheduler 介绍。

will-change

告诉浏览器一个元素会发生变化，这样浏览器可以提前做一些优化，例如will-change: transform可以让浏览器提前做一些优化，但是这个属性也是有一些副作用的，例如会让浏览器提前分配内存，所以不要滥用。

filter: drop-shadow

可以给元素添加阴影，和box-shadow类似，但drop-shadow是在元素的内容上添加阴影，而box-shadow是在元素的盒子上添加阴影。两者的参数差不多，但drop-shadow没办法添加inset属性，也没办法增加阴影扩散半径 (box-shadow 的第四个参数)。

如果支持如果能支持阴影扩散半径的话的画，应该可以实现-webkit-text-stroke-width类似的效果，在文字旁边加上边框，在把字体设置透明，大概就我博客日期的样式了。

yjs

最近开发浏览器插件碰到状态同步的问题，不同页面只能通过 sendMessage 通信同步状态，就想着能不能做些简化下做到状态共享，就像文档协作操作一样，就找到了这个库。想了解里面的设计可以查看这篇文章，果然性能出色的库总是离不开算法。这个库并没有对通信方法做限制，就是在浏览器插件中也是完全可用的。

mutative

类似于 immer 的库，不过性能要比 immer 好很多，文档说是比 immer 快 2-6 倍，我测试下也确实是这样。不过它说比原生快就有些取巧了，是用reduce((acc, item) => ({...acc, item}), {})这种 O(n^2) 的方式做的比较。我没研究过 immer 的实现，没办法看出哪里做了优化，有机会可以研究下。官网