I was going to mention that. Most CPU's can handle that in 'nothing flat', in under a millisecond. And javascript doesn't do microtime. So you would have to do a bunch of them - say 100 or even 1000, to get a better idea:
time_trial_0.htm -
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form id="form_id" action="">
</form>
<script type="text/javascript">
function resetClass(){
var t = new Date().getTime();
var form = document.getElementById('form_id'), els = form.elements, i = els.length - 1;
for (i; i > -1; --i){
if(els[i].className === 'red'){
els[i].className = 'blue';
}
}
alert(new Date().getTime() - t);
}
var form = document.getElementById('form_id'), els = ['input', 'select', 'textarea'], colors = ['red', 'blue'], f = 0, el;
while (f < 1000){
el = document.createElement(els[f % 3]);
el.className = colors[++f % 2];
form.appendChild(el);
}
resetClass();
</script>
</body>
</html>
You could do similar with the other methods - say a time_trial_1.htm, and a time_trial_2.htm.
Just a mild warning though. The above code has been tested and works. But once you edit it, you might create an endless loop situation where you have to use Task Manager (or equivalent) to end the browser's process. Just make sure that only one instance of that browser is open and that only one tab of that browser is open. That way if it does crash, you won't lose other open sites and/or have to recover them next time you launch the browser.
For the above code I got:
- Firefox: 101
- IE: 30
- Chrome: 5
Versions 3, 9, and 8 respectively. So even the fastest - Chrome, showed enough elapsed time to make comparison possible.
I later did this for the other two versions. They were about the same as each other, with the second one (array of tag names to check) taking perhaps a hair longer. They came in at:
- Firefox: 109
- IE: 44
- Chrome: 400
If you do multiple tests, you would get different results, these are approximate averages.
The other test pages:
time_trial_1.htm -
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form id="form_id" name="form_id" action="">
</form>
<script type="text/javascript">
function resetClass(){
var t = new Date().getTime();
var elms = document.getElementsByTagName("*");
var len = elms.length;
for (var i = 0; i < len; i++){
thisElm = elms[i];
if (thisElm.className == 'red'){
document.forms['form_id'][thisElm.name].className = 'blue';
}
}
alert(new Date().getTime() - t);
}
var form = document.getElementById('form_id'), els = ['input', 'select', 'textarea'], colors = ['red', 'blue'], f = 0, el;
while (f < 1000){
el = document.createElement(els[f % 3]);
el.className = colors[++f % 2];
el.name = 'name_' + f;
form.appendChild(el);
}
resetClass();
</script>
</body>
</html>
time_trial_2.htm -
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form id="form_id" name="form_id" action="">
</form>
<script type="text/javascript">
function resetClass(){
var t = new Date().getTime();
var x;
var elms = new Array("input","select","textarea");
for (x in elms){
var et = document.getElementsByTagName(elms[x]);
var len = et.length;
for (var i = 0; i < len; i++){
thisEt = et[i];
if (thisEt.className == 'red'){
document.forms['form_id'][thisEt.name].className = 'blue';
}
}
}
alert(new Date().getTime() - t);
}
var form = document.getElementById('form_id'), els = ['input', 'select', 'textarea'], colors = ['red', 'blue'], f = 0, el;
while (f < 1000){
el = document.createElement(els[f % 3]);
el.className = colors[++f % 2];
el.name = 'name_' + f;
form.appendChild(el);
}
resetClass();
</script>
</body>
</html>
get form elements by tag name
Reply With Quote
W
Bookmarks