博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
几种提高jQuery性能的代码
阅读量:6376 次
发布时间:2019-06-23

本文共 993 字,大约阅读时间需要 3 分钟。

1、jQuery对象缓存

如果同一元素被查找多次时,就应该将该jQuery对象缓存起来,不然每次查找都要遍历整个文档。

使用下边的代码做个简单的测试

用Chrome浏览器按F12打开控制台查看结果:(注:console.time在Chrome和Firefox浏览器好用,IE不行)

性能还是差很多的~

 

2、根据一个数组快速拼一个字符串

假如我们有如下这样的一个数组

var arr=['CBA','WCBA','NBA','WNBA'];

最原始的办法(我就是这么写的,以后改进)

var list = '
    ';for (var i = 0; i < arr.length; i++) { list += '
  • ' + arr[i] + '
  • ';}list += '
';

用jQuery的$.each来遍历

var list = '
    ';$.each(arr, function (i, n) { list += '
  • ' + arr[i] + '
  • ';});list += '
';

最后用join的方法

var list = '
  • ' + arr.join('
  • ') + '
';

上面三种写法输出的结果都是一样的,但最后一种写法从代码量上还是比较占优势。而且经过测试第二种写法和第三种写法,在数组中的数据非常多的情况下,第三种写法的速度要快50%以上,但数据少的情况下速度没有分区。

 

3、正整使用on给元素绑定事件

我要给如下代码的表格单元格绑定一个单击事件

单元格

一般随手会写成下边的样子

$("td").on("click",function(){    alert("我是单元格");})

如果只有一个td这么写没问题,要是有100个td的话那这么写的性能就非常的差,比较好的写法如下

$('#t').on('click', 'td', function () {    alert("我是单元格");});

经测试在有100个td的情况下两者性能相差7倍之多。

转载地址:http://kytqa.baihongyu.com/

你可能感兴趣的文章
Determining if a point lies on the interior of a polygon
查看>>
在 Angular 中实现搜索关键字高亮
查看>>
[Javascript ] Array methods in depth - sort
查看>>
司机福利!Uber即将可以自己选目的地接单啦!
查看>>
MOGODB REDIS
查看>>
HDU 1231:最大连续子序列(DP)
查看>>
[java] java 中Unsafe类学习
查看>>
HDU 1231——最大连续子序列(DP)
查看>>
P1739 表达式括号匹配
查看>>
3.1.4 模板字符串
查看>>
redis 介绍和常用命令
查看>>
CPU的段寄存器
查看>>
linux 安装nginx
查看>>
Kettle的概念学习系列之Kettle是什么?(一)
查看>>
Qt 3D教程(二)初步显示3D的内容
查看>>
100行代码实现最简单的基于FFMPEG+SDL的视频播放器(SDL1.x)【转】
查看>>
compareTo返回值为-1 、 1 、 0 的排序问题
查看>>
Being a Good Boy in Spring Festival(杭电1850)(尼姆博弈)
查看>>
微服务间如何选择推送和拉取数据
查看>>
互联网+时代IT管理者的转型
查看>>