前端技术文章
-
移动端分栏堆叠失效的根本原因是viewport缺失、父容器未设flex-wrap:wrap、子项使用固定宽或百分比硬编码；应改用flex:1或grid配媒体查询，配合max-width和响应式gap、line-height等。353 收藏 -
加border-top:1pxsolidtransparent能打断margin塌陷，因其在父子间创建非空边界，满足CSS规范中“存在border/padding/content即阻断合并”的条件，且视觉无影响、兼容性好。469 收藏 -
column-count仅能实现视觉近似瀑布流，非真正Masonry布局；因按文档流“切片分栏”，DOM与视觉顺序错位，仅适用于纯展示、无交互、卡片高度相近场景。252 收藏 -
CSS中max-height:0与max-height:auto无法过渡，因auto不可计算；应改用足够大的固定值（如500px）并配合overflow:hidden实现动画，避免height、display:none及transition:all。262 收藏 -
id属性必须全局唯一，否则getElementById只返回首个匹配元素，锚点跳转错位、屏幕阅读器误读；表单提交依赖name而非id，混淆二者将导致后端收不到数据。180 收藏 -
font-size:0能消除inline-block间隙，因其使HTML解析生成的空白文本节点失去字号而不可见；但子元素需显式重设font-size、line-height等继承属性，否则文字消失或布局错乱。106 收藏 -
通过JavaScript操作video元素的play()和pause()方法可控制视频播放与暂停，需先用document.getElementById获取元素，结合按钮点击事件切换状态并更新按钮文本，注意浏览器可能阻止无用户交互的自动播放。476 收藏 -
内存屏障在WebWorkers中虽不直接暴露，却是保障主线程与Worker间数据可见性的底层机制；它通过CPU缓存同步、postMessage隐式屏障及Transferable的release/acquire语义起作用，带来真实同步开销。201 收藏 -
JavaScript并发控制通过Promise+队列+计数器实现，用固定槽位限制同时执行任务数（如3个），新任务入队等待空闲，running计数器跟踪运行中任务，完成即释放槽位并调度下一个。474 收藏 -
答案：通过规划页面结构、创建HTML文档、添加商品信息与交互元素，使用语义化标签构建包含图片、标题、价格、规格选择及购买按钮的响应式电商页面，并通过CSS实现多设备适配布局。209 收藏 -
关键不是“有没有滚”，而是“当前滚动位置是不是0”；应统一用Math.max(window.pageYOffset,document.documentElement.scrollTop)检测，避免依赖document.body.scrollTop，并注意自定义滚动容器需监听其scrollTop而非window。241 收藏 -
最稳妥方式是在HTML的<head>中用<link>引入GoogleFonts并添加display=swap参数，配合带系统后备字体的font-family兜底链，可有效缓解FOIT/FOUT问题。347 收藏 -
flat()仅用于数组扁平化，不参与渲染或优化层级；真正影响渲染的是用扁平数据组织组件结构、控制嵌套深度及避免冗余DOM；应结合层级标记实现逻辑扁平、视觉嵌套，并注意保留结构信息以防丢失。211 收藏 -
position:sticky必须配合top/bottom/left/right才生效，常见失效原因包括父容器overflow非visible、元素无高度、IE不支持及Safari兼容性问题。299 收藏 -
JavaScript性能优化关键是识别并解决主线程卡顿、内存泄漏和页面掉帧问题，包括批量DOM操作、合理使用节流防抖、避免闭包内存泄漏，以及用requestIdleCallback让出主线程。135 收藏