前端技术文章
-
hidden和block不能直接做响应式图片切换，因为它们只控制显示/隐藏，不阻止图片预加载；浏览器会提前下载所有img的src，导致带宽浪费。431 收藏 -
应优先调优VSCode设置而非换编辑器——启用大文件优化、禁用无关扩展与渲染选项，并配合rg/awk等命令行工具分工处理；内存不足时需关注swap和pagecache压力。431 收藏 -
用getBoundingClientRect()获取元素视口坐标，结合clientX/Y计算鼠标到四边距离并取最小值确定高亮方向，通过CSS变量动态控制border边框样式，配合mouseenter/mouseleave避免冒泡干扰。431 收藏 -
JavaScript的class是原型继承的语法糖，其本质仍依赖prototype、__proto__和原型链；class声明将方法挂载到prototype，extends通过设置__proto__实现继承，所有特性均可用ES5原型写法复现。431 收藏 -
AbortController是实现自动注销DOM事件监听器最简洁可靠的方案，闭包仅用于捕获signal并注入监听器，调用controller.abort()即可一行清除所有绑定监听器且无内存泄漏。431 收藏 -
Symbol是JavaScript中用于创建唯一不可变标识符的基本类型，核心用途是避免属性名冲突、实现软私有属性、支持全局共享（Symbol.for）及自定义对象行为（如Symbol.iterator）。431 收藏 -
download属性在EdgeLegacy中对PDF无效，因其PDF引擎强制内嵌打开且未实现该属性；唯一可靠方案是后端设置Content-Disposition:attachment响应头。431 收藏 -
<p>里不能放<div>，因为HTML解析器会自动闭合<p>，将<div>移至外部，导致DOM结构变为<p></p><div>内容</div>，使CSS选择器p>div失效、JS查询失败、样式错乱。431 收藏 -
通过设置flex-grow:1，子元素可在Flex布局中自动填满父容器的剩余空间，解决响应式设计中的尺寸适配问题。431 收藏 -
最可靠方案是部署到GitHubPages、Vercel或Netlify获取HTTPS链接；file://仅限本机，HTTP本地服务需同局域网且不支持HTTPS功能，微信/QQ等App会拦截非HTTPS链接。431 收藏 -
css-vars-ponyfill是IE下支持CSS自定义属性的最可行方案，它在运行时解析并替换var()，支持嵌套、calc()内使用、动态更新及媒体查询作用域，但需注意IE对calc()+var()的兼容限制和动态更新时需显式触发重计算。431 收藏 -
grid-column-gap仅控制列间间距，不处理容器左右外边距；需配合padding实现视觉等距，推荐用gap+padding+auto-fit响应式布局。431 收藏 -
用$spacersmap配@each生成边距工具类，键为语义名、值为带单位长度；margin/padding应分层map管理；响应式按需生成，方向控制用嵌套$sidesmap，单位须统一且注明约束。431 收藏 -
React的useState是异步更新的，调用setContent后状态不会立即生效，而是在下一次组件重渲染时才反映新值；因此在set调用后立刻console.log(Content)会输出旧值，而非刚设置的数据。431 收藏 -
最稳妥的文字大小设置方式是用rem单位，需配合根元素font-size和viewportmeta标签；px适合像素级微调但不适用于正文；em和%易因嵌套失控，应慎用。431 收藏