-
浏览器缓存策略决定JavaScript脚本是否重复加载，从而影响执行次数；强缓存或协商缓存下脚本只执行一次，缓存失效则导致重复初始化、事件重复绑定等异常。
-
auto-fill会创建尽可能多的轨道并保留空白，auto-fit则只创建有内容的轨道并拉伸填满空间。例如容器宽500px、最小列宽100px时，auto-fill始终生成5个轨道（空位保留），而auto-fit仅生成实际需要的列数并扩展占满剩余空间，实现紧凑布局。区别在于是否保留空白轨道。
-
深拷贝创建完全独立的新对象，所有嵌套层级均复制；浅拷贝仅复制第一层，嵌套对象仍共享引用。关键区别在于修改副本是否影响原对象：浅拷贝下顶层属性互不影响，但嵌套对象修改会同步；深拷贝则彻底隔离。
-
JavaScript模板字符串使用反引号包裹，通过${}插入变量或表达式，支持多行文本和标签模板，适用于动态生成HTML、构造URL等场景，提升代码可读性与安全性。
-
预加载资源前须检测fetch()或XMLHttpRequest支持性，降级时设xhr.responseType='arraybuffer'，确保document.readyState为'interactive'或'complete'后再执行，linkrel="preload"需配crossorigin与精确as值，批量预加载需节流并发、区分大文件延迟加载，并校验MIME类型与缓存策略。
-
必须写<metaname="viewport"content="width=device-width,initial-scale=1.0,viewport-fit=cover">，否则iOSSafari横屏或刘海屏下页面被系统UI裁切；需配合env(safe-area-inset-*)变量与CSSfallback（如max(12px,env(...))）实现安全区域适配。
-
最直接方案是display:inline-block，但需处理空白符缝隙；现代推荐flex（需设flex-wrap:nowrap）或grid（需定义grid-template-columns）；float已淘汰。
-
text-align-last在Chrome/Firefox中需配合text-align:justify才生效，仅设text-align-last无效；它只作用于最后一行，单行时直接控制对齐；IE/Safari支持有限，兼容方案可用justify+::after伪元素撑开，但易错位；末尾空白或内联元素会干扰判定。
-
关键在于正确组合auto-fit与minmax()并确保父容器为块级且有明确宽度约束；若容器无宽、被inline-grid或fit-content限制，或子项未设min-width:0/width:100%，则列数响应失效。
-
本文详解在React应用中安全嵌入API返回的第三方HTML内容的方法，重点解决样式污染、脚本执行和资源加载异常问题，推荐使用<iframe>隔离方案，并提供可落地的sandbox安全配置与备用DOM解析策略。
-
Less中calc()仅原样输出，自动宽度计算需用percentage()、unit()、round()等内置函数在编译期运算；避免单位混用和旧版兼容问题，关键区分编译期与运行时计算。
-
Flex实现头像+文本左对齐布局的关键是display:flex+align-items:center，头像设flex-shrink:0，文字区域用flex:1，禁用justify-content:space-between，改用默认flex-start。
-
max-width:100%单独对浮动图片无效，因浮动元素脱离文档流，父容器高度坍缩且包含块可能非预期父级；须配合BFC（如overflow:hidden或display:flow-root）才能生效。
-
JavaScript无原生注解，但可通过JSDoc、TypeScript装饰器或对象字面量等方式模拟标注枚举值，如用对象封装value、label等元数据，或结合reflect-metadata运行时读取，实现类似Java注解的效果。
-
通过box-shadow与transition结合实现卡片悬浮效果，先设置基础阴影与过渡动画，再于hover状态增加阴影偏移与模糊值，配合多层阴影和cubic-bezier缓动函数，增强视觉层次与立体感。
