前端技术文章
-
维护页必须是纯静态HTML文件，不依赖JS、外部资源或API，所有路径均需路由至该页，并禁用缓存与搜索引擎索引，确保用户清晰获知维护状态及恢复时间。217 收藏 -
cover等比缩放确保覆盖容器但可能裁剪，contain等比缩放确保完整显示但可能留白；flex容器中背景不显常因高度坍缩为0；移动端禁用auto，优先cover+center；清晰缩放首选SVG或image-set()。125 收藏 -
WeakRef和FinalizationRegistry无法精准监听大型对象回收——GC时机不可控、回调不及时、强引用链会完全屏蔽其作用，仅能辅助验证或兜底，不可替代主动断开引用。142 收藏 -
命令模式通过将请求封装为对象，实现了请求发送者与接收者的解耦，使操作可参数化、存储、传递及撤销；它解决了复杂操作中高耦合和扩展难的问题，支持撤销/重做、宏命令、任务队列等场景；典型应用包括GUI按钮菜单、图像处理宏、异步任务队列和游戏行为控制；但其缺点是会增加类的数量，可能导致过度抽象，且撤销逻辑实现复杂，需权衡使用场景以确保收益大于成本。327 收藏 -
必须用@page{size:landscape/portrait;}强制纸张方向，transform或width/height交换无效；Chrome/Edge需提醒用户手动设置打印对话框方向；Firefox支持最准，Safari/iOS支持弱；表格需配合table-layout:fixed和列宽控制防截断。124 收藏 -
WebSocket是基于TCP的全双工通信协议，支持浏览器与服务器持续连接、双向实时收发数据；通过newWebSocket()创建实例，监听onopen/onmessage/onerror/onclose事件，调用send()发送消息，需手动实现重连与错误处理。184 收藏 -
JavaScript事件循环是单线程、基于队列的执行协调机制；宏任务（如setTimeout）执行后立即清空本轮所有微任务（如Promise.then），再取下一个宏任务，故Promise.then总先于setTimeout执行。176 收藏 -
宏任务执行完后必须清空全部微任务队列，之后才取下一个宏任务；微任务在宏任务出口处强制、不可打断地执行完毕；Promise.then与queueMicrotask同属一轮微任务，按序执行。313 收藏 -
Flex容器用gap动画会抖动是因为浏览器对gap的transition会触发整行重排重绘。正确做法是用margin、transform或伪元素模拟间隙，或确保显式声明gap、使用will-change:spacing并避免布局截断。232 收藏 -
@media(orientation:landscape)单独使用效果差，因它仅检测方向而不感知视口高度骤减、vh抖动、fixed偏移及系统UI干扰等真实问题。292 收藏 -
使用HTML的<ul>和<ol>标签分别创建无序和有序列表，结合<li>定义列表项，通过CSS的list-style-type调整符号样式，设为none可移除默认标记，再用margin和padding控制间距与缩进，提升内容可读性。345 收藏 -
preload失效主因是未严格匹配as属性、缺失crossorigin、或未将资源接入渲染流程，如字体需as="font"+crossorigin，CSS需onload切换rel，否则仅下载不生效。420 收藏 -
React是一个由Facebook开发的JavaScript库，用于构建动态、可复用的UI组件；其核心是组件化、虚拟DOM和数据驱动视图，专注高效、可维护地渲染用户界面。263 收藏 -
grid-template-areas本身不控制外层居中，需外层容器设display:grid+height:100vh+place-items:center；内部区域内容居中须单独对grid-item设置place-items或flex对齐。397 收藏 -
解构reactive对象会导致响应式丢失，因为取值是原始副本而非Proxy代理；toRefs将每个属性转为ref，使解构后仍可响应更新。406 收藏