用途
@import 是 SCSS 的旧版导入方式。
允许直接引入另一个文件的内容，无需显式指定导入的内容。
会将所有导入的样式和内容直接拼接在生成的 CSS 文件中。
缺点
冗长的输出：因为它会重复导入相同的文件，导致生成的 CSS 文件冗长。
变量和混入的命名冲突：所有导入的文件共享同一个全局命名空间。
用途
@use 是 SCSS 的现代导入方式，推荐用于新项目。
允许模块化引入文件，避免全局命名冲突。
通过限定符（命名空间）访问文件中的内容。
语法与行为
默认带有命名空间（文件名），通过 . 访问变量、@mixin 和函数。
支持引入时自定义命名空间。
引入文件时，不会重复生成内容。
requestAnimationFrame 是一种优化动画渲染的 API。setTimeout 或 setInterval 不同，requestAnimationFrame 会自动与浏览器的刷新率同步（如 60Hz，16.67ms 一帧）。高效：只在页面处于活动状态时执行回调（后台标签页会暂停，节省资源）。
精准：与显示器的刷新率匹配，避免丢帧。
流畅：浏览器会在合适的时间点调用回调，减少卡顿或跳帧现象。
实现 DOM 动画
平滑滚动效果
监控动画帧性能
浏览器的 Web Components 中，Class 是用来定义自定义元素的主要方式，自定义元素支持以下生命周期回调方法：
class MyElement extends HTMLElement {
connectedCallback() {
console.log('元素已插入到 DOM');
this.innerHTML = '<p>Hello, World!</p>';
}
}
customElements.define('my-element', MyElement);class MyElement extends HTMLElement {
disconnectedCallback() {
console.log('元素已从 DOM 中移除');
}
}
customElements.define('my-element', MyElement);
performance.now() 是一种高精度的时间测量方法，返回自页面加载以来的毫秒数（包括小数点后3位）。
它的精度远高于 Date.now()，适合用于测量代码性能或事件耗时。
起点是浏览器的性能时间起点，不会受系统时间调整的影响。
时间以 DOMHighResTimeStamp 类型返回，单位为毫秒。
特性 @use @import
模块化 使用命名空间，强模块化 全局导入，容易命名冲突
性能 加载一次，性能更优 每次都会重复导入
CSS 输出 默认不会输出引入文件中的样式 会输出引入文件中的样式
推荐程度 现代 SCSS 标准推荐使用 不推荐，已被逐步淘汰
prefersReducedMotion: () =>
matchMedia("(prefers-reduced-motion: reduce)").matches,
prefersMotion: () =>
matchMedia("(prefers-reduced-motion: no-preference)").matches,
···
功能分析
prefersReducedMotion:
检测用户是否启用了减少动画或运动的偏好设置。
如果启用了，matchMedia("(prefers-reduced-motion: reduce)").matches 会返回 true。
表示用户希望减少不必要的动画或视觉运动。
prefersMotion:
检测用户是否没有特别的减少运动偏好（默认允许动画）。
如果没有特别偏好，matchMedia("(prefers-reduced-motion: no-preference)").matches 会返回 true。
表示用户对动画或视觉运动没有限制，可以正常显示动画。
使用 prefers-reduced-motion 的重要性（尤其是在 GSAP 或自定义动画中）
1. 提升用户体验
用户多样性： 有些用户（尤其是有视觉敏感或晕动症倾向的人）会对复杂动画感到不适。
如果忽视这些用户偏好，可能导致糟糕的用户体验，甚至用户放弃使用你的网站。
尊重用户设置： 使用 prefers-reduced-motion 确保动画适配用户需求。<script type="importmap">
radial-gradient(at 17% 0%, hsla(281deg, 0%, 94%, 1) 0, transparent 50%)void 是 JavaScript 的一个运算符，用于计算一个表达式但不返回任何值。void 0 常用于生成 undefined 值，以确保其值始终为 undefined。
void 0 是一个确保结果为 undefined 的表达式（即使 undefined 被重新赋值也不会影响 void 0 的结果）
在这里，void 0 !== arguments[3] 是为了安全地检查第四个参数是否被定义。
&& (逻辑与)规则: && 运算符会从左到右依次求值，直到找到第一个 false 值。如果所有表达式都为 true，则返回最后一个表达式的值；如果某个表达式为 false，则直接返回该 false 值，并停止进一步的求值。
应用
var n = 3 < arguments.length && void 0 !== arguments[3] && arguments[3];解释: 在这里，&& 用于连接多个条件。如果 3 < arguments.length 为 true，继续判断 void 0 !== arguments[3]；如果也为 true，再判断 arguments[3] 的值，并将其赋值给 n。如果任何一个条件为 false，n 将会被赋值为该 false 值。
总结: 只有在所有条件都为 true 的情况下，n 才会被赋值为 arguments[3] 的值；否则，n 会被赋值为第一个 false 条件的值。
|| (逻辑或)规则: || 运算符也从左到右依次求值，但它会返回第一个 true 的表达式值，并停止进一步的求值。如果所有表达式都为 false，则返回最后一个表达式的值。
应用
如果将 && 替换为 ||：
var n = 3 < arguments.length || void 0 !== arguments[3] || arguments[3];解释: 在这种情况下，n 将被赋值为第一个 true 条件的值。如果 3 < arguments.length 为 true，n 将立即被赋值为 true，并停止进一步判断。如果 3 < arguments.length 为 false，则检查 void 0 !== arguments[3]，依此类推。
总结: 只要有一个条件为 true，n 就会被赋值为第一个 true 条件的值；如果所有条件都为 false，n 将被赋值为最后一个条件的值。