代码之家 › 专栏 › 技术社区 › Bryan Denny

关于jQuery性能和DOM的问题:为什么一种方法比另一种方法快?

performance jquery

Bryan Denny · 技术社区 · 17 年前

我在看一些jQuery性能技巧,偶然发现了一个引起我兴趣的技巧。

<html>
<head>
</head>
<body>
<select id ="myList">


</select>
<div id ="myList2">


</div>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function()
{
    console.time('test');
    var myList = $('#myList');
    var myListItems = '';

    for (i = 0; i < 1000; i++) {
        myListItems += '<option>This is list item ' + i + '</option>';
    }

    myList.html(myListItems);
    console.timeEnd('test');

    console.time('test2');
    var myList = $('#myList2');
    var myListItems = '<select  >';

    for (i = 0; i < 1000; i++) {
        myListItems += '<option>This is list item ' + i + '</option>';
    }

    myListItems += '</select>';
    myList.html(myListItems);
    console.timeEnd('test2');

}
);
</script>
</body>
</html>

为什么第二种测试方法比第一种快(大约快4倍)?

3 回复 | 直到 17 年前

Bryan Denny 17 年前

好吧,我想我可能会得到它。

使用第一个选项,我们将1000个DOM对象添加到一个DOM对象中。

我的想法正确吗?把一个装有1000颗弹珠的袋子装进盒子里比把1000颗弹珠装进袋子里容易吗?

Spencer Ruport 17 年前

user152108 17 年前

你说得对。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前