前端技术文章
-
虚拟滚动通过只渲染可视区和缓冲区元素来提升长列表性能，利用占位器维持滚动高度，滚动时动态更新元素位置与内容，核心是计算可视区域的起始索引并复用DOM，结合requestAnimationFrame优化渲染。282 收藏 -
高性能异步倒计时需用loop.time()+call_at()替代sleep实现绝对时间锚定，每次回调动态补偿调度延迟，并封装为可暂停、取消、查询剩余时间的类。425 收藏 -
text-orientation必须与writing-mode配合使用，仅设text-orientation无效；mixed是中英混排竖排的默认推荐值，使汉字直立、ASCII字符顺时针旋转90°，符合出版规范。268 收藏 -
用<inputtype="checkbox">实现品牌多选过滤需统一name（如brand）、为每个设置唯一value（如"apple"），包裹在<label>中保证可访问性与样式控制，JS通过FormData.getAll('brand')安全获取选中值数组。118 收藏 -
自定义表单控件需通过伪元素+相邻选择器绑定状态，补全浏览器前缀、隐藏原生控件、适配暗色模式与禁用态，并确保可访问性。266 收藏 -
VNode是平台无关的轻量级JavaScript对象，仅描述节点类型、属性、子节点等语义信息；Vue通过可插拔的渲染器将同一VNode树适配到Web、小程序、Native等不同平台，实现跨端复用。390 收藏 -
:only-child匹配父容器中唯一子元素，不区分类型且对空白节点敏感；:only-of-type仅统计同类型元素，容错性更高。选择依据是响应“数量”还是“类型”。341 收藏 -
推荐用<div>包裹<input>和<svg>图标，通过position:relative/absolute定位、flex布局自适应、padding-left预留空间，并确保aria-hidden="true"和aria-label保障可访问性。281 收藏 -
暗黑模式需三者协同：prefers-color-scheme媒体查询兜底、data-theme属性统一控制、localStorage持久化用户选择；缺一则导致刷新回亮色、表单失色或Safari闪屏。492 收藏 -
form属性可将表单控件关联到任意form元素，需满足：控件支持该属性（如input、button、select等）、form值严格匹配目标form的id、浏览器≥IE10。187 收藏 -
Vue3响应式是Pinia高效状态管理的根基，直接复用reactive/ref实现自动追踪与更新；storeToRefs保活解构响应性；id单例、模块隔离、自动注入保障复用与隔离；深层嵌套状态因Vue3递归代理天然可靠。343 收藏 -
JS动态改样式卡顿的根源是强制同步布局、无效图层提升及重绘未GPU加速；Performance面板中Layout/Paint/CompositeLayers异常、Rendering面板层边框缺失或红色闪烁、Styles面板Compositedlayer为false均指向具体优化点。282 收藏 -
脚本应放在</body>前最简单可靠，因DOM已构建完毕；若需放<head>，优先用defer（仅对外部脚本有效）或type="module"（默认defer行为），避免阻塞渲染。300 收藏 -
哈希路由利用URL中#后hash值变化驱动视图切换而不刷新页面，因浏览器原生规定仅hash变更不触发重载和HTTP请求，并提供hashchange事件供监听；手写核心需三步：定义路由表、解析执行当前hash、绑定监听并首次执行。479 收藏 -
答案：box-shadow与transition结合可实现按钮悬停、卡片浮起等平滑视觉反馈。通过设置box-shadow参数控制阴影效果，配合transition定义过渡时间与缓动函数，使交互变化自然流畅，如.card:hover提升阴影模拟浮起，.btn:active调整阴影模拟点击下压，关键在于合理调控阴影幅度与动画时长以提升用户体验。117 收藏