视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery性能优化技巧分析_jquery
2020-11-27 21:34:39 责编:小采
文档


本文较为详细分析了jQuery性能优化技巧。分享给大家供大家参考。具体分析如下:

一、使用最新版本的jQuery类库

jQuery新版本会较上个版本进行Bug修复和一些优化,不过需要注意的是,在更换版本之后,不要忘记测试你的代码,毕竟有时候不是完全向后兼容的。

二、使用合适的选择器

jQuery选择器性能最佳到最差方式如下:

id选择器,如$('#id', context)
标签选择器,如$('p', context)
class选择器,如$('.class', context)
属性选择器,如$('[attribute=value]', context)
伪类选择器,如$(':hidden', context)

补充及注意事项:

尽量给选择器指定上下文context,可以缩小定位元素的范围
避免id重复修饰id,错误代码:var $el = $('#list #item1')
避免标签或class修饰id,错误代码: var $el = $('ul #item1')
如果使用属性选择器,尽量指定所属的标签选择器,这样可以加快访问速度,正确代码:var $el = $('a[title="link"]')

三、缓存对象

下面是性能不好的方式:



说明:jQuery会在创建每个选择器的过程中,查找DOM,消耗时间与性能。

比较好的方式:



说明:永远不要让相同的选择器在你的代码里出现多次。

四、循环时的DOM操作

使用jQuery可以很方便的添加,删除或者修改DOM节点,但是在一些循环中,例如for(),while()或者$.each()中处理节点时,下面有个实例值得大家注意:



说明:循环添加li节点100次,这种操作消耗的性能不低,所以更好的方式是将要添加的节点在插入DOM树之前全部创建好,再一次性添加到DOM树中。更好的方式:



五、数组方式使用jQuery对象

使用jQuery选择器获取结果是一个jQuery对象。在性能方面,建议使用简单for或者while循环来处理,而不是$.each(),这样能使你的代码更快。

另外注意:检查长度是一个检查jQuery对象是否存在的方式。



六、事件代理

每一个JavaScript事件(如click,mouseover)都会冒泡到父级节点。当我们需要给多个元素调用同一个函数时,这点会很有用。



说明:这种方式,如果有100个li,要绑定100个事件。显然,不科学,性能损耗很多。

更好的方式是:只需向li的父节点ul绑定一次事件,然后通过event.target获取到点击的当前元素。



七、将你的代码转化成jQuery插件

如果每次都花时间去写类似的jQuery代码,那么可以考虑将这部分类似的代码变成插件,它能够使你的代码有更好的重用性,并且能够有效的帮助你组织代码。

八、使用Javascript数组join()来拼接字符串

处理长字符串的时候,使用join()方法有助于优化性能。



九、合理利用HTML5的data属性

HTML5的data属性可以帮助我们插入数据,特别是前后端的数据交换。jQuery的data()方法,有效的利用HTML5的属性,来自动得到数据。



十、尽量使用原生的JavaScript方法

如:



优化成:



如:



优化成:



十一、压缩JavaScript

使用压缩工具压缩JavaScript文件。
发布项目时,应使用“压缩版”JavaScript文件。

希望本文所述对大家的jQuery程序设计有所帮助。

下载本文
显示全文
专题