前端技术文章
-
HTML表格布局性能问题不在于渲染慢，而在于结构绑架导致整表重排、响应式处理低效；CSSGrid初始计算略重但可控，变化边界清晰，语义正确时性能更优。114 收藏 -
原型链过深本身不会导致前端自动化测试超时，真正原因是原型方法中的重操作、原型链污染引发的隐式等待，以及递归渲染与深层原型调用的连锁反应。114 收藏 -
:has()伪类兼容性有限，Chrome105/Firefox103/Safari16.4起支持，旧版本静默失效；不支持伪元素和状态伪类；构建工具可能误删；JS监听+class切换更可靠。113 收藏 -
br标签仅用于同一语义单元内固定位置的强制换行，如地址、诗歌、表单提示；不可替代段落或布局，否则损害可访问性、响应式及国际化。113 收藏 -
应使用Number.isSafeInteger()判定安全整数，先确保字段为number类型，再验证是否在[-MAX_SAFE_INTEGER,MAX_SAFE_INTEGER]范围内且为整数；字符串ID需避免隐式转换，超长数字字符串应直接拒绝或用BigInt处理。113 收藏 -
必须用createElementNS创建SVG元素并传入命名空间URI“http://www.w3.org/2000/svg”，否则浏览器将其视为普通HTML标签导致不渲染；属性设置需区分命名空间，xlink:href等须用setAttributeNS。113 收藏 -
object-view-box不是标准CSS属性，不存在于任何规范或主流浏览器中；实际应使用container-type+aspect-ratio+@container查询，或object-fit配合aspect-ratio实现容器形状适配。113 收藏 -
打印内容被截断或空白页多，核心是浏览器未合理处理分页逻辑；应优先用break-inside:avoid保持容器完整，慎用display:none，显式声明颜色与宽度，确保表头跨页复现，并将打印样式严格限定在@mediaprint块内。112 收藏 -
微任务不是竞态防御的根本手段，仅能前端节制请求密度；根治需后端分布式锁、幂等控制与状态机协同，前后端共同构建监控闭环。112 收藏 -
manifest.json中screenshots字段必须为HTTPS绝对路径，类型为字符串数组，需托管于支持CORS的HTTPS服务器，统一用.webp格式，尺寸须符合平台要求（如GooglePlay要求1080×1920），且需配合正确设备模拟与缓存更新机制。112 收藏 -
Vue组件懒加载基于JavaScript动态导入import()语法，Vite自动识别并拆分为独立chunk，配合manualChunks分包、prefetch预取及长期缓存策略，实现按需加载与性能优化。112 收藏 -
<p>SVG圆形进度条必须用<circle>配合stroke-dasharray和stroke-dashoffset实现，因transform:rotate遮罩方案易错位、精度差且不兼容旧版Safari/安卓WebView；需rotate(-90deg)校正起点至12点方向，周长须精确计算为2Math.PIr，并用数值而非百分比设置dasharray与dashoffset，配合will-change:transform触发GPU加速以避免跳变。</p>112 收藏 -
basehref必须是绝对URL或以/开头的根相对路径，否则标签被静默忽略导致404；须置于<head>最前且唯一；仅影响HTML中纯相对路径（如logo.png），不影响JS动态请求、CSS@import等。112 收藏 -
移动端scroll-behavior:smooth不可靠，因iOSSafari15.4前不支持、X5WebView静默降级，必须用JS主动调用+运行时检测+降级兜底。112 收藏 -
基础选择器所有浏览器均支持，伪类和属性选择器在IE6-8中存在兼容性问题，建议通过降级方案、条件注释或Modernizr应对，现代开发可放心使用CSS3但需根据目标用户选择适配策略。112 收藏