-
在Angular应用中使用mat-select实现搜索筛选时，若多次触发filterUsers()导致jobSuggestions被覆盖为过滤后子集，则下拉列表仅显示已选/匹配项，丢失原始全量选项。本文提供基于不可变副本的可靠重置方案。
-
正确设置transition属性可实现opacity与transform的平滑过渡，.element{transition:opacity0.3sease,transform0.3sease}配合:hover状态，常用于按钮悬停、卡片上浮等交互场景，推荐使用transform和opacity因支持GPU加速，性能更优。
-
边框颜色过渡生效的前提是元素已定义完整边框（含width和style），仅设border-color无效；正确写法为border:2pxsolid#ccc并配合transition:border-color0.3s。
-
Grid容器overflow生效需限制其尺寸并设overflow:auto，或在子项上设置overflow:auto+min-width:0/min-height:0以突破默认最小尺寸保护。
-
SSR通过服务器端执行JavaScript生成完整HTML，使浏览器无需等待JS执行即可立即渲染首屏内容，显著缩短白屏时间和FCP，提升SEO与弱网体验，但增加服务端开销且需处理hydration和API兼容性问题。
-
关键CSS内联可提升页面加载速度，通过将首屏必需的最小CSS嵌入HTML头部，减少渲染阻塞。使用工具如Critical或Penthouse自动提取关键CSS，并在<head>中用<style>标签内联，非关键CSS异步加载。需控制内联体积在14KB内，按页面单独提取，避免冗余。结合preload预加载和缓存策略优化性能，提升FCP指标，是前端性能优化的基础实践。
-
最常见的原因是animation-iteration-count未设为大于1的值，默认为1导致无法往返；需配合infinite或具体次数使用alternate，并确保keyframes起止状态一致、timing-function合理。
-
混用%和fr时，百分比列先按容器宽度计算，fr列再平分剩余空间；顺序影响布局，如50%1fr1fr中后两列各得剩余空间的1/2，而非容器的25%。
-
纯CSS汉堡按钮失效的主因是DOM结构松动、transform-origin偏差或iOS点击失灵；需确保label包裹input、~选择器严格同级、每条横线独立设置transform-origin，并为label添加cursor:pointer和最小宽高。
-
通过CSS自定义滚动条样式可提升网页视觉协调性与用户体验，主流浏览器支持不同属性实现：使用::-webkit-scrollbar系列伪元素控制Chrome、Edge等浏览器的滚动条宽度、轨道背景、滑块颜色及悬停效果；Firefox则通过scrollbar-width和scrollbar-color简化设置。设计时应匹配网站主色调，如从品牌色中取色，轨道用透明度处理，深色主题配浅色滑块，并可结合毛玻璃或扁平化风格调整细节。需确保滑块最小高度30px、保持足够对比度，兼顾可访问性与跨浏览器兼容性，移动端通常无
-
用:root定义全局颜色变量需直接在:root中声明语义化变量（如--color-primary），避免嵌套或引用其他变量；使用var()时须设合法降级值，动态更新须调用document.documentElement.style.setProperty。
-
最常用可靠的CSS三角形方案是border法：宽高设为0，三边transparent，单边有色，大小由对应border-width决定；clip-path更灵活但兼容性稍差；SVG精准可交互，适合图标与动画。
-
JavaScript表单正则验证关键在于流程嵌入而非语法本身：blur触发主校验、input仅做轻量过滤；必加^$锚点防子串匹配；显式处理中文、空格、emoji；前后端校验逻辑必须一致，且后端不可省略。
-
Vue3的watch默认监听不到数组长度变化，因length属性非可写且无独立响应性；正确方式有三：①watch(arr,cb,{deep:true})；②watch(()=>arr.length,cb)；③封装操作并更新辅助ref。
-
混淆后的JavaScript代码调用并不复杂。1.混淆不会改变代码功能，只是重命名变量和函数，使其难以理解。2.调用混淆后的函数时，使用新的名称即可，如a(100,0.08)代替calculateTotal(100,0.08)。3.实际应用中需注意调试困难、代码维护、性能影响和兼容性问题。4.建议分阶段混淆，选择合适的混淆级别，并使用版本控制管理代码。
