CODEWITHSUNDEEP
javascriptgoogle-chrome
user929794
user929794

Reputation: 223

Render time, event response time of Chrome are too bad

Render time and event response time of Chrome are too bad.

I've created a sample html which contains about 5,000 - 10,000 rows and here's the result:

With 5,000 rows, it takes FireFox 5s to render and it takes Chrome 11s to render. With 10,000 rows, it takes FireFox 8s to render and it takes Chrome 3.5 minute to render

I also make a test with following script:

$(window).load(function () {
    $("div.click-test").click(function () {
        $(this).text("clicked");
    });
});

With 5,000 rows, in Firefox, the event click responses intermediately, but in Chrome, it responses after about 3s. With 10,000 rows, in Chrome, I am not patient to wait the response

Could anybody help me to restructure my html to make Chrome render time better?

PS: You can download my sample here http://www.mediafire.com/?x2h0nsldo90m642. Thanks for any advance

Upvotes: 0

Views: 255

Answers (1)

Florian Margaine
Florian Margaine

Reputation: 60747

$(window).load(function () {
    // On every single element, add a click handler.
    $("div.click-test").click(function () {
        $(this).text("clicked");
    });
});

You're adding a different event handler on every single element. Use event delegation instead. It allows you to have one event handler to take care of all your elements.

$('body').on('click', '.click-test', function() {
    $(this).text('clicked');
});

Also, avoid slow selectors such as div.click-test. .click-test is way faster.

Upvotes: 3

Related Questions