-
Math.round()仅四舍五入到整数，不能直接保留小数位；正确做法是用toFixed()配合parseFloat，或使用加Number.EPSILON修正的放大取整法，且应在最终展示前统一处理。
-
HTML页面加载快慢取决于浏览器“先看到什么、先画什么、先让用户感知到什么”：结构优先级决定渲染顺序，首屏内容可读性、无跳动、不卡顿直接决定视觉感知速度。
-
可直接用navigator.connection获取网络类型（如'4g'、'slow-2g'）和下行带宽（downlink），结合effectiveType与downlink阈值做资源调度，监听change事件动态调整，并辅以心跳检测提升准确性。
-
用Set实现数组交集：先将一个数组转为Set再用filter+has判断，避免重复创建Set；注意去重逻辑、NaN和引用类型等边界情况。
-
fr是CSSGrid中用于分配剩余空间的弹性单位，表示份数比例，常用于grid-template-columns或grid-template-rows；例如1fr2fr1fr将容器按1:2:1划分，第二列宽度为其他两列的两倍；可与px等固定单位混合使用，此时fr分配扣除固定宽度后的剩余空间；典型应用包括侧边栏固定主内容自适应、等分布局如repeat(3,1fr)，以及配合minmax实现响应式网格；fr仅在Grid布局中有效，且只作用于剩余空间。
-
必须将自定义keyframes写在theme.extend.keyframes下，值为对象，键用'0%''100%'或'from''to'，属性须为合法CSS声明（如transform:'translateX(0)'，不可单独写translateX）；再于theme.extend.animation中绑定为工具类，格式为'name':'keyframes-namedurationtiming-function'，类名使用时需配合animate-name，并确保元素初始可见或结合animate-in触发。
-
transition和@keyframes不能混用同一属性，否则会导致卡顿、跳变或keyframes不触发；二者机制独立，animation优先级更高但易冲突；应按职责分离：transition处理简单交互反馈，@keyframes处理多阶段复杂动画，并避免动态修改被占用的属性。
-
使用CSS框架可高效实现表单样式统一。1.选择Bootstrap、Tailwind等主流框架，按需选用预设类；2.采用框架提供的表单类如.form-control规范结构；3.通过主题配置或自定义CSS保持视觉一致；4.确保响应式与可访问性，正确关联label与输入框，适配多设备显示。
-
WebPush实现需三步：注册ServiceWorker并监听push事件、申请用户授权后获取PushSubscription、后端用VAPID私钥加密发送消息；须遵守HTTPS、userVisibleOnly、公私钥匹配等安全限制。
-
HTMLclass属性支持多个类名，用单个ASCII空格分隔；错误写法如逗号或分号分隔会导致仅首类生效；推荐使用classListAPI动态操作，避免字符串拼接问题。
-
帮助中心首页需用「分类导航+关键词入口」双结构，顶部固定搜索框，用<details><summary>折叠分类，标题设id锚点，CSS加scroll-margin-top避免遮挡。
-
postMessage是唯一可靠、通用且现代浏览器全支持的跨域iframe通信方案；需监听load后发送、校验event.origin、避免使用'*'、子页面早注册message监听器，并防范时序与安全风险。
-
后端必须参与用户名可用性校验，前端仅负责调用fetch并合理处理异步响应、节流、取消请求、状态码解析及setCustomValidity手动控制表单验证，同时后端需限流、缓存、明确定义规则。
-
用flex实现首字母居中需设display:flex、justify-content:center、align-items:center，父容器须显式定义等宽高（如40px），并加border-radius:50%；推荐结构为<divclass="avatar">A</div>，样式全写在.avatar上。
-
本文介绍如何在MongoDB中针对嵌套文档（如characters.scores）实现“按日期去重更新”逻辑——若指定日期已存在，则更新其score值；否则追加新条目。核心依赖$[]与arrayFilters的组合，配合$set和条件定位实现精准操作。
