-
防抖和节流是前端优化高频事件的两种手段：防抖通过延迟执行，仅在事件停止触发后执行一次，适用于搜索输入等场景；节流则保证在指定时间间隔内最多执行一次，适合滚动监听等频繁操作。两者核心区别在于执行时机与频率控制，合理选择可提升性能与用户体验。
-
<inputtype="file">需用label关联或JS调用click()激活，禁用display:none或opacity:0；accept仅提示类型，校验须JS+后端；预览用FileReader读取DataURL，大文件避readAsDataURL；FormData上传注意IE11兼容性。
-
混用%和fr时，百分比列先按容器宽度计算，fr列再平分剩余空间；顺序影响布局，如50%1fr1fr中后两列各得剩余空间的1/2，而非容器的25%。
-
本文从 position sticky 写了却不吸顶的现场出发，按滚动容器、top 值、父级 overflow、高度限制和表格/弹窗布局逐步排查，并给出修复与复查清单。
-
准确检测Retina屏的核心是window.devicePixelRatio≥2，它是唯一稳定、无需polyfill的原生信号；其他方法如媒体查询、UA解析或宽高比计算均因兼容性或响应性问题不可靠。
-
text-wrap:nowrap不是标准CSS属性，根本不存在；正确写法是white-space:nowrap，它通过禁止自动换行并合并空格来实现单行显示，需配合width、overflow和text-overflow才能稳定生效。
-
函数参数解构通过对象解构+默认值实现自解释接口，提升可读性、灵活性与容错性；支持任意调用顺序、新增字段不破坏旧代码、IDE自动提示、嵌套配置分层清晰，并需用默认空对象防御null/undefined。
-
原生alert/confirm/prompt不响应Esc键，因其为同步阻塞式API，非DOM元素，不派发任何事件；仅<dialog>支持Esc触发cancel事件，且需showModal()并可preventDefault()拦截。
-
progress元素color不生效因其是替换元素，视觉由浏览器UA样式控制；必须用accent-color（Chrome93+/Firefox97+/Safari15.4+）或伪元素（如::-webkit-progress-value、::progress-value）定制样式。
-
<cite>标签仅语义化包裹被引用作品的正式标题（如书名、电影名等），不可含作者、URL、年份等元数据，且必须置于blockquote、q或描述性语句等引用上下文中使用，脱离语境则丧失语义价值。
-
CSS盒模型与伪元素::before、::after结合可提升视觉与布局效率。伪元素具独立盒模型，默认为行内元素，可通过display调整类型，依附宿主但可单独设置样式，常用于添加装饰或辅助布局。利用content、padding、border、margin控制空间，可实现角标、双重边框、渐变遮罩等效果；在布局中支持清除浮动、创建三角箭头、扩展点击区域。使用时需声明content属性，注意pointer-events交互设置，避免滥用以保性能，兼顾可访问性。掌握其组合逻辑，能在无额外DOM下实现高效设计。
-
col和colgroup不能直接设置文字颜色或背景色，因为col元素不承载内容，仅定义列结构属性，color、background-color等样式基本无效；可靠用法是配合border-collapse:collapse控制列宽和边框，文字样式需通过tbodytd:nth-child(n)、theadth:nth-child(n)等选择器作用于单元格。
-
CustomEvent的detail属性需传递不可变、结构清晰的纯数据，发送方用Object.freeze封装并校验类型，接收方必须主动校验字段存在性与类型，配合命名规范和文档约束以避免隐式耦合与数据污染。
-
理解this和原型的关键是观察调用位置与方式：调用位置决定this起点（如obj.fn()中this指向obj，f=obj.fn;f()则丢失绑定），调用方式分普通/方法/构造/显式四种；原型是委托查找链，实例通过__proto__沿prototype链向上查找属性。
-
浏览器不支持在@media中定义或重定义@keyframes，必须用不同名称的@keyframes配合animation-name在媒体查询中切换，并统一使用小写中划线命名、添加-webkit前缀以兼容旧版Safari和IE11。
