前端技术文章
-
Vue3响应式不自动穿透Map/Set嵌套：仅结构变更（add/delete）可响应，内部对象属性修改需显式reactive包裹+模板读取触发依赖；WeakMap/WeakSet不支持响应式。402 收藏 -
直接newPerformanceObserver无法拿到LCP，因其默认不监听任何类型，必须显式调用observe()并传入{entryTypes:['largest-contentful-paint']}；且需在<head>中尽早注册并立即observe，否则易错过早期LCP。311 收藏 -
应使用Map而非普通对象存储DOM节点快照，因Map支持节点作键实现精准对齐；需在重绘前用getBoundingClientRect与getComputedStyle采集，并配合WeakMap或手动清理防泄漏；FLIP动画通过first/last快照计算位移差并invert补偿，结束后清空Map。259 收藏 -
最稳的模态框垂直水平居中方案是position:absolute/fixed+top:50%;left:50%;transform:translate(-50%,-50%)，尤其适用于宽高不固定场景。115 收藏 -
<button>在<form>内未声明type时默认为submit，导致意外提交和页面刷新；应统一显式声明type="button"或type="submit"以避免隐蔽bug。472 收藏 -
Number.isSafeInteger()是前端识别Javalong精度丢失的关键防线，因JS安全整数上限为±2⁵³−1，而Javalong范围更大，超限数值在JS中会失真；它可校验number类型是否安全，配合后端字符串化策略实现精度防护。151 收藏 -
本文详解如何在HTML中精准控制嵌套有序列表的编号类型（如A.→1.→a.），解决跨层级编号中断、重复或重置问题，并提供语义正确、可维护性强的纯HTML+CSS实现方案。301 收藏 -
使用grid-column、grid-row和grid-area可实现CSSGrid子元素跨行跨列布局，分别控制列、行及行列范围，支持起止线和span语法，适用于仪表盘等复杂布局。440 收藏 -
答案是构建四层能力结构：实现层夯实JS/TS/浏览器原理，架构层聚焦模块治理与跨端收敛，连接层强调技术与业务对齐，规划层以量化决策驱动技术演进。394 收藏 -
mask比clip-path更适合形状合成，因其通过图像定义像素级透明度，支持羽化、多形状交集及alpha渐变；clip-path仅支持硬裁剪。118 收藏 -
at()方法是ES2022引入的数组原生方法，专为支持负索引而设计，能直接、安全地访问末尾元素，无需手动计算length，且兼容类数组对象和字符串，性能优于slice(-1)[0]。459 收藏 -
最直接的文本居中方式是给父容器设置text-align:center，但仅对内部行内内容生效；Flex布局下应改用justify-content:center；绝对定位配合transform:translateX(-50%)适用于脱离文档流场景；禁用已废弃的<center>标签。429 收藏 -
Grid子项默认不继承父容器高度，需通过grid-template-rows（如1fr）定义行轨道高度，align-self:stretch仅在子项无显式高度且轨道尺寸确定时生效。477 收藏 -
最干净的纯CSS心形方案是clip-path:polygon()，兼容现代浏览器且无额外DOM；Safari14.1前需避免path()语法，推荐使用基于200×200容器的polygon坐标，并配合aspect-ratio和outline实现缩放不失真与描边。476 收藏 -
flex-wrap:wrap实现自动换行，需配合flex-basis或width控制子项基础宽度，并注意flex-shrink默认值导致的压缩不换行问题及gap兼容性陷阱。459 收藏