-
reset.css的作用是抹平不同浏览器默认样式差异，通过将margin、padding等重置为统一基线（如0或inherit）提升样式可控性；现代项目更推荐normalize.css或框架内置preflight。
-
MutationObserver能异步高效监听DOM变化，适用于自动化测试中解决元素加载时序问题和竞态条件。通过创建实例并配置观察选项，可精准捕获节点增删、属性或文本变化，在回调中实现响应逻辑。相比事件委托，它能监听结构化变更，避免轮询，提升性能。在自动化测试中可封装为waitForElement函数，结合超时机制实现稳定等待；用于UI同步时需防范变动风暴、性能开销等陷阱，优化策略包括精确配置观察范围、使用attributeFilter过滤属性、回调中去重、防抖处理及及时断开观察。适用场景涵盖SPA动态内
-
使用opacity和transform结合实现弹窗动画，通过CSS过渡与类控制状态切换。1.HTML结构包含遮罩层和内容框；2.默认样式设置弹窗隐藏（opacity:0、scale:0.8、pointer-events:none），active类触发显示（opacity:1、scale:1）并启用事件响应；3.JavaScript通过添加/移除active类控制显隐；4.可监听transitionend事件在动画结束后执行操作（如隐藏DOM）。该方案性能佳，避免重排，动效流畅自然。
-
z-index决定重叠元素的堆叠顺序，需配合定位属性使用，且受层叠上下文限制，父子元素层级相互影响，合理分层可避免显示异常。
-
监听JavaScript对象属性变化的核心方法是Proxy和Object.defineProperty；2.Proxy是现代首选方案，能拦截属性的读取、设置、删除及数组方法等几乎所有操作；3.Object.defineProperty仅能监听已存在的属性，无法监听新增属性或数组变异方法，适用于属性固定的简单场景；4.Proxy通过get和set拦截实现深度监听时需递归代理嵌套对象，但存在性能开销、循环引用、对象身份变化、序列化等问题；5.数组监听在Proxy中天然支持push、pop等方法，因其内部操作会
-
计数排序是一种非比较排序算法，其核心是通过统计每个数值的出现次数并利用前缀和实现稳定排序，时间复杂度为O(n+k)，空间复杂度为O(n+k)，其中n为元素个数，k为数据范围；它仅适用于非负整数且k较小的场景，不适用于浮点数、字符串或负数，否则需额外映射；其稳定性通过从原始数组末尾逆序遍历并结合前缀和数组实现，确保相同元素的相对位置不变；常见变体包括作为基数排序的子过程，用于按位排序大范围整数；当k远大于n时，该算法在时间和空间上开销巨大，因此虽在特定场景高效，但通用性差，是一种牺牲通用性换取效率的专有排序
-
trycatch仅捕获同步异常，如throw、ReferenceError、TypeError、SyntaxError；对异步错误、事件处理器错误、Promise错误无效；需用.catch()或async/await配合；应记录e.name和e.stack；finally中抛错会覆盖原错误。
-
要正确打包CSS需使用css-loader和style-loader：前者解析CSS语法，后者将样式注入DOM。安装webpack、css-loader、style-loader及file-loader后，在webpack.config.js中配置module.rules，确保test匹配.css文件且use顺序为['style-loader','css-loader']，file-loader处理静态资源并输出至assets目录。在src/index.js中导入CSS文件，运行npmrunbuild生成
-
HTML5原生不支持RTSP，video标签加crossorigin无效；跨域问题实际发生在代理服务（如Nginx转FLV/HLS）或前端JS库（如flv.js）请求HTTP流地址时，需服务端正确配置CORS响应头。
-
HTML5模板加载动画通常在index.html的loader结构、style.css的样式规则及main.js的显隐逻辑中修改，重点搜索loader/preloader等关键词并检查CSS动画定义与JS触发时机。
-
用Tailwind更优，因其支持PurgeCSS精准剔除未用样式；Bootstrap需手动引入SCSS子模块或第三方插件压缩；Bulma/Foundation因嵌套选择器、无ESM、不可按需提取而拖慢首屏；CSS-in-JS有运行时开销，应慎用于高频交互场景。
-
:only-child选中父元素中唯一的子元素，无论标签类型，适用于动态内容中为单独元素添加特殊样式。示例中p:only-child仅高亮第一个div中的段落，因它是唯一子元素；可与div:only-child、.highlight:only-child等组合使用，实现精确控制；常用于单个通知提示等场景，提升界面适应性。
-
Canvas绘制水印图片是最可行方案：先drawImage绘制原图，再用fillText叠加半透明旋转文字，通过globalAlpha、字体、坐标和循环密度控制实现全覆盖水印。
-
使用Flexbox布局使容器垂直排列，页眉固定高度，内容区域flex:1占满剩余空间；2.通过position:sticky结合top:0实现页眉滚动时固定；3.添加padding-top避免内容被遮挡，设置z-index防止层级覆盖，确保父容器无overflow:hidden以保证sticky生效。
-
transition能平滑改变padding和margin，实现按钮悬停、菜单展开等自然过渡效果，需明确指定属性、避免使用all和auto值，并注意布局重排影响性能。
