[JS] Render first vs Render at completion

in #programming7 years ago

Rendering Speed Test

I'm pretty sure this has already been done a long time ago but I have always wondered about the time it would take to render content with JS to DOM. So today, I did a little test. Nothing fancy here, just some simple for..in loops and a render function that spits out data wrapped around some divs. Here are some JS snippet and the result at the end.

Render First

        var apps = obj.apps;
        console.time("Time this");
        for (key in apps) {
            appCount.innerHTML += render(apps[key]);
        }
        appDiv.innerHTML = div;
        appCount.innerHTML = obj.totalAppsCount;
        console.timeEnd("Time this");

Render at Completion


        console.time("Time this");
        var div = '' 
        for (key in apps) {
            div += render(apps[key]);
        }
        appDiv.innerHTML = div;
        appCount.innerHTML = obj.totalAppsCount;
        console.timeEnd("Time this");
        return;

Results?

Render first: 35.08ms
Render at completion: 1.68ms!

Eventhough, I was only testing this on a 50 item obj this is a pretty big gap, IMO of course.

Have a better way to speed up the time even more? Let me know!
Thanks for reading! Upvote and follow if you loved it!

Sort:  

Congratulations @shawnycx! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

Upvote this notification to help all Steemit users. Learn why here!

Congratulations @shawnycx! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

Upvote this notification to help all Steemit users. Learn why here!

Congratulations @shawnycx! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:
SteemitBoard and the Veterans on Steemit - The First Community Badge.

Do you like SteemitBoard's project? Then Vote for its witness and get one more award!

Congratulations @shawnycx! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 9000 upvotes. Your next target is to reach 10000 upvotes.

Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

Meet the Steemians Contest - The results, the winners and the prizes
Meet the Steemians Contest - Special attendees revealed
Meet the Steemians Contest - Intermediate results

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @shawnycx! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 10000 upvotes. Your next target is to reach 11000 upvotes.

Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @shawnycx! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 1 year!

Click here to view your Board

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @shawnycx! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Vote for @Steemitboard as a witness to get one more award and increased upvotes!