Using jQuery is much slower than using JavaScript when appending the elements

Question

I want to add a select field when clicking a button. The values of options are $all_cs, created by Yii Framework (about 7k items).

<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>

The option element content:

$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);

I used 2 ways:

1 - Using 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 - Using 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; ?>");
    });
});

When using JS, the field was added very fast and the time is constant when adding multiple fields.

But when using JQuery, the field was added slower, and as many fields as slower. When the number of fields is over 10, that need a few second to completed.

I the answers for:

1 - Why is using JQuery slower and not constant when adding multiple fields?

2 - How to change my JQuery function to make it is faster? Should do we use JQuery in this case?

(Sorry, my English is bad)

Can you please estimate what is the difference between the two scripts? Are you refering to the append only or to the entire dom loading and rendering process? — briosheje
– briosheje, Commented Jan 23, 2015 at 9:40
@briosheje: I have only this script. The difference like: add [1, 2, 3, 4, 5, 6..] elements. Time: JS [0.2s, 0.2s, 0.2s, 0.2s....] - JQuery [0.3s, 0.4s, 0.6s, 0.8s, 1.2s, 1.6s...] — AuZu
– AuZu, Commented Jan 23, 2015 at 9:46

dreamweiver · Accepted Answer · 2021-11-26 08:08:13Z

Well that's a possible misconception most of the new JavaScript/jQuery developers have.

Let me make it clear :

jQuery is a JavaScript library, so whenever any jquery function is executed, it will, in turn execute the raw javascript code in the background. So its jquery functions are like wrappers around javascript code.in your case it is like your jQuery code will call something similar to addFields_cos.
jQuery is very easy to learn and use, it also comes with a number of utility functions that could be used for traversing the DOM structure, which can be tedious to do with plain old JavaScript.

I mainly prefer jQuery because of its support for AJAX functionality, which is so easy (when compared to plain old JavaScript) to write and manage the remote calls.

As a developer, it's your personal choice whether to use jQuery or Javascript depending on the context you are trying to address.

if it's just about simple event handling on client-side, then I would say there is no need for jQuery. But if it's more complex than just handling events, like traversing the dom structure or using some 3rd party libraries which are mostly dependent on jQuery or to make asynchronous AJAX calls, then go with jQuery.

Roamer-1888 · Accepted Answer · 2015-01-23 09:52:13Z

0

Every time your execute $(selector) the DOM has to be searched for matching element(s). This is a slow process, so always look for ways to minimise the the number of DOM interactions.

In this regard, jQuery method chaining can be very effective.

For example :

$(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; ?>');
    });
});

This will be faster but maybe still not as fast as your POJS code.

edited Jan 23, 2015 at 9:52

answered Jan 23, 2015 at 9:44

Roamer-1888

19.3k5 gold badges35 silver badges45 bronze badges

Comments

Linus · Accepted Answer · 2015-01-23 11:34:51Z

0

append() is heavier to use than a single html()/text().

The code below will hopefully speed up the jquery version:

$(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>';
    }
});

To add multiple select boxes:

JSbin prototype, it seems to be a lot faster than your original code? As mentioned in other comments, it's the selector lookup that is the bottle neck.

$(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>';
    }

});

edited Jan 23, 2015 at 11:34

answered Jan 23, 2015 at 9:41

Linus

4442 silver badges5 bronze badges

1 Comment

AuZu Over a year ago

It just add 1 element!

Collectives™ on Stack Overflow

Using jQuery is much slower than using JavaScript when appending the elements

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related