前端技术文章
-
用window.onpagehide替代beforeunload/unload是解决移动端退出存盘失败的核心方案，仅当event.persisted===false时保存，配合sendBeacon和freeze事件，并服务端落库实现跨设备连续性。414 收藏 -
HTML文件需先格式化再diff，否则90%差异为格式噪音；推荐tidy或prettier标准化，浏览器端用diff2html可视化，语义级对比须用lxml或html5lib解析DOM树。414 收藏 -
直接newInputEvent('input')无法触发Vue/React响应式更新，因为该构造函数不修改input.value，而框架依赖value变更与事件协同；必须先手动赋值再dispatch事件。414 收藏 -
动画卡顿本质是主线程被密集计算阻塞，增量步进通过分阶段、交替执行、写入屏障实现错峰处理，可类比用于动画：帧粒度拆分、Worker卸载计算、异步批处理。414 收藏 -
无限滚动需预判加载（如距底300px触发），用节流/防抖控频，推荐IntersectionObserver监听底部占位元素实现轻量提前加载，并处理失败重试、无数据提示及监听器清理。414 收藏 -
setTimeout延迟不准是因为它只保证最早执行时间，实际执行需等待任务队列清空和主线程空闲，可能被同步代码、微任务或高优先级宏任务阻塞。414 收藏 -
fetch触发OPTIONS预检当使用PUT/DELETE等非常规方法、含自定义请求头或非标准Content-Type时；前端可降级为简单请求规避，但需后端配合，且credentials需显式设为include并配对应响应头。414 收藏 -
HTML中实现文字闪烁效果，推荐使用CSS的@keyframes定义动画，通过控制opacity属性在0和1之间切换，并结合animation属性实现持续闪烁，如设置animation:blink1sstep-startinfinite可创建频率为每秒一次的明显闪烁，此方法兼容性好且简洁高效，适用于提示信息等场景，但需避免过度使用以防影响用户体验。414 收藏 -
全选checkbox失效主因是事件绑定时机不当、子项状态变更未同步更新全选框、动态添加商品未用事件委托及DOM与数据不同步；需确保DOM加载完成再绑定、双向监听、事件委托及数据状态同步。414 收藏 -
animation.finished不触发通常因动画被取消或未启动；需用.catch捕获cancel、确保元素已渲染、立即链式调用并保留引用，避免GC导致Promise失效。414 收藏 -
Symbol.for()跨包“失效”是因为不同Realm或polyfill导致全局registry不共享；可靠方案是统一导出权威Symbol实例，或退用带命名空间的字符串key。414 收藏 -
纯前端无法真正触发Webhook，但可用form模拟请求体或fetch发送JSON；需显式设Content-Type、JSON.stringifypayload，并避免file://协议限制。414 收藏 -
闭包能访问并记住定义时的作用域变量，实现私有变量、模块化和回调上下文，但因持久引用易致内存泄漏，需及时解绑事件、清除定时器、避免长期持有大对象或DOM引用，显式断开无需的引用以助垃圾回收。414 收藏 -
使用HTML5语义标签和CSSGrid/Flexbox创建响应式卡片布局，提升可访问性与用户体验。414 收藏 -
JavaScript中将数值转为十六进制字符串最常用的是toString(16)方法，它简洁、原生支持；注意小数被截断、负数带负号、大整数需用BigInt保证精度，补零需配合padStart()。414 收藏