为页面速度删除元素JS vs CSS

Question

如果您从使用javascript（而不是CSS）显示的内容中删除元素，则页面速度是否有任何差异？

例如，如果我在侧边栏中有很多内容，但是想要在较小的屏幕上删除它，则可以这样做：

@media screen and (max-width: 1025px) {

    .sidebar { 
        display: none; 
    }
}

我不习惯使用js，但是我发现如何用jquery做同样的事情：

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

if(width < 1025) {

     $(".sidebar").remove();
}

两者在速度方面有什么不同吗？

Answer 1

CSS总是会胜过JS，但是您可以在JS中做很多事情，而CSS中却做不到。

请注意，您的JS示例仅工作一次（除非您添加onresize侦听器），而CSS示例将始终响应更改。

接下来，您的JS示例将元素从DOM中删除，而CSS仅通过将display属性设置为none来隐藏该元素（但该元素仍然存在于DOM中，并且可以与JS示例不同地进行还原）。

相等的JS代码为：

$(window).on('resize', handleWidth);

function handleWidth(){
  var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  if(width < 1025)
     $(".sidebar").hide(); // document.getElementById('sidebar').style.display = 'none';
  else 
     $(".sidebar").show(); // document.getElementById('sidebar').style.display = 'block';
};

Answer 2

CSS是最好的。 所有内容将以任何一种方式加载。 然后您就有了JS发生了！

Answer 3

在您提供的代码中，css隐藏了元素，并且删除了jquery。

在香草JS中，要隐藏元素，您可以执行以下操作： document.getElementById("El").style.display = none

那和css之间的差异是如此之小，以至于永远不会改变速度。