jQuery中的一些小技巧

jQuery中的一些小技巧

一、选择器优化

jQuery选择器是我们经常使用的东西，不过有时候由于选择器的复杂度，会影响到页面的性能。我们可以通过一些技巧来优化选择器，提升页面性能。

1. 尽量使用id选择器

因为id具有唯一性，而且浏览器查找id元素的效率比其他选择器要高。

例如：

// 使用id选择器
$('#myId')

2. 不建议使用*选择器

因为*选择器会选择所有的元素，而且效率低下，会影响页面性能。可以明确指定元素类型来替代。

例如：

// 不建议使用 * 选择器
$('*')

// 替换成指定元素类型
$('div')

3. 使用class选择器前缀限定

使用类似于.myClass前缀限定的方式可以减少选择器的复杂度，提升性能。

例如：

// 选择所有class中包含'myClass'的元素
$("[class*='myClass']")

二、优化DOM操作

1. 尽可能地将操作集中在一起

在执行DOM操作时，浏览器需要重新渲染页面。如果操作不集中，会产生不必要的重绘，影响页面性能。所以，尽量将操作集中在一起。

例如：

// 不推荐写法
$('#myId').addClass('myClass');
$('#myId').attr('name', 'myName');

// 推荐写法
$('#myId').addClass('myClass').attr('name', 'myName');

2. 对DOM操作做缓存

如果要对同一个元素多次进行操作，建议对DOM元素进行缓存，而不是每次都使用选择器重新查找。

例如：

// 不推荐写法：使用选择器重复查找
$('#myId').css('color', 'red');
$('#myId').css('background-color', 'blue');

// 推荐写法：缓存DOM元素
var myElement = $('#myId');
myElement.css('color', 'red');
myElement.css('background-color', 'blue');