前端技术文章
-
位图可将布尔状态压缩至1位/状态，内存节省87.5%：用uint64_t数组存储，每单元管64状态，100万状态仅需125KB；核心操作包括位索引映射、置位、清零与查询；工程中需封装、对齐、用SIMD指令优化。378 收藏 -
PerformanceAPI通过高精度时间戳提供页面加载、资源请求等性能数据。1.使用performance.now()获取精确时间；2.用mark和measure测量自定义逻辑耗时；3.通过navigation条目计算DNS、TCP、白屏等关键指标；4.利用PerformanceObserver监听动态资源加载。结合上报机制可构建完整前端监控体系，持续优化用户体验。200 收藏 -
滚动条挤占内容宽度是浏览器默认行为，非bug；最优解是html元素上使用scrollbar-gutter:stable配合overflow-y:auto，不支持时降级为html{overflow-y:scroll}。457 收藏 -
福昕PDF编辑器转HTML最稳，但无法完全保形；它兼容中文排版与表格，支持手动选页，转换后HTML含内联样式和table标签，需人工优化语义结构。109 收藏 -
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 收藏