In this second test, we drop the syntax coloring, and just apply code collapsing to the preformatted block of CSS text (the block of text is much larger than the first test. This is done by iterating through each character in the preformatted text, conditionally applying
This test also goes through 7836 iterations in one for-loop, and so may also serve as a benchmark for for-loop-performance.
In your browser, the test took {test not completed}ms to complete. On my system, Opera is about 4.5 times slower than the other two competing browser.
Files used in this test:
Previous: Test A, Syntax Highlightning & code collapsing.
Up: virtuelvis.com home.
.decoration { display: none; }
body {
margin: 0;
padding: 0;
background: white url(blady.jpg) fixed no-repeat 95% 0;
font-size: 1em;
}
div.outer {
width: 100%;
min-width: 30em;
}
div.comment {
color: black;
}
p, ul, ol, dl {
font-family: Arial, Verdana, sans-serif;
line-height: 1.4;
padding: 0 0.5em 0.5em 0.5em;
margin: 0;
}
pre {
padding: 0.5em 0.5em 0.5em 1em;
margin: 0em;
}
li {
list-style-position: inside;
text-indent: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 1.8em;
text-transform: lowercase;
}
h2 {
font-size: 1em;
}
h3{
font-size: 1em;
}
h2 a:link, h2 a:visited {
text-decoration: none;
}
h2 {
border-bottom: 1px dashed black;
}
p.byline, p.blogdescription {
font-size: 0.67em;
font-family: Verdana, Arial, sans-serif;
}
p.byline {
margin: 0;
padding: 0.125em 0em 0.375em 0;
text-align: right;
}
h1, h1 a, h1 a:link, h1 a:visited {
text-decoration: none;
}
.leftcol, .header {
background: transparent;
margin: 0;
padding: 1em;
float: left;
width: 50%;
max-width: 40em;
}
.metacontent {
float: right;
clear: right;
width: 225px;
padding: 0;
margin: 0;
font-size: 0.85em;
position: relative;
border-left: 1px dotted black;
z-index: 1;
top: 0;
background: transparent url(bg.png) scroll repeat 0 0;
}
div.comment { padding: 1em; }
div.entry, div.navbox { margin-bottom: 1em; }
a, a:link, a:visited {
text-decoration: underline;
cursor: pointer;
}
a:hover, a:active{
text-decoration: underline;
}
.decoration { display: none; }
body {
margin: 0;
padding: 0;
background: white url(blady.jpg) fixed no-repeat 95% 0;
font-size: 1em;
}
div.outer {
width: 100%;
min-width: 30em;
}
div.comment {
color: black;
}
p, ul, ol, dl {
font-family: Arial, Verdana, sans-serif;
line-height: 1.4;
padding: 0 0.5em 0.5em 0.5em;
margin: 0;
}
pre {
padding: 0.5em 0.5em 0.5em 1em;
margin: 0em;
}
li {
list-style-position: inside;
text-indent: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 1.8em;
text-transform: lowercase;
}
h2 {
font-size: 1em;
}
h3{
font-size: 1em;
}
h2 a:link, h2 a:visited {
text-decoration: none;
}
h2 {
border-bottom: 1px dashed black;
}
p.byline, p.blogdescription {
font-size: 0.67em;
font-family: Verdana, Arial, sans-serif;
}
p.byline {
margin: 0;
padding: 0.125em 0em 0.375em 0;
text-align: right;
}
h1, h1 a, h1 a:link, h1 a:visited {
text-decoration: none;
}
.leftcol, .header {
background: transparent;
margin: 0;
padding: 1em;
float: left;
width: 50%;
max-width: 40em;
}
.metacontent {
float: right;
clear: right;
width: 225px;
padding: 0;
margin: 0;
font-size: 0.85em;
position: relative;
border-left: 1px dotted black;
z-index: 1;
top: 0;
background: transparent url(bg.png) scroll repeat 0 0;
}
div.comment { padding: 1em; }
div.entry, div.navbox { margin-bottom: 1em; }
a, a:link, a:visited {
text-decoration: underline;
cursor: pointer;
}
a:hover, a:active{
text-decoration: underline;
}
.decoration { display: none; }
body {
margin: 0;
padding: 0;
background: white url(blady.jpg) fixed no-repeat 95% 0;
font-size: 1em;
}
div.outer {
width: 100%;
min-width: 30em;
}
div.comment {
color: black;
}
p, ul, ol, dl {
font-family: Arial, Verdana, sans-serif;
line-height: 1.4;
padding: 0 0.5em 0.5em 0.5em;
margin: 0;
}
pre {
padding: 0.5em 0.5em 0.5em 1em;
margin: 0em;
}
li {
list-style-position: inside;
text-indent: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 1.8em;
text-transform: lowercase;
}
h2 {
font-size: 1em;
}
h3{
font-size: 1em;
}
h2 a:link, h2 a:visited {
text-decoration: none;
}
h2 {
border-bottom: 1px dashed black;
}
p.byline, p.blogdescription {
font-size: 0.67em;
font-family: Verdana, Arial, sans-serif;
}
p.byline {
margin: 0;
padding: 0.125em 0em 0.375em 0;
text-align: right;
}
h1, h1 a, h1 a:link, h1 a:visited {
text-decoration: none;
}
.leftcol, .header {
background: transparent;
margin: 0;
padding: 1em;
float: left;
width: 50%;
max-width: 40em;
}
.metacontent {
float: right;
clear: right;
width: 225px;
padding: 0;
margin: 0;
font-size: 0.85em;
position: relative;
border-left: 1px dotted black;
z-index: 1;
top: 0;
background: transparent url(bg.png) scroll repeat 0 0;
}
div.comment { padding: 1em; }
div.entry, div.navbox { margin-bottom: 1em; }
a, a:link, a:visited {
text-decoration: underline;
cursor: pointer;
}
a:hover, a:active{
text-decoration: underline;
}
.decoration { display: none; }
body {
margin: 0;
padding: 0;
background: white url(blady.jpg) fixed no-repeat 95% 0;
font-size: 1em;
}
div.outer {
width: 100%;
min-width: 30em;
}
div.comment {
color: black;
}
p, ul, ol, dl {
font-family: Arial, Verdana, sans-serif;
line-height: 1.4;
padding: 0 0.5em 0.5em 0.5em;
margin: 0;
}
pre {
padding: 0.5em 0.5em 0.5em 1em;
margin: 0em;
}
li {
list-style-position: inside;
text-indent: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 1.8em;
text-transform: lowercase;
}
h2 {
font-size: 1em;
}
h3{
font-size: 1em;
}
h2 a:link, h2 a:visited {
text-decoration: none;
}
h2 {
border-bottom: 1px dashed black;
}
p.byline, p.blogdescription {
font-size: 0.67em;
font-family: Verdana, Arial, sans-serif;
}
p.byline {
margin: 0;
padding: 0.125em 0em 0.375em 0;
text-align: right;
}
h1, h1 a, h1 a:link, h1 a:visited {
text-decoration: none;
}
.leftcol, .header {
background: transparent;
margin: 0;
padding: 1em;
float: left;
width: 50%;
max-width: 40em;
}
.metacontent {
float: right;
clear: right;
width: 225px;
padding: 0;
margin: 0;
font-size: 0.85em;
position: relative;
border-left: 1px dotted black;
z-index: 1;
top: 0;
background: transparent url(bg.png) scroll repeat 0 0;
}
div.comment { padding: 1em; }
div.entry, div.navbox { margin-bottom: 1em; }
a, a:link, a:visited {
text-decoration: underline;
cursor: pointer;
}
a:hover, a:active{
text-decoration: underline;
}
.decoration { display: none; }
body {
margin: 0;
padding: 0;
background: white url(blady.jpg) fixed no-repeat 95% 0;
font-size: 1em;
}
div.outer {
width: 100%;
min-width: 30em;
}
div.comment {
color: black;
}
p, ul, ol, dl {
font-family: Arial, Verdana, sans-serif;
line-height: 1.4;
padding: 0 0.5em 0.5em 0.5em;
margin: 0;
}
pre {
padding: 0.5em 0.5em 0.5em 1em;
margin: 0em;
}
li {
list-style-position: inside;
text-indent: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 1.8em;
text-transform: lowercase;
}
h2 {
font-size: 1em;
}
h3{
font-size: 1em;
}
h2 a:link, h2 a:visited {
text-decoration: none;
}
h2 {
border-bottom: 1px dashed black;
}
p.byline, p.blogdescription {
font-size: 0.67em;
font-family: Verdana, Arial, sans-serif;
}
p.byline {
margin: 0;
padding: 0.125em 0em 0.375em 0;
text-align: right;
}
h1, h1 a, h1 a:link, h1 a:visited {
text-decoration: none;
}
.leftcol, .header {
background: transparent;
margin: 0;
padding: 1em;
float: left;
width: 50%;
max-width: 40em;
}
.metacontent {
float: right;
clear: right;
width: 225px;
padding: 0;
margin: 0;
font-size: 0.85em;
position: relative;
border-left: 1px dotted black;
z-index: 1;
top: 0;
background: transparent url(bg.png) scroll repeat 0 0;
}
div.comment { padding: 1em; }
div.entry, div.navbox { margin-bottom: 1em; }
a, a:link, a:visited {
text-decoration: underline;
cursor: pointer;
}
a:hover, a:active{
text-decoration: underline;
}