前端技术文章
-
WeakMap是实现业务组件状态“硬隔离”托管的最可靠原生方案，其键必须为对象、不可遍历、无size/clear方法，且键失联后自动GC回收，确保状态与实例在语言机制层面强绑定。235 收藏 -
HTML5视频播放器无法回退Flash的主因是浏览器废弃NPAPI插件接口，旧版Video.js等第三方播放器的Flashfallback机制在Chrome88+、Firefox85+、Edge90+中彻底失效。418 收藏 -
Vue3响应式数据深拷贝应优先用structuredClone(toRaw(obj))，它支持Map/Set/Date/RegExp等且解决循环引用；老环境可手动递归实现，关键要toRaw解包、WeakMap防循环、类型特判；核心是隔离变更而非单纯拷贝。266 收藏 -
动画中断主因是@keyframes缺失0%/100%关键帧、未设animation-fill-mode:forwards，或被其他CSS/JS覆盖；需确保起止帧明确定义、启用forwards、避免样式冲突及布局属性混用。133 收藏 -
margin用于控制元素外边距，提升页面布局清晰度；支持四方向设置或统一设置，可使用px、%、auto等值；通过margin:0auto可实现块级元素水平居中；需注意垂直方向相邻元素的margin合并问题，常取较大值，可通过设置单边margin、添加border或触发BFC避免。445 收藏 -
localStorage数据永久存储且同源标签页共享，适合长期偏好和登录态；sessionStorage仅限当前标签页，关闭即清空，适用于表单草稿等临时状态；二者均只支持字符串，需手动JSON序列化，且localStorage可监听其他页变更而sessionStorage不可。483 收藏 -
overflow:hidden通过触发BFC使父ul重新包裹浮动子项、恢复高度计算和对齐基准，是兼容性最好（IE6+）的轻量方案；但需避免与float/position冲突，并注意IE8截断问题。282 收藏 -
该问题源于直接将HTML元素对象传入数学运算，而未提取其输入值；正确做法是通过.value获取字符串值，并用parseFloat()转换为有效数字后再参与计算。270 收藏 -
不等价。scale()是语义化变换，自动触发GPU合成层；matrix()是纯数值映射，部分浏览器（如Safari15–16）不主动升层，易导致卡顿或闪烁。493 收藏 -
JavaScript中阻止事件冒泡的核心方法是调用event.stopPropagation()，它终止事件向父级传播但不影响当前元素其他监听器；event.stopImmediatePropagation()更彻底，还阻止同元素其余同类型监听器执行。472 收藏 -
details+summary是最简方案但少用，因默认样式差且IE全系不支持；虽语义化、无障碍友好、性能优，但动画实现难、互斥需JS、移动端点击区优化复杂。209 收藏 -
Flex项目min-width失效主因是默认min-width:auto和flex-shrink:1共同作用；需显式设min-width:0或flex-shrink:0，并配合flex-wrap:wrap等父容器设置才能生效。249 收藏 -
标准HTML文档需在首行声明DOCTYPE：HTML5用<!DOCTYPEhtml>；HTML4.01Strict用带URL的公共标识符；XHTML1.0Transitional需xmlns属性和XML语法；HTML5完整声明需加lang和charset。192 收藏 -
本文介绍一种通用方案：使用透明遮罩层（loadingoverlay）禁用页面元素的点击、右键等交互，同时允许用户通过鼠标滚轮或触摸滑动来浏览内容，且无需修改被遮罩的原始DOM结构。253 收藏 -
纯HTML简历应语义清晰、ATS友好：用<header><section><article><time>等标签结构化内容，CSS仅需5行确保可读与打印友好，必设<title>和<metacharset="UTF-8">，图片须带描述性alt属性。160 收藏