-
JavaScript类型系统基于值而非变量，需掌握隐式与显式转换规则；使用===避免意外转换，通过Object.prototype.toString.call()实现精确类型检测，理解falsy值（如0、''、null等）以提升代码健壮性。
-
BEM通过block__element--modifier命名强制作用域隔离，降低样式覆盖成本；禁用复杂选择器、依赖工具链校验与编辑器支持，并需配合设计令牌管理全局变量。
-
flex-direction:column将主轴设为纵向，使子元素沿Y轴堆叠；此时justify-content控制上下对齐，align-items控制左右对齐，需配合height和center值才能实现垂直居中。
-
mailto链接点开没反应，主因是参数含未编码的中文、空格、换行或符号导致浏览器截断；收件人含空格或全角字符也会失败；部分环境（如iOSPWA、企业Android平板）未注册默认邮件客户端而静默丢弃。
-
BEM通过block__element--modifier结构使类名自带三层语义：归属、角色、状态，可替代多数注释；Element命名需避免动词与样式词，强调角色与状态解耦；第三方组件应封装Wrapper以保持语义归属清晰。
-
合理使用HTML语义化标签可提升SEO与可维护性，一、用header、nav、main等标签明确页面结构；二、规范h1-h6层级，每页唯一h1，逻辑嵌套标题；三、为img添加alt描述，装饰图设alt=""，结合figure与figcaption标注图表；四、引入JSON-LD格式的Schema标记，标注文章、产品等类型及发布时间、作者等字段，并用Google工具验证；五、提升可访问性，提供按钮链接文本说明，支持键盘导航，使用ARIA属性，确保颜色对比度，time标签添加datetime属性。
-
PerformanceAPI可精准采集FP、FCP、LCP、FID、TTFB等核心性能指标，通过performance.timing、getEntries()及PerformanceObserver获取页面加载与交互数据，结合mark打点和measure测量自定义逻辑耗时，利用sendBeacon上报关键数据，实现轻量高效的前端性能监控。
-
all属性非万能，误用会破坏可访问性与兼容性；应优先精准控制属性，慎用all，避免全局应用，推荐revert而非unset或inherit。
-
使用HTML锚点或JavaScript可实现返回顶部功能。HTML锚点通过<ahref="#top">跳转，简单但无平滑效果；JavaScript调用window.scrollTo({top:0,behavior:"smooth"})实现平滑滚动，并可结合滚动事件控制按钮显示，提升用户体验。建议固定定位按钮于右下角，初始隐藏并按滚动距离显示，适配移动端与可访问性，避免固定头部遮挡内容。
-
counter-reset与counter-increment是CSS计数器机制的配对核心：前者声明并初始化计数器（如counter-reset:section;），后者在匹配元素上触发递增（如counter-increment:section;）；二者名称必须严格一致，且counter-reset必须作用于父容器才能使子元素的counter-increment有效。
-
选2D引擎更适合微信/抖音小游戏——因3D在H5环境加载慢、包体大、低端机掉帧严重；CocosCreator3.x首屏加载超8秒，而2D仅1.2秒。
-
font-display必须显式设为swap以避免首屏白屏，它用系统字体先渲染再替换；preload字体需加crossorigin、as="font"和type；只用woff2格式；启用font-optical-sizing:auto提升可读性。
-
可用纯CSS实现抽象化猫Loading动画：通过clip-path裁剪与transform逐帧驱动，配合@keyframes控制耳朵抖动（错峰延迟+非线性缓动）、眯眼呼吸（异步scaleY+自定义cubic-bezier）及顿挫式尾巴摆动（steps(2,end)）。
-
flex子项不收缩是因默认min-width:auto限制，需显式设min-width:0解除；配合flex:110、white-space:nowrap、overflow:hidden、text-overflow:ellipsis才能实现省略号效果。
-
flex居中失效最常见的原因是父容器未设display:flex，或子元素脱离文档流；需确认父容器启用flex、子元素未用absolute/floating，且父容器有明确高度。
