前端技术文章
-
CSP本身不拖慢XSS防御，但配置错误会让它形同虚设；它是一道零开销的声明式防线，真正风险在于误配unsafe-inline、nonce复用或忽略输入输出编码等基础防护。190 收藏 -
能，但需正确实现：aria-label失效常因语义缺失或交互劫持；role="button"比div+onclick可靠因其显式声明交互意图并支持键盘焦点；aria-live需注意polite/assertive行为、DOM更新方式及初始存在；表单必须用显式label或aria-labelledby而非placeholder；焦点管理是动态组件可访问关键。240 收藏 -
order属性按数值从小到大排序视觉渲染顺序，负值优先，相同时按DOM原始顺序；仅作用于flex子项，不影响DOM、可访问性及焦点顺序。344 收藏 -
outline不占布局空间且环绕元素绘制，常用于焦点提示；通过outline-color、style、width设置样式，配合outline-offset控制偏移，提升可访问性。275 收藏 -
应主动终止跳转前pending的AJAX请求：fetch用AbortController.abort()，XMLHttpRequest调用xhr.abort()；跳转后勿发请求，改由目标页自行加载；beforeunload中禁用异步操作，改用sendBeacon上报；SPA中需在组件卸载时清理请求。449 收藏 -
Number.isSafeInteger()不能单独完成数据入库前的原始类型校验，它仅判断已是number类型的值是否为安全整数，不转换类型、不处理字符串等其他输入。114 收藏 -
pointer-events:none仅禁用事件响应而不影响视觉样式，元素仍显示但点击穿透；需配合-webkit-tap-highlight-color:transparent消除点击高亮，且不继承，子元素须显式设auto才可响应。403 收藏 -
HTML5页面模糊通常由Windows非整数缩放、浏览器DPI渲染策略或Intel核显驱动过旧导致，而非HTML5标准本身问题；应优先设系统缩放为100%、启用Chrome高DPI支持参数并更新Intel官方显卡驱动。250 收藏 -
HTML文件必须保存为UTF-8无BOM编码；<metacharset="utf-8">须置于<head>内最前；服务器响应头Content-Type优先级最高；AJAX中文乱码需后端设charset或JS显式指定MIME类型。145 收藏 -
display:none完全移出可访问性树，visibility:hidden保留在树中但不可见，aria-hidden="true"仅屏蔽辅助技术读取。三者对屏幕阅读器影响不同，需依语义和交互需求选择。153 收藏 -
合并CSS文件能提升加载性能，因其减少关键路径上的网络往返次数，缓解浏览器并发请求限制导致的排队阻塞；但需区分场景：基础通用样式应合并，路由专属或条件样式应按需加载。100 收藏 -
Proxy本身不提供回滚或审计能力，但可作为统一钩子，在set/deleteProperty中触发快照、比对与日志；需结合外部系统实现持久化、权限校验与通知闭环。406 收藏 -
flex-basis:content经常不生效，因浏览器支持有限且仅在特定条件下触发内容宽度计算，常回退为auto；验证需查Computed样式中是否显示content。304 收藏 -
本文详解Canvas2D上下文中translate()与drawImage()坐标系差异导致的图像错位问题，通过修正旋转中心点（从左上角改为图像中心），实现精准、无偏移的图像旋转。330 收藏 -
navigator.vibrate仅在ChromeforAndroid、FirefoxforAndroid、SamsungInternet等现代安卓浏览器支持，iOSSafari完全禁用且navigator.vibrate为undefined。270 收藏