前端技术文章
-
文章 · 前端 | 9小时前 | 前端 · javascript · sourcemap · 错误监控 · 线上排查 · 前端 错误监控 告警 onerror sourcemap unhandledrejection
本文用一个轻量前端错误监控方案，演示如何捕获运行时报错和 Promise 未处理拒绝，整理上报字段，并用 sourcemap 还原源码位置形成告警闭环。331 收藏 -
文章 · 前端 | 9小时前 | 前端 · javascript · 缓存治理 · localStorage · Web性能 · 前端 本地缓存 localStorage 过期时间 版本迁移 异常兜底
本文用搜索筛选条件缓存场景，演示 localStorage 如何封装过期时间、版本号、迁移逻辑和异常兜底，避免旧缓存影响页面状态。480 收藏 -
文章 · 前端 | 10小时前 | 前端 · 性能优化 · javascript · 图片优化 · IntersectionObserver · 前端 性能优化 图片懒加载 IntersectionObserver Web性能 首屏优化
本文用商品列表图片场景，演示图片为什么会拖慢首屏，并用 IntersectionObserver 实现占位、进入视口、替换地址和加载完成的懒加载流程。184 收藏 -
本文从用户连续点击提交按钮的真实场景出发，讲解前端如何用请求锁、按钮禁用、幂等请求头和失败回滚来减少重复订单、重复保存和重复消息。273 收藏 -
用一个 10 万条数据的列表场景讲清楚前端虚拟列表的核心思路：不一次性渲染全部 DOM，而是根据 scrollTop 计算可视窗口，只保留屏幕附近的行。352 收藏 -
通过搜索框实时请求场景，演示如何用 AbortController 取消过期 fetch 请求，避免旧接口结果覆盖新输入结果，并给出 React/Vue 通用封装思路。178 收藏 -
通过一个真实的按钮卡顿场景，演示如何用 PerformanceObserver 捕获 Long Task，并把重计算拆分到分片任务或 Worker 中。423 收藏 -
font-variant-numeric:tabular-nums仅在字体支持tnumOpenType特性时生效，否则被忽略；它只作用于数字字符，需配合等宽字体栈和结构分离（如数字与单位分标签）实现精准对齐。209 收藏 -
基于PerformanceAPI的全生命周期性能治理体系需以业务语义为核心，覆盖打点设计、指标生成、数据上报、预警治理四环节：打点绑定确定业务事件边界；measure前校验mark存在并分层命名；上报采用抽样、sendBeacon与缓存清理；预警须分层归因、动态基线并直连研发流程闭环。147 收藏 -
本文介绍使用原生JavaScript实现“一键联动”多个按钮的CSS激活态（如添加/移除active类），适用于无需实际触发点击事件、仅需视觉同步的场景，代码简洁可靠，兼容主流浏览器。本文介绍使用原生JavaScript实现“一键联动”多个按钮的CSS激活态（如添加/移除active类），适用于无需实际触发点击事件、仅需视觉同步的场景，代码简洁可靠，兼容主流浏览器。在构建交互式界面时，常需用一个主控按钮（如“全选”或“高亮模式”）统360 收藏 -
答案：CSSGrid中通过order和grid-area属性控制子元素显示顺序与位置。order按数值调整视觉顺序，适用于线性排列；grid-area实现二维布局定位，适合复杂结构。两者结合可灵活构建响应式页面。155 收藏 -
FIMOHTML报告默认不支持透明度，所有图形均使用纯色填充；如需实现透明度，须通过手动修改HTML、后处理脚本或切换至MEMESuite下游工具实现。393 收藏 -
CustomElements通过浏览器原生标准实现自定义HTML标签，解决组件复用、跨框架共享和封装性差等痛点，适用于构建UI库、微前端集成和渐进增强场景，需注意兼容性、框架集成和状态管理挑战。243 收藏 -
background-position动画必须用像素或百分比，禁用em/rem；需确保单位一致、容器尺寸明确、overflow:hidden裁剪、首尾帧视觉无缝衔接，且animation-iteration-count:infinite不可省略。116 收藏 -
文字大小动画不自然主因是过渡生硬或节奏不当。1.使用transition时搭配ease-in-out或自定义cubic-bezier曲线可提升平滑度；2.复杂动画可用@keyframes配合弹性timing-function实现回弹效果；3.避免频繁重排，建议设固定尺寸或用transform:scale()替代font-size变化；4.结合scale与opacity等属性优化视觉流畅性，虽牺牲实际字号变化但动画质感更佳。关键在于合理选择动画方式并精细调节缓动函数。126 收藏