什么时候在 CSS3 上使用 javascript 是正确的，反之亦然？ [关闭]

Question

我不是想比较 CSS3 和 Javascript 的特性，我想知道在遇到这种情况时如何决定。我知道实现单个交互效果的三种方法，在这个例子中，当用户悬停在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 的style 属性每分每秒都在被操纵。这意味着每分每秒都会在 UI 线程上触发一个 Javascript 滴答事件。浏览器必须重新计算div、其子代、祖先和文档本身的新样式（重排）。然后必须重新绘制页面并重新开始该过程，这会降低操作性能、设备和电池寿命

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

浏览器兼容性

创建 jQuery 等库是为了填补旧浏览器之间的空白。它们使开发人员可以专注于开发并花费更少的时间来处理浏览器的不一致问题。由于 CSS、Web 标准和浏览器对 Web 标准的遵守使这些库不再需要用于琐碎的任务**，例如更改大小和颜色或 div。但是，如果浏览器由于某种原因不能用 CSS 做某些事情，但可以用 Javascript 做，那么显然使用 Javascript。

*Velocity JS 和其他实用程序使用现代技术与浏览器一起工作，因此情况并非总是如此。

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