前端技术文章
-
SVG位移滤镜的scale按通道值相对0.5的差放大采样偏移。本文用固定色示例说明偏移范围、反向采样、坐标单位和滤镜裁切，避免把scale直接当作屏幕移动距离。352 收藏 -
content-visibility: auto 能跳过屏外内容，但占位尺寸估计不当会让滚动时页面跳动。本文用 contain-intrinsic-size 给卡片提供接近真实高度的布局尺寸，并说明 auto 记忆值、网格场景和降级边界。351 收藏 -
通过三槽位卡片示例，说明 CSS subgrid 如何共享父网格行轨道，并处理响应式排列、缺失字段、长文本和不支持环境的降级。349 收藏 -
Web Locks API 能让同源标签页和 Worker 围绕同一锁名协调任务，但默认排队只避免并发，不会自动消除顺序重复。本文讲清 ifAvailable、锁内完成标记、长期持锁和服务端幂等的组合方式。348 收藏 -
SVG 图形想要等比填满容器，关键是同时设置合理的 viewBox 和 preserveAspectRatio：meet 保留完整图形，slice 铺满但可能裁切，none 才会允许非等比拉伸。本文按留白、裁切、变形和对齐问题给出可直接套用的写法。347 收藏 -
fetchpriority 是浏览器的图片获取优先级提示。本文说明如何识别首屏关键图片，只给 LCP 候选设置 high，并处理 lazy、CSS 背景、preload、srcset 与验证边界。343 收藏 -
ResizeObserver 循环通知通常来自回调修改了被观察尺寸。本文按读取、去重、帧合并和生命周期清理的顺序，给出切断布局反馈环的实用修复方式。342 收藏 -
用 Intl.Locale.getWeekInfo 读取地区的首日、周末日和最小周数规则，解决 Date.getDay 编号差异与旧浏览器兼容问题。342 收藏 -
JavaScript Range.comparePoint 返回 -1、0、1，用来判断节点加 offset 组成的坐标点位于选区之前、范围内部还是之后。本文同时比较 isPointInRange 与 compareBoundaryPoints 的适用边界。341 收藏 -
用 JavaScript URLPattern 声明带命名参数的路径，区分 test 与 exec 的用途，读取 pathname.groups，并处理正则约束、斜杠、主机和大小写边界。340 收藏 -
用一个 SVG clipPath 组合圆形、矩形和路径等多个裁剪形状，再通过 clip-path 让目标分组共享显示范围；同时解释 userSpaceOnUse、objectBoundingBox、固有几何边界和 pointer-events 的关系。337 收藏 -
SVG pattern 默认用 objectBoundingBox 解释平铺单元的 x、y、width、height，图形尺寸变化时图案也会跟着缩放。本文用 userSpaceOnUse 固定重复图案大小，并区分 patternContentUnits、viewBox 与 patternTransform 的作用。336 收藏 -
SVG 的 preserveAspectRatio 用 meet 保留完整 viewBox 并允许留白，用 slice 铺满 viewport 并允许裁切；再结合 xMin、xMid、xMax 与 Y 方向对齐关键字控制结果位置。336 收藏 -
用 Vue 组合式函数封装 AbortController、请求序号和 onUnmounted 清理，处理重复请求、旧响应回写、组件卸载与 SSR 边界。335 收藏 -
TextMetrics.width 表示文本的行内推进宽度，而 actualBoundingBoxLeft 与 actualBoundingBoxRight 描述相对于 Canvas 对齐点的可见字形边界。本文用公式和原创 Canvas 示例说明两者的区别及选用场景。335 收藏