前端技术文章
-
通过JavaScript动态将scrollHeight设置为滚动位置，配合flex-direction:column布局，可确保消息容器内容新增时滚动条始终自动锚定至底部，实现类WhatsApp/微信的即时聊天体验。366 收藏 -
答案：无限滚动通过IntersectionObserver实现高效加载，提升用户体验但影响SEO和性能。需结合分页备用、URL状态更新及预渲染等策略优化。189 收藏 -
移动端window.innerHeight忽大忽小是因Safari和Chrome（iOS）地址栏收起/展开时动态调整所致；应优先使用visualViewport.height并监听visualviewport.resize事件，fallback可用screen.height结合方向与经验偏移估算。356 收藏 -
直接在header.php中硬编码<link>会覆盖WordPress主题更新、破坏样式依赖管理、导致加载顺序错乱；必须用wp_enqueue_style在wp_enqueue_scripts钩子中注册，确保依赖、缓存、路径和handle正确。323 收藏 -
Set通过Same-value-zero机制实现去重，支持原始值和引用类型唯一性判断，其中NaN被视为相同，引用类型基于地址比较，内容相同但地址不同仍视为不同值，因此需借助JSON.stringify或深比较实现内容去重。439 收藏 -
虚拟滚动通过只渲染可视区和缓冲区元素来提升长列表性能，利用占位器维持滚动高度，滚动时动态更新元素位置与内容，核心是计算可视区域的起始索引并复用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 收藏