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示例不同）。 / p>

相同的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。

在vanilla js中隐藏元素，你可以这样做： document.getElementById("El").style.display = none

它和css之间的差异非常小，它永远不会对速度产生影响。

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

3 个答案: