前端技术文章
-
::file-selector-button仅在type="file"的input直接子元素上生效，需设display:block/inline-flex；不可用display:none或visibility:hidden；Firefox117+才支持；仅支持有限样式属性，appearance:none须作用于input本身而非伪元素；点击区域由input尺寸和定位决定。263 收藏 -
1、使用debugger语句可在开发者工具中触发断点暂停执行；2、通过async/await与Promise实现异步延时等待；3、利用条件轮询模拟暂停逻辑；4、通过HTML层面控制脚本加载时机以达到暂停效果。263 收藏 -
requestAnimationFrame是实现流畅动画的推荐方式，它自动匹配屏幕刷新率、后台暂停、提供高精度时间戳，并需递归调用形成循环；而setInterval/timeout无法对齐刷新、易丢帧且不节电。263 收藏 -
用:checked伪类替代:hover可实现移动端可控的点击展开/收起菜单，需将checkbox与菜单置于共同父容器内、菜单设position:absolute且父容器设position:relative，配合max-height过渡动画，并完善可访问性。263 收藏 -
display:none是唯一真正移除渲染的方式，元素从渲染树中完全剔除、不占空间、不响应事件、JS查询尺寸为0，适合权限控制和条件渲染，但频繁切换会触发重排。263 收藏 -
padStart能补零是因为它专用于字符串左填充，但数字类型需先转字符串（如String(5).padStart(2,'0')），否则报错或语法错误；注意getMonth()需+1再补零。263 收藏 -
gl.createBuffer()返回null说明WebGL上下文无效，需先检查gl是否为有效WebGLRenderingContext，确认canvas已正确获取上下文且未丢失。263 收藏 -
WeakRef单独无法支撑图像资源池，因其仅提供“可能还活着”的引用通道，不通知回收时机；必须搭配FinalizationRegistry才能触发自动清理，否则缓存条目堆积、deref()频繁返回undefined导致重复加载与内存泄漏。263 收藏 -
JavaScript前端视频滤镜通过Canvas逐帧获取并修改像素数据实现，核心是实时绘制与合成而非文件重编码；需降采样或OffscreenCanvas+WebWorker优化性能。263 收藏 -
Memoization的核心是用空间换时间，通过缓存纯函数的计算结果提升性能；关键在于为数组输入生成稳定可哈希的键（如JSON.stringify），并注意适用场景与限制。263 收藏 -
位运算符在JavaScript中适用于取整、奇偶判断、变量交换、权限管理和数组索引截断等场景，通过直接操作二进制提升性能，尤其在高频计算中仍有优势，但需权衡可读性与维护成本。263 收藏