简单的jQuery入门指引(2)

如果你进行操作的DOM部分是已经显示的页面的一部分,那么你就是在进行一个现场更新。现场更新需要浏览器重新计算尺寸,涉及到重绘(repaint)和回流(reflow),有较高的性能花费,因此应减少使用。

在新增内容时,建议先把要新增的代码段合并完全,最后再使用单个append()方法添加到页面。而如果元素存在复杂的交互,比如反复地添加和移除,detach()这个针对性的方法就是最佳的选择。
7.不在不必要的时候使用jQuery方法

$('.nav_link').bind('click', function() { console.log('nav id: ' + $(this).attr('id')); //bad

$.data(elem, key, value); //significantly faster

};

jQuery方法不一定是最好的方法。这里使用$(this).attr('id')获取当前事件元素的ID,为当前事件元素创建了jQuery包装集,然后调用attr()属性获取方法。但这都是额外的性能花费。事实上,this在事件函数内就表示当前事件元素,直接使用this.id就可以获取元素ID,这种原生DOM属性的写法要更快。
8.适当使用jQuery工具函数

操作jQuery包装集的方法(也就是写在$.fn中的方法),其中一部分也有作为jQuery工具函数(直接写在$中的方法)的同类方法。由于jQuery工具函数在使用中不涉及创建jQuery包装集,因此,在部分情况下,可以通过换用jQuery工具函数提升性能。

比如,在DOM中存储数据,一般的做法是:

$('#elem').data(key, value); //common way

但改为下边的写法会快很多:

需要的注意的是,虽然下面这种方法更快,但作为参数传入的元素不能用选择符,而要用元素本身。
结语

我自己整理和写本文内容时,也感觉很有收获。jQuery是一个很强大的工具,但进一步说,也只提供了web开发的最基本的内容,更高级更复杂的内容,还需要自己不断学习和创作。在这个过程中,遵循最佳实践,养成良好的习惯,会有很大的益处,并逐渐做得更出色!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgdwsw.html