前端技术文章
-
video标签中muted必须为无值布尔属性，写成muted而非muted="true"；autoplay与muted需同时作为HTML属性存在，JS后设无效；defaultMuted仅影响首次加载，实际应使用muted控制静音。184 收藏 -
requestAnimationFrame适用于需与屏幕刷新率同步的连续视觉更新，如滚动视差、Canvas绘图等；一次性动画应优先用CSStransition。其核心是递归调用加时间戳控制，使用浏览器提供的高精度timestamp，避免Date.now()。216 收藏 -
识别隐藏性能退化需建立带基线的自动化流水线：LighthouseCI通过多次采样、历史对比、业务阈值断言及CI集成，将偶然检测变为持续守门，精准定位LCP、CLS等指标恶化并驱动团队响应。280 收藏 -
CSS变量不继承，var()沿DOM向上查找最近生效定义；应将变量定义在组件根元素（如.user-card）实现局部作用域，避免:root全局污染；all:unset仅适用于不可控第三方内容兜底，非解决变量冲突方案。415 收藏 -
box-sizing:border-box和line-height是解决input与button高度不一致最稳定方案；需统一设置并加浏览器前缀，同时重置outline、border，button需type="submit"并处理移动端touch-action与缩放。440 收藏 -
安全引入第三方CSS库需确保来源可信、校验完整性和实施策略限制，具体包括：使用HTTPS协议从知名CDN（如jsDelivr、unpkg）引入并指定版本号；添加SRI完整性校验防止资源被篡改；配置CSP策略限制样式源仅限于自身和可信CDN；对高安全性要求项目建议本地托管以降低依赖风险。405 收藏 -
accept属性仅前端提示，不校验文件真实类型；必须结合文件名后缀与后端magicbytes双重校验，且multiple上传时无法自动过滤混合类型。165 收藏 -
必须用display:none才能让元素彻底消失、不占位、不影响布局；visibility:hidden仅透明化但保留盒模型参与布局，opacity:0仍可交互且性能开销最大。274 收藏 -
SCSS中应基于基础单位$spacing-unit派生语义化spacingmap，并封装spacing()函数支持方向参数与fallback，配合命名空间utilityclass和ESLint约束，实现可维护、可扩展的间距管理。371 收藏 -
因为.container的width始终为100%，但实际渲染宽度由断点媒体查询中的max-width决定；例如在≥1200px视口下，computedwidth显示1140px，正是@media(min-width:1200px){.container{max-width:1140px}}生效所致。422 收藏 -
BOM是浏览器厂商实践形成的事实接口，核心为window对象，它映射浏览器窗口、承载全局作用域，并提供弹窗、窗口管理、尺寸控制及事件监听等功能，协同location、history等子对象工作，但受安全策略限制。130 收藏 -
Array.prototype.with是ES2023新增的不可变数组方法，用于安全替换单个索引元素；它不修改原数组，仅接受数字索引和新值两个参数，越界或负数索引会抛出RangeError。249 收藏 -
quoted()和unquoted()仅作用于字符串字面量，不支持运行时计算结果；动态拼接应优先使用插值（@{...}），真正字符串操作需依赖Less4.0+的JS函数。316 收藏 -
可直接将URLSearchParams实例传给fetch的url参数，无需手动拼接；它自动编码（如中文转%E5%BC%A0%E4%B8%89），支持动态增删参数，服务端可原生解析。107 收藏 -
TextEncoder和TextDecoder仅支持UTF-8编码转换，不处理HTML实体、GBK等其他编码；encode()返回UTF-8字节而非码点；需复用实例、注意流式解码与浏览器兼容性。277 收藏