javascript - HTML/Performance: Handling massive dynamic DOM insertion -

i have 464 json objects. html element needs generated each of these elements, , inserted div in sequential order. what's going fastest way render this?

a) loop through objects, generating markup each, concatenating them all, , setting innerhtml of container div concatenated markup:

document.getelementbyid("container").innerhtml =      jsonitems.map(function(item) {         return converttohtmlstring(item);     }).join(""); 

b) loop through objects, generating dom node each, , inserting each sequentially container:

var container = document.getelementbyid("container");  jsonitems.foreach(function(item) {     container.appendchild(converttodomnode(item)); }); 

c) loop through objects, generating dom node each, sequentially appending them documentfragment, inserting fragment container:

var fragment = document.createdocumentfragment();  jsonitems.foreach(function(item) {     fragment.appendchild(converttodomnode(item)); });  document.getelementbyid("container").appendchild(fragment); 

benchmark

the correct answer please benchmark :)

i think .innerhtml devil use document fragments.

and think know document fragments superior injecting data directly dom. it's exact same logic rendering stuff off screen swapping in.