big javascript function document.write renders in 1 sec in firefox and 4min in chrome, with html code -

chrome takes 4 minutes render page big javascript function , firefox takes 1-2 sec.

it's simple code, document.write javascript function has been called around 30 times not have download 30 x 1mb of dropdown data. firefox renders in 1 second , chrome in 4 minutes.

here live html link: html link removed check in firefox , check in chrome.

<script type="text/javascript"> function writehtmlasjs_product_type(){ document.write("<option value=\"4\">item 1<\/option>"); document.write("<option value=\"5\">item 2<\/option>"); document.write("<option value=\"144\">item 3<\/option>"); document.write("<option value=\"145\">item 4<\/option>"); document.write("<option value=\"146\">item 5<\/option>"); } writehtmlasjs_product_type(); 

now 1mb of data, 20 writehtmlasjs_product_type(); functions

it's not processor or memory because have 5ghz i7 48gb ram... it's either google chrome limitation, can overridden, or javascript can customized in better way same thing, think?

//i thinking of interested see difference between amount of time chrome needs render out if don't know answer what's happening here. please don't jump voting question down because don't know answer.

best regards

the enemy of dom, document.write(), ... i've got work, 'cause you're jerk. document.write() jerk .

paul irish on document.write()

long story short: don't use document.write(). period. watch more of video find out why. messes browser's parsing process. and, apparently, chrome has more trouble (enormous!) amount of document.write()'s you're using firefox. real problem not chrome handling document.write()'s slow using document.write() no-good reason.

why not manipulate dom directly? put data in variable / variables (possibly using json , maybe single or few ajax calls that's not required) , set data using dom manipulation methods.

i don't intend lay down step-by-step stuff this:

function writehtmlasjs_product_type(){     document.write("<option value=\"0\">izaberite grupu<\/option>");     document.write("<option value=\"4\">dslr<\/option>");     document.write("<option value=\"5\">prosumer<\/option>");     document.write("<option value=\"6\">kompaktni<\/option>");     document.write("<option value=\"8\">minidv kamere - video zapis na kasetu<\/option>");     //...4000-or-so more lines } 

should like:

var items = {      0: "izaberite grupu",     4: "dslr",     5: "prosumer",     6: "kompaktni",     8: "minidv kamere - video zapis na kasetu", } 

which, itself, saves a lot of bandwidth. next use dom manipulation iterate items , add them dropdowns/textboxes/whatever-the-hell-it's-supposed-to-do.

here's fiddle demonstrating basic idea.

if insist on using document.write() (which, again, i highly advise against!) @ least try keep number of calls document.write() minimum:

document.write(       '<option value="0">izaberite grupu<\/option>'     + '<option value="4">dslr<\/option>'     + '<option value="5">prosumer<\/option>'     + '<option value="6">kompaktni<\/option>'     + '<option value="8">minidv kamere - video zapis na kasetu<\/option>'); 

not jerk myself (as opposed document.write() ): don't live in '90s anymore; brush on techniques / knowledge , rest of in 2013!