Question

我知道jQuery之间没有真正的区别，因为jQuery是一个JavaScript库，但我测试并编写了一个隐藏元素的函数，我使用jQuery，它在两个元素隐藏的时间之间有一点差别并且纯JavaScript版本完成得更快，而代码与不同的工具相同

function test() {
  var a=document.getElementById("test");
  a.style.width="0px"	
  a.style.height="0px"
  a.style.opacity="0"
}

function abc() {
  $(document).ready(function() {
    $('#jQtest').hide(1000)
  });
  test();
}

#test{
  width:200px;
  height:200px;
  border:1px solid black;
  background-color:#36F;
  transition:1s;
}
#jQtest{
  width:200px;
  height:200px;
  border:1px solid black;
  background-color:#36F;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type="button" id="but" value="hide show" onclick="abc()"/>
<div id="test"></div>
<div id="jQtest"></div>

小提琴：jQuery VS CSS。

Answer 1

CSS动画将比jQuery动画更准确（直到它转移到CSS动画）并且由于许多其他原因而更受欢迎，不仅限于它由GPU提供动力，因此它需要更少的资源。我有一段时间没有浏览过jQuery源代码，但是我最后一次看它仍然使用setTimeout而不是更准确的requestAnimationFrame，但即便如此，依赖于浏览器中断来驱动动画而不是更低级别功能CSS动画有。因此，除非必须，否则使用CSS动画（即使它们比jQuery动画更多的工作）。有一些简化CSS过渡的jQuery插件，例如Transit。

Answer 2

纯JavaScript总是会更快（有时候不会引人注意，但对于大/多动画更明显），而不是使用jQuery，Greensock，Angular等其他库。

在Chrome中，右键单击jQtest div并检查元素，然后点击＆＃34;隐藏显示＆＃34;按钮，你可以注意到jquery在每个步骤播放动画（宽度，高度等）时一直在操纵div的样式，直到它完全隐藏。

视觉差异并不大，但jQuery的超级大国允许这个简单的动画（大多数）在所有浏览器中工作。

用于隐藏元素的jQuery和纯css之间的区别

2 个答案: