前端技术文章
-
scroll-snap-type必须设在滚动容器上且满足溢出条件才能生效，其对齐精度受限于平台滚动策略，需结合JS二次校准以实现跨设备一致的卡片居中停靠。358 收藏 -
★和☆是最简星评方案，需UTF-8声明、CSS控色与大小，仅支持整数分，IE8/XP可能失效，JS动态生成宜用数字实体防编码问题。358 收藏 -
Next.js13+app目录下CSS生效需严格遵循导入规则：仅app/layout.tsx中import'./globals.css'有效；非模块CSS不可在组件内导入；CSSModules必须用.module.css后缀并按对象使用；删除next.config.js中冗余css配置；Tailwind需配置content路径；禁用_customDocument，所有样式注入须通过layout顶层import实现。358 收藏 -
Flex换行后行间距“过大”是align-content:stretch默认拉伸整行所致，它将交叉轴剩余高度均分给各行，撑开子项造成视觉错觉；应改用align-content:flex-start关闭拉伸，再配合row-gap设置固定行距。358 收藏 -
用border画箭头而非SVG或图片，因伪元素::before/::after不占DOM节点，可零JS、零资源实现单色实心三角，兼容IE8+；但不支持描边、渐变或圆角。358 收藏 -
虚拟DOM的位运算标记是Vue3在类型判断效率与内存开销间的精妙平衡，用整数二进制位标识节点身份（如ELEMENT=1、STATEFUL_COMPONENT=2），通过按位或组合、按位与快速判断，兼顾性能、内存、可扩展性与编译友好性。358 收藏 -
HTML中需转义<、>、&、"、'五字符，\_通常无需转义但混用Markdown时需写\\_；短代码用<code>加转义，多行用<pre>。357 收藏 -
sticky失效主因是祖先元素overflow:hidden/auto/scroll截断滚动上下文；需逐级检查父容器overflow值，改用clip-path替代或调整DOM结构；同时确保父容器有高度、不触发新层叠上下文，且sticky元素设top等偏移值。357 收藏 -
局部同构更新不能实现“不重刷页面却更新SEO”，SEO内容必须由服务端直出并存在于初始HTML中；局部刷新仅能安全更新与服务端输出严格匹配的子树，不得破坏已有SEO结构。357 收藏 -
大屏轮播应通过WebSocket推送轻量指令而非原始数据，前端预加载缓存数据并增量更新图表，地图和桑基图需复用配置、禁用自动布局，轮播中断须双向同步暂停状态。357 收藏 -
WebGL是浏览器内置的底层图形API，需手动编写着色器、管理缓冲区和渲染管线；Three.js是其高级封装库，提供Scene、Mesh等语义化对象。纯WebGL灵活轻量但门槛高，Three.js开发快但掩盖细节。357 收藏 -
CDN选型应优先确保源站Cache-Control可自定义，否则CDN无法缓存；静态资源需显式设置public/max-age/immutable；URL哈希优于查询参数；需验证边缘节点实际覆盖；HTTP/2推送已废弃，改用preload或preconnect。357 收藏 -
可采用五种方法将文本等格式转为标准HTML：一、在线Markdown工具；二、Pandoc命令行；三、Python脚本调用markdown与BeautifulSoup；四、浏览器开发者工具手动构造；五、VSCode插件实时渲染导出。356 收藏 -
hover过渡不生效的主因是transition未写在元素默认状态规则中，且:hover可能未真正命中目标元素；需确保transition声明在非hover规则里，并用开发者工具验证实际触发区域。356 收藏 -
confirm()是最轻量确认方案但会阻塞JS，正确做法是onclick中先confirm再调用删除函数；现代项目应自定义弹窗并确保点击确认才触发删除；服务端必须校验权限、归属及记录日志；删除后需及时更新DOM状态并处理失败反馈。356 收藏