前端技术文章
-
CanvasRenderingContext2D实现像素级绘制需四步：适配设备像素比、全量或脏矩形清除、确保资源加载完成、用requestAnimationFrame驱动动画，缺一不可。411 收藏 -
尾调用优化（TCO）是复用栈帧避免栈溢出的机制，但主流浏览器默认未启用；尾调用指函数末尾直接返回另一函数调用结果，无后续操作。411 收藏 -
navigator.storage.estimate()是现代浏览器提供的异步API，用于估算当前源的存储已用空间（usage）和配额上限（quota），返回Promise，结果为{usage,quota}对象，二者均为动态估算值，不可精确计算剩余空间。411 收藏 -
scroll-snap-stop:always仅Safari≥15.4在触控板/触摸屏滑动时真正生效；Chrome/Edge≤120、Firefox全系静默忽略；旧版浏览器直接丢弃该属性，需结合@supports和JS校准实现兼容。411 收藏 -
ARIA属性必须在HTML原生语义无法表达组件行为或状态时精准补位；如自定义下拉需role="listbox"+aria-expanded+aria-activedescendant，模态框需role="dialog"+aria-modal="true"+aria-labelledby，动态内容区用aria-live="polite"，且须JS同步更新状态。411 收藏 -
JavaScript事件委托是将子元素事件绑定到父元素，利用事件冒泡和event.target识别目标，可减少监听器数量、节省内存、支持动态元素、降低DOM访问开销、简化逻辑维护。411 收藏 -
button内直接放SVG图标可能触发点击区域异常，因SVG默认pointer-events为auto且vertical-align为baseline，易导致空白区不可点或图标偏移；应设pointer-events:none和vertical-align:middle，并确保无障碍属性完整。411 收藏 -
new运算符执行四步：创建空对象并设置原型；绑定this并执行构造函数；按返回值类型决定最终返回对象或新对象；新对象constructor指向构造函数。411 收藏 -
HTML项目必须分目录，否则三个月后难以维护；推荐结构为根目录放HTML、css/js/assets分设子目录，统一用根相对路径（/开头）引用资源，并启用本地服务器避免file://协议问题。411 收藏 -
JavaScript中的Reflect是ES6引入的用于统一和规范化运行时对象操作的工具集，提供get、set、has等标准化方法，与Proxy协作实现可控、可组合的元编程。411 收藏 -
JavaScript中反斜杠用于转义字符，必须正确使用：\"、\'、\\、\n、\t、\r等有特定含义；模板字符串不支持\x转义；正则需双重转义；ES6推荐\u{...}和\x替代八进制。411 收藏 -
优先用getElementById（性能好、语义清），无id时用querySelector；textContent仅设纯文本并自动转义，innerHTML解析HTML但有XSS风险；批量操作用DocumentFragment减少重排；动态元素绑定事件应即时或用事件委托。411 收藏 -
360极速浏览器适配需强制viewport锁定缩放、JS动态设rem基准、媒体查询分档设1px边框、手动按DPR加载高清图，真机调试不可替代。411 收藏 -
列表项hover闪烁的根本原因是布局重排，应避免hover改变padding、border、width等盒模型属性，优先使用transform和opacity配合精准transition实现平滑动画。411 收藏 -
本文介绍如何通过JavaScript合并<th>或<td>元素自身定义的class与对应<col>元素（来自<colgroup>）所声明的class，从而准确获取单元格的“有效类名集合”。411 收藏