前端技术文章
-
不能直接用展开运算符拷贝FormData，因其无自有可枚举属性且不可迭代；应使用newFormData(original.entries())实现轻量化浅拷贝，兼容现代浏览器，保留多值顺序与File/Blob引用。491 收藏 -
使用align-items和justify-items可实现Grid子元素在网格单元格内垂直水平居中，前者控制Y轴对齐，后者控制X轴对齐，适用于多个子项统一居中；若需单独控制，则使用place-items或align-self与justify-self。491 收藏 -
富文本场景下服务端HTML过滤不可省略，PHP必须用HTMLPurifier或XssHtml类做最终净化，前端DOMPurify仅作体验优化；需配置白名单、禁用危险协议、显式禁止script等标签，并在入库和渲染时双重净化。491 收藏 -
@debug在编译时将变量或表达式原始值（如10px、rgba(0,0,0,0.5)）输出到终端，不生成CSS，用于快速验证逻辑；但遇null或未定义变量会报错中断编译。491 收藏 -
findIndex()返回首个匹配元素索引或-1，适用于对象数组复杂条件查找；需防undefined、正确组合条件、善用thisArg复用谓词，并避免与find()重复调用。491 收藏 -
用meta标签实现定时刷新或跳转，本质是浏览器将<metahttp-equiv="refresh">解析为等效HTTP响应头Refresh，不依赖JS、兼容性好但无状态控制、不可取消且SEO不友好。491 收藏 -
<p>SCSS中用@for循环生成递增animation-delay最简洁，如@for$ifrom1through12{.item:nth-child(#{$i}){animation-delay:#{$i*0.1}s;}}，需用#{}插值并保留单位。</p>491 收藏 -
必须用JavaScript动态修改input.type并同步处理焦点、光标、inputmode、aria-label等，才能安全兼容地实现密码明文切换；直接改type易导致值丢失、光标错位、键盘异常及可访问性失效。491 收藏 -
clip-path:polygon()是现代浏览器实现六边形最直接可控的方式，需用百分比坐标如(50%0%,100%25%,100%75%,50%100%,0%75%,0%25%)并配合明确宽高或aspect-ratio确保居中与响应式。491 收藏 -
a[href^="http"]可精准捕获HTTP/HTTPS外链，但需注意大小写敏感、HTTPS兼容及:visited伪类限制；文件与协议链接宜用[href$=".pdf"]和[href*="mailto:"]匹配。491 收藏 -
是的，OKLCH更适合作为品牌色定义空间，因其将感知亮度（L）、色度（C）和色相（H）真正解耦，调色干扰少，支持禁用态降C、深色模式调L等精准控制，但需注意浏览器兼容性、白点声明、回退写法及色彩空间一致性。491 收藏 -
应避免在循环中重复计算数组长度、滥用事件监听器、用try...catch包裹高频代码：需缓存length、用事件委托替代单元素绑定、移除非必要try...catch以提升V8性能。491 收藏 -
文章 · 前端 | 3星期前 | 定时器 · 前端 · 性能排查 · 接口请求 · 轮询 · setInterval · setInterval 页面可见性 clearInterval 前端轮询 请求堆积 定时器清理
本文从前端页面切换后轮询接口越打越多的现象开始，逐步排查重复定时器、未清理请求和页面隐藏仍轮询的问题，并用单例 timer、请求锁、隐藏暂停和卸载清理恢复稳定。490 收藏 -
Response.blob()可高效加载多媒体文件，通过fetch获取响应后调用.blob()得Blob对象，再用URL.createObjectURL()生成临时URL赋值给img或audio元素，并建议卸载前调用revokeObjectURL释放引用。490 收藏 -
html2text最稳，适合批量处理；turndown适合前端定制但已停更；pandoc高保真但丢样式；在线工具仅限临时救急。批量转HTML到Markdown首选html2text，需加-b0、-g、--unicode-snob等参数避坑。490 收藏