前端技术文章
-
BEM修饰符是DOM与CSS间的契约，需JS真实更新class、CSS严格按约定书写、DevTools验证；状态混乱主因是JS未更新DOM或CSS选择器错误，而非BEM失效。106 收藏 -
识别MemoryBloat的关键在于区分可回收、有边界、符合预期的缓存占用与不可逆、持续累积的内存泄漏：前者随业务操作周期性涨落，GC后显著回落；后者表现为单向爬升、基线逐轮抬高、对象无法归零且释放失效。191 收藏 -
用border实现三角形时无法直接添加边框，因其边框本身就是构成三角形的本体；可行方案是双层伪元素叠加模拟描边，或改用SVG以获得精确、稳定、高DPI友好的描边效果。494 收藏 -
grid-template-columns和grid-template-rows需显式定义行列并确保父容器有明确宽高，否则隐式轨道和fr单位失效导致布局塌陷；repeat()更安全，fr依赖可用空间，嵌套时需逐层确认高度来源。437 收藏 -
是，Chrome、Edge、Safari等支持浏览器会自动添加清除按钮（×），无需JS或CSS实现；Firefox默认不显示，需手动处理。360 收藏 -
requestPictureInPicture()不能当可控小窗用，因其脱离DOM、无法自定义样式/交互且iOS/WebView兼容性差；真需小窗须用挂载body的fixed定位DOM方案实现。480 收藏 -
position取值决定top/left是否生效，仅relative、absolute、fixed、sticky有效；static下被忽略。relative相对自身偏移，absolute/fixed相对最近非static祖先或视口，fixed始终相对视口。261 收藏 -
应直接缓存已编译的Pattern实例，因其线程安全、不可变，避免重复compile带来的性能损耗和GC压力；推荐用ConcurrentHashMap以正则字符串为key缓存，并通过computeIfAbsent原子化管理。320 收藏 -
答案：HTML通过CSS和JavaScript实现视觉特效。利用CSStransition实现属性平滑过渡，适用于悬停效果；使用@keyframes定义复杂动画序列，如淡入淡出；结合transform进行旋转、缩放等变形操作，提升交互体验；通过JavaScript控制动画触发时机，实现滚动触发动画等动态效果。合理组合这些技术可创建丰富且流畅的页面动效，但需注意性能与用户体验平衡。375 收藏 -
device-cmyk()函数在所有主流浏览器中完全不可用，因W3C已将其标记为“at-risk”并长期搁置，各引擎均未实现解析逻辑，声明被直接丢弃且无fallback机制。341 收藏 -
本文介绍如何在R的leaflet交互地图中，为每个城市标记自动抓取并嵌入Google图片搜索结果的首张图片作为弹窗内容，包含HTML解析、动态URL构建与安全嵌入技巧。416 收藏 -
Object.preventExtensions()仅阻止对象后续新增自有属性，不影响已有属性操作；对拷贝副本无任何影响，需单独调用；它是浅层防护，不递归作用于嵌套对象。499 收藏 -
AudioWorklet通过将音频处理下沉至高优先级独立线程、直采原始PCM、精细配置AudioContext参数，并接受平台限制做折中，显著降低延迟。135 收藏 -
前端无法真正实现服务端级令牌桶限流，但可构建以“感知+反馈”为核心的客户端节流层，通过performance.now()模拟填充、X-RateLimit-Remaining和Retry-After实现自适应协同限流。305 收藏 -
元素尺寸异常主因是box-sizing未统一为border-box，导致content-box下padding/border额外增加；其次margin合并、单位混用、定位基准缺失及Flex/Grid中margin行为变化共同引发布局混乱。220 收藏