附加元素时，使用 jQuery 比使用 JavaScript 慢得多

Question

我想在单击按钮时添加一个选择字段。 options 的值是$all_cs ，由 Yii Framework 创建（大约 7k 项）。

<div class="cos-input">
    <div id="cos_container"></div>
    <span class='add-input cs_name' href="#" name="cs_name" onclick='addFields_cos()' style="border: solid 1px; padding: 3px;">Add COURSES</span>
</div>

选项元素内容：

$all_cs =  $form->dropDownList($model, 'cos[n]', $allCourses, array('prompt'=>''));
$pos = strpos($all_cs, "<option");
$rpos = strrpos($all_cs, "</option>");
$all_cs = substr($all_cs, 0, $rpos+9);
$all_cs = substr($all_cs, $pos, strlen($all_cs) - $pos);
$all_cs = str_replace("\n", "", $all_cs);

我用了两种方法：

1 - 使用JS：

function addFields_cos(){
    var cos_container_parent = document.getElementById('cos_container');

    var div = document.createElement("div");
    div.name = "div_rm";
    cos_container_parent.appendChild(div);

    var new_cos = document.createElement("select");
    new_cos.name = 'new_courses[]';
    div.appendChild(new_cos);
    new_cos.innerHTML = '<?php echo $all_cs; ?>';

    div.innerHTML += "<span class='delete_div' href='#'> delete </span>";

    div.appendChild(document.createElement("br"));
    div.appendChild(document.createElement("br"));
}

2 - 使用 Jquery：

$(document).ready(function(){
    $(".cs_name").click(function(){
        $("#cos_container").append("<div><select name='new_courses[]'>");
        $("#cos_container").append("</select></div><br>");
        $("#cos_container select").append("<?php echo $all_cs; ?>");
    });
});

使用JS时，字段添加非常快，添加多个字段的时间是恒定的。

但是在使用 JQuery 时，字段添加速度较慢，并且字段越多越慢。 当字段数超过 10 时，需要几秒钟才能完成。

我的答案是：

1 - 为什么在添加多个字段时使用 JQuery 速度较慢且不恒定？

2 - 如何更改我的 JQuery 函数以使其更快？ 在这种情况下我们应该使用 JQuery 吗？

（对不起，我的英语不好）

Answer 1

append() 比单个 html()/text() 更难使用。

下面的代码有望加速 jquery 版本：

$(document).ready(function(){

    $(".cs_name").click(function(){
        $("#cos_container").html(generateContent());
    });

    function generateContent() {

        return  '<div>' +
                '<select name="new_courses[]">' +
                '<?php echo $all_cs; ?>' +
                '</select>' +
                '<span class="delete_div" href="#">delete</span>' +
                '</div><br>';
    }
});

添加多个选择框：

JSbin 原型，好像比你原来的代码快很多？ 正如其他评论中提到的，选择器查找是瓶颈。

$(document).ready(function(){

  $(".cs_name").click(function(){
        $("#cos_container").append(generateContent());
    });

    function generateOptionsion() {

        return  '<div>' +
                    '<select name="new_courses[]">' +
                        '<?php echo $all_cs; ?>' +
                    '</select>' +
                    '<span class="delete_div" href="#">Delete</span>' +
                '</div><br>';
    }

});

Answer 2

每次执行$(selector) ，都必须在 DOM 中搜索匹配的元素。 这是一个缓慢的过程，所以总是想办法尽量减少 DOM 交互的数量。

在这方面，jQuery 方法链可以非常有效。

例如 ：

$(document).ready(function(){
    $(".cs_name").click(function() {
        $("#cos_container")
            .append("<div><select name='new_courses[]'></select></div><br/>");//ensure all HTML fragments are well formed and complete at the point they are inserted.
            .find("select")
            .append('<?php echo $all_cs; ?>');
    });
});

这会更快，但可能仍然不如您的 POJS 代码快。

Answer 3

嗯，这可能是大多数新 JavaScript/jQuery 开发人员的误解。

让我说清楚：

1. jQuery是一个JavaScript库，因此无论您在jQuery 中编写什么，它都会间接运行特定的原始JavaScript函数。 所以它更像是你的jQuery代码会调用类似于addFields_cos东西。
2. 作为开发人员， jQuery lib 非常容易理解和编写代码，它还带有许多实用函数，可用于遍历 DOM 结构，这对于原始JavaScript 来说可能很乏味。 我主要更喜欢jQuery lib，因为它支持 AJAX 功能，编写和管理远程调用非常容易（与原始 JavaScript 相比）。

作为开发人员，它取决于您决定何时使用什么，如果它只是在客户端进行一些简单的事件处理，那么我会说不需要 jQuery。 但是如果它比处理事件更复杂，比如遍历 dom 结构或使用一些主要依赖于 jQuery 并需要 AJAX 功能的 3rd 方库，那么使用jQuery 。