jquery的each循环与javascript的for循环性能比较

最新推荐文章于 2020-11-29 10:22:25 发布

php_elephant

最新推荐文章于 2020-11-29 10:22:25 发布

阅读量417

点赞数

分类专栏： javascript 文章标签：优化

本文链接：https://blog.csdn.net/php_hello_word/article/details/103838059

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近开发了H5，其中有一个页面的列表数据是由ajax获取接口的数据进行渲染的，页面渲染的速度非常慢，首先考虑的是接口响应的速度，经测试接口响应的速度平均值在1s之内，属于正常速度，之后发现是jquery的each循坏处理速度慢，后改成javascript的for循环处理数据，页面加载速度有明显的的提升。

请看下面的例子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>for循环与each循环性能比较</title>
</head>
<body>
<div>
<div id="ceshi"></div>
<input type="button" value="for" οnclick="csfor();"/>
<input type="button" value="each" οnclick="cseach();" />
</div>
</body>
</html>

$(function(){
//加数据
for(var i=0;i<1024;i++){
$("#ceshi").append('<div class="cece" title="">000</div>');
}

});
function csfor(){
var cc = $(".cece");
var length = cc.length;
var time1 = new Date().getTime();
for(var i=0;i<length;i++){
cc[i].title = 'hhh';
}
var time2 = new Date().getTime();
alert("for耗时:"+(time2-time1));
}
function cseach(){
var time3 = new Date().getTime();
$(".cece").each(function(){
$(this).attr('title','ggg');
});
var time4 = new Date().getTime();
alert("each耗时:"+(time4-time3));
}
</script>

浏览器测试结果：

php_elephant

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的each循环与javascript的for循环性能比较

最近开发了H5，其中有一个页面的列表数据是由ajax获取接口的数据进行渲染的，页面渲染的速度非常慢，首先考虑的是接口响应的速度，经测试接口响应的速度平均值在1s之内，属于正常速度，之后发现是jquery的each循坏处理速度慢，后改成javascript的for循环处理数据，页面加载速度有明显的的提升。请看下面的例子：<!DOCTYPE html><html>&...
复制链接

扫一扫

专栏目录