前端开发

针对移动端视频全屏问题，需注意：消除视频黑边应使用fixed定位、100dvh和object-fit:cover；确保自动播放成功必须同时设置autoplay、muted、playsinline和preload；使z-index层级生效需配合定位属性并设置pointer-events:none；采用动态视口高度dvh单位可避免横竖屏切换时画面抖动。这些技巧可

SCSS中@mixin仅在调用时展开代码模板，重复输出源于反复调用大型@mixin。避免方法包括：将静态无参样式改用%placeholder以合并选择器，原子级@mixin封装单一逻辑单元，组合型@mixin只用于动态场景，并避免在循环中@include。

:placeholder-shown伪类检测浏览器是否渲染占位符文本，而非输入框内容是否为空。它作为状态开关，配合label元素实现悬浮效果：:placeholder-shown时标签沉底，:not(:placeholder-shown)时标签上浮。需注意选择器顺序、placeholder属性存在性及浏览器兼容性，单靠该伪类无法处理聚焦状态。

在CSS中，polygon()等裁剪函数不支持变量插值，只有path()的calc()可以嵌入变量，但路径编写复杂。因此，实现动态裁剪的可靠方案是：引用内联SVG，将CSS变量通过transform属性动态控制裁剪区域，并设置transform-box:fill-box以正确定位，还需注意Safari的兼容性问题。

用组件的state控制CSS-in-JS样式时，禁止在styled函数内调用Hook，应将state计算后作为prop传入。复杂样式需提前收口判断、统一单位、避免深比较。多个样式片段用数组合并，引用稳定性通过useMemo或扁平字段保障。

TailwindCSSJIT模式未实时更新，根源在于content配置未包含目标HTML文件路径或路径格式错误，构建工具监听链路中断，以及class名拼接不当。需确保content为数组且路径精确，启用TAILWIND_MODE=watch环境变量，并使用空格分隔多个类名。

定时器不直接实现异步，而是将耗时操作从主线程剥离后控制触发时机。通过setTimeout实现一次性延迟加载，用setInterval配合状态检查实现弹性轮询，结合Promise async-await避免回调嵌套并支持超时控制，确保渲染流程不被阻塞。

具名函数表达式通过显式设置函数名，避免堆栈显示“anonymous”；结合error stack完整记录、sourcemap符号化还原及注入业务上下文，可显著提升日志报错堆栈的可读性与定位精度。

DOM节点深拷贝仅能用cloneNode(true)复制整棵子树，structuredClone()与JSON解析均不适用，因无法处理DOM元素对象。需注意事件监听丢失、表单值不同步、ID冲突等问题，克隆后需手动插入文档并重新绑定事件或修改重复ID。

调整Bootstrap5导航栏高度需修改 navbar的padding和line-height，避免使用height或min-height。响应式断点必须同步覆盖， nav-link的padding决定移动端折叠菜单高度。折叠菜单展开时需调整 navbar-collapse show的max-height，防止内容被截断。逐一验证各断点下的渲染高度可避免桌面

alert()是同步阻塞接口，冻结主线程和UI渲染；console log()是异步非阻塞日志操作。模块脚本的同步执行不影响alert的本质行为。生产环境应避免使用alert，改用console调试、自定义组件或延迟执行等替代方案。

CSS禁用按钮必须同时声明伪类`:disabled`和属性选择器`[disabled]`，防止React Vue动态禁用或SSR渲染时样式丢失。建议显式指定颜色、背景、边框及`cursor:not-allowed`。非原生按钮用class控制，并同步添加`aria-disabled`和`tabindex= "-1 "`。iOSSafari对`:disabled`

寄生组合式继承借助Object create(Parent prototype)创建子类原型并手动修复constructor，仅一次调用父类构造函数，既避免冗余执行父类逻辑，又维持完整原型链与正确实例类型，堪称最理想的继承实现方式。

link标签的media属性仅控制CSS文件的下载，不决定样式是否生效，不能用于常规响应式加载。真正适用场景是打印、高分辨率、横竖屏等完全隔离的资源。使用时需确保断点互斥、路径明确，注意兼容性及动态修改风险。

使用Plotly中通过to_html获取HTML字符串，而非write_html写入文件。设置full_html=False可生成仅包含图表的HTML代码片段，便于嵌入。参数include_plotlyjs控制是否内联JavaScript库，需根据页面是否已加载该库来权衡文件体积与自包含性，从而避免重复加载，提高加载效率。