Question

我不是要比较Javascript上的CSS3功能，我试图知道如何决定何时陷入这种情况。我知道实现单个交互式效果的三种方法，在此示例中，当用户将鼠标悬停在div上时，内部元素将扩展其宽度和高度。

在这种情况下，我想知道哪种方法是理想的。要考虑的事情，我将瞄准现代浏览器，我支持移动设备（iPad和iPhone），我将使用jQuery和Boostrap。

1。使用jQuery，可以将其编码为：

$('#js').hover(function(){
    $('.inner',this).animate({'height':'200px', 'width':'200px'})
},function(){
    $('.inner',this).animate({'height':'0px', 'width':'0px'})
})

2。使用CSS，它看起来像这样：

#css .inner { 
    -webkit-transition: width .3s, height .3s;
    transition: width .3s, height .3s;
}
#css:hover .inner {
    width: 200px;
    height: 200px;
}

第3。最后，同时使用JS和CSS

CSS

#css.hover .inner { 
    -webkit-transition: width .3s, height .3s; 
    transition: width .3s, height .3s;
}
#css.hover .inner {
    width: 200px;
    height: 200px;
}

JS

$('#css_js').hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
})

我的小提琴： http://jsfiddle.net/pk0cf25u/

Answer 1

实际上是速度和浏览器兼容性的问题，将在下面说明。

速度虎钳：

在页面上为元素设置动画的最快方法是使用内置的浏览器库（CSS），因此使用CSS是最快的，然后使用CSS和JS，最后是JS。

为什么CSS / JS比单独的JS更快？

很简单，因为JS不需要计算然后对元素做出反应只是分配类是JS唯一的工作。

浏览器兼容性：

实际上JS和jQ的部分原因是由于这个原因，因为CSS并不总是与所有浏览器兼容，如果你的目标也是旧的浏览器，有时需要使用这些库。因此，如果你瞄准旧浏览器，那么最有效的方法就是使用JS。

总结：

如果您的目标是使用新浏览器和使用新浏览器的特殊用户，请始终尝试使用CSS而不是JS。它更快，更可靠。

否则使用JS来获得更多的浏览器兼容性，但是要尽可能地避免JS处理和计算。

注意：

我还没有真正测试过速度，但是如果你想要每个场景的确切处理速度，我确定有数百个好的网站可以测试它们。

Answer 2

<强> TL; DR

使用CSS进行演示和琐碎的行为任务。将Javascript用于目标浏览器无法使用CSS的行为任务和任务。

CSS和Javascript重叠太多，以至于在选择它们时，性能不是唯一需要考虑的因素。您还应该考虑关注点分离，用户体验和浏览器兼容性

关注点分离

如果任务是纯粹的演示（例如，在悬停时更改按钮的颜色），请使用CSS。如果任务明显是行为（例如div在点击/触摸/点上消失），请使用Javascript。遵循这个简单的规则使代码可读，可维护和多功能。它还允许在一个领域比另一个领域更熟练的人之间划分任务。

浏览器效果和用户体验

使用Javascript操作DOM可能比使用CSS执行相同的操作更昂贵。这是因为DOM的Javascript操作是由UI线程和CPU上的开发人员（可以篡改）完成的，其中CSS由浏览器控制，允许在可能的情况下将任务卸载到后台线程或GPU

拿你的jQuery示例。检查div表明div的{{1}}属性每秒都会被操纵。这意味着在UI线程上触发了Javascript tick事件的每一秒。浏览器必须重新计算style，其子项，其祖先和文档本身（重排）的新样式。然后必须重新绘制页面并重新开始流程，从而降低操作，设备和电池寿命的性能

动画尤其受到影响，因为移动设备或平板电脑等低性能硬件可能无法及时重绘，导致帧速率降低。*

浏览器兼容性

创建了像jQuery这样的库来填补旧版浏览器之间的空白。它们使开发人员能够专注于开发并减少处理浏览器不一致的时间。自CSS，网络标准和浏览器＆＃39;遵守Web标准已经使这些库不再需要用于简单的任务**，例如更改大小和颜色或div。但是，如果某些浏览器出于某种原因无法使用CSS，但可以使用Javascript，显然可以使用Javascript。

* Velocity JS和其他实用程序使用现代技术在中使用浏览器，因此情况并非如此。

** jQuery及其同类产品对于行为任务以及AJAX等更高级的操作仍然有用。

何时在CSS3上使用javascript是正确的，反之亦然？

2 个答案: