Community post
[JS] Render first vs Render at completion
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!
https://media.giphy.com/media/l0NwHXQy3kUSfFF60/giphy.gif
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!
Replies (7)
Congratulations @shawnycx! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
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
STOPCongratulations @shawnycx! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
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
STOPCongratulations @shawnycx! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :
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
STOPDo not miss the last post from @steemitboard:
SteemitBoard and the Veterans on Steemit - The First Community Badge.
Congratulations @shawnycx! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word
STOPDo not miss the last post from @steemitboard:
Congratulations @shawnycx! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word
STOPCongratulations @shawnycx! You received a personal award!
Happy Birthday! - You are on the Steem blockchain for 1 year!
Click here to view your Board
Congratulations @shawnycx! You received a personal award!
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!