root / trunk / bench / with.html

Revision 5981, 2.4 kB (checked in by bill, 2 years ago)

update w/the three tests (with(), direct access, and temp variable)

  • Property svn:eol-style set to native
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2        "http://www.w3.org/TR/html4/strict.dtd">
3
4<title>with() test</title>
5
6<style>
7        th { background: #ccccff; }
8        td { align: left; }
9</style>
10
11<script type="text/javascript">
12
13        function bench () {
14                foo={};
15                foo.bar={};
16                foo.bar.node=document.getElementById("node");
17       
18                tic();
19                for (var i = 0; i < 10000; i++) {
20                        with(foo.bar.node.style){
21                                position="relative";
22                                top="10px";
23                                left="10px";
24                                height="100px";
25                                width="300px";
26                                background="red";
27                        }
28                }
29                toc("using with()");
30       
31                tic();
32                for (var i = 0; i < 10000; i++) {
33                        foo.bar.node.style.position="relative";
34                        foo.bar.node.style.top="10px";
35                        foo.bar.node.style.left="10px";
36                        foo.bar.node.style.height="100px";
37                        foo.bar.node.style.width="300px";
38                        foo.bar.node.style.background="red";
39                }
40                toc("direct access");
41       
42       
43                tic();
44                for (var i = 0; i < 10000; i++) {
45                        var x = foo.bar.node.style;
46                        x.position="relative";
47                        x.top="10px";
48                        x.left="10px";
49                        x.height="100px";
50                        x.width="300px";
51                        x.background="red";
52                }
53                toc("using temp variable");
54        }
55       
56        function tic () {
57                tic.time = new Date();
58        }
59       
60        function toc (str) {
61                var time = new Date().getTime() - tic.time.getTime();
62                var p = document.createElement("p");
63                p.appendChild(document.createTextNode(time + " - " + str));
64                document.getElementById("results").appendChild(p);
65        }
66
67</script>
68
69<h1>Test of with() for setting style</h1>
70
71<p><strong style="color:red">Warning:</strong> these benchmarks will take a number of seconds to run.  Other system activity will cause these benchmarks to skew.
72<p><a href="javascript:bench()">Run benchmarks</a>
73
74<div id="node">
75This is the node whose style will be adjusted
76</div>
77
78<p>The results should not be compared between browsers for they are run on different systems, however results for the same browser are relative to each other.
79
80<div id="results"></div>
81
82<h2>Typical results</h2>
83<table border=1>
84<thead>
85        <tr>
86                <td>
87                <th>IE
88                <th>Safari
89                <th>Gecko
90        </tr>
91</thead>
92<tbody>
93        <tr>
94                <th>with()
95<pre>
96with(foo.bar.node.style){
97        position="relative";
98        ...
99}
100</pre>
101                <td>516
102                <td>747
103                <td>891
104        </tr>
105        <tr>
106                <th>direct access
107<pre>
108foo.bar.node.style.position="relative";
109...
110</pre>
111                <td>703
112                <td>806
113                <td>1297
114        </tr>
115        <tr>
116                <th>using temp variable
117<pre>
118var x = foo.bar.node.style;
119x.position="relative";
120...
121</pre>
122                <td>500
123                <td>720
124                <td>796
125        </tr>
126</tbody>
127</table>
Note: See TracBrowser for help on using the browser.