-
优先用overflow-wrap:break-word，它只在单词整体放不下时才断行，优先保全语义完整性；word-break:break-all会无差别切割任意字符，仅适用于日志ID等纯数据场景。
-
不能。inputmode="tel"仅是提示，不强制弹出拨号键盘；iOS拨号键盘需type="tel"且无干扰属性（如严格pattern、maxlength或preventDefault），真正唤起拨号界面须用href="tel:..."链接。
-
应优先使用功能检测而非解析userAgent，仅在必要时谨慎解析并交叉验证；Chrome/Edge/Firefox/Safari版本提取需按优先级顺序正则匹配，并结合navigator.vendor/product辅助验证。
-
script标签应默认放在</body>前，确保DOM就绪且不阻塞渲染；必须放<head>时用defer，独立脚本可用async；路径以HTML所在目录为基准；type="module"启用严格模式并隔离作用域。
-
用newSet()替换权限数组可将权限判定从O(n)降为平均O(1)；支持原子增删、自动去重、批量同步及链式组合判断，提升性能与安全性。
-
HTML乱码根本原因是文件实际编码与<metacharset="UTF-8">声明不一致，必须同步修正二者；<meta>须置于<head>最前且无BOM/空格干扰，HTTP响应头charset优先级更高，外部资源也需统一UTF-8无BOM。
-
直接在@media中重写grid-template-columns即可响应式切换：小屏用1fr单列，中屏用repeat(2,minmax(300px,1fr))，大屏用repeat(auto-fit,minmax(350px,1fr))，优先以minmax()配合fr实现弹性列宽，避免固定像素导致溢出。
-
要消除动画首帧延迟，需用will-change精准预告即将变化的transform或opacity等可合成属性，并在交互时动态添加、动画结束立即移除，配合DevTools验证图层是否真正生成。
-
mix-blend-mode是元素内容与下方堆叠上下文（如父背景、兄弟元素、video等）的混合，生效关键在于结构：需同级定位+下方有可混合内容，且避免isolation、opacity、filter等隐式创建层叠上下文的属性。
-
ARIA属性必须在HTML原生语义无法表达组件行为或状态时精准补位；如自定义下拉需role="listbox"+aria-expanded+aria-activedescendant，模态框需role="dialog"+aria-modal="true"+aria-labelledby，动态内容区用aria-live="polite"，且须JS同步更新状态。
-
直接写input,select,textarea{...}会因浏览器默认样式差异大、伪元素遗漏、可访问性破坏及影响自定义组件而引发问题；应分类型重置、保留焦点样式、用带前缀的appearance:none并限定作用域。
-
::selection仅支持color、background-color、text-shadow等极少数属性；需注意user-select控制、选择器优先级、全局作用域、浏览器前缀及移动端兼容性问题。
-
JavaScript事件委托是将子元素事件绑定到父元素，利用事件冒泡和event.target识别目标，可减少监听器数量、节省内存、支持动态元素、降低DOM访问开销、简化逻辑维护。
-
最轻量图片对比滑块用HTML+CSS+JS实现：两张图绝对定位叠放，range控件实时绑定clip-pathinset裁切（推荐--p变量写法），监听input事件；需等图片onload后初始化，处理加载失败、宽高比不一致、移动端touch-action及Safari兼容性问题。
-
Canvas频繁绘制导致内存泄漏的典型表现是页面卡顿、FPS下降、JS堆持续增长且GC后不回落，主因是每帧新建Image/Canvas/路径对象未释放引用，或事件监听器未解绑；应复用离屏canvas、ImageBitmap缓存、对象池及前置样式设置，并避免getImageData、measureText等高频分配操作。
