屏幕尺寸变化切换元素选JavaScript还是CSS？性能与bug率对比

性能对比：CSS媒体查询方案更快 #

• CSS媒体查询是浏览器渲染引擎原生支持的能力，判断逻辑直接在渲染流水线的样式计算阶段执行，完全不需要占用JavaScript线程资源，也没有额外的脚本执行开销。
• 而JS监听resize事件的方案，首先resize事件在窗口拖动时每秒会触发几十次，哪怕加了防抖节流逻辑，依然要走JS线程的事件调度、回调执行、DOM属性修改的全流程，性能开销远高于原生CSS方案。

故障率对比：CSS媒体查询方案出现bug的概率更低 #

JS监听方案存在很多常见的易踩坑点：

• 容易遗漏初始状态判断：很多实现只监听了resize事件，页面首次加载时没有主动执行一次宽度判断，会导致初始渲染时元素显隐不符合预期。
• 断点判断容易和CSS规则不同步：JS获取的window.innerWidth在部分浏览器中会包含滚动条宽度，和CSS媒体查询的宽度判断基准不一致，容易出现两边断点触发时机错位的问题。
• 容易受JS执行时机影响：如果脚本在DOM未完成加载时就执行，会找不到对应元素导致控制逻辑完全失效；如果用户禁用了JS，整个切换逻辑直接不可用。
• 高频事件处理不当容易引发卡顿、内存泄漏等问题。

而CSS媒体查询的逻辑完全由浏览器原生处理，只要断点规则书写正确，基本不会出现上述问题，稳定性更高。

注：以上结论仅针对简单场景下的元素显隐切换需求，如果切换时需要伴随复杂的业务逻辑执行，还是需要结合JS实现。

内容的提问来源于stack exchange，提问作者Alexander Hemming