重绘：
使用js改变网页的背景颜色 浏览器会把整个网页的颜色重新在画一遍，导致性能降低
回流：
只要改变某个DOM对象的宽或者高，浏览器就会重新再计算网页结构，重新生成一次，导致性能严重降低。
CSS样式的性能比JS性能更高，所以能使用CSS的就不要使用JS控制。
修改样式有三种方式：
1，直接在CSS中修改样式，比如hover:
.dropdown-active 是父元素
.dropdown-active,
.dropdown-active:hover {
background: #fff;
}
.dropdown-active .dropdown-toggle,
.dropdown-active:hover .dropdown-toggle {
border-left: 1px solid #cdd0d4;
border-right: 1px solid #cdd0d4;
}
.dropdown-active .dropdown-layer,
.dropdown-active:hover .dropdown-layer {
display: block;
}
2，使用JS添加一个类名 .dropdown-active
$(‘.dropdown‘).hover(function() {
$(this).addClass(‘dropdown-active‘);
}, function() {
$(this).removeClass(‘dropdown-active‘);
});
3，性能最差，而且还复杂的一种，直接在JS中控制样式：
$(‘.dropdown‘).hover(function() {
var $this = $(this);
$this.css({
background: ‘#fff‘
});
$this.find(‘.dropdown-toggle‘).css({
background:‘#fff‘,
‘border-left‘:‘1px solid #cdd0d4‘,
‘border-right‘:‘1px solid #cdd0d4‘
})
$this.find(‘.dropdown-layer‘).css({
display:‘block‘
})
$this.find(‘.dropdown-item‘).hover(function(){
$(this).css({
‘background‘:‘#f3f5f7‘,
color:‘#4d555d‘
});
},function(){
$(this).css(‘background‘,‘#fff‘);
})
}, function() {
var $this = $(this);
$this.css({
background: ‘#f3f5f7‘
});
$this.find(‘.dropdown-toggle‘).css({
background:‘#f3f5f7‘,
‘border-left‘:‘1px solid #f3f5f7‘,
‘border-right‘:‘1px solid #f3f5f7‘
})
$this.find(‘.dropdown-layer‘).css({
display:‘none‘
})
原文：https://www.cnblogs.com/Knowledge-is-infinite/p/11390763.html