HTML, CSS, JS and other unsorted stuff

Following the belief "Don't trust any test you did not set up by yourself" I tested Opera 12 against the latest stable versions of other browsers.

Why I used these tests
Most of the performance tests in the wild do not render anything during the test when it comes to DOM or CSS manipulation. My tests do.

Several browsers are quite fast while they run JS scripts without the need to care about visual DOM or CSS changes but eventually break down as soon as they have to render it to the screen. Performing DOM and CSS manipulations on non-visual elements is by far faster but does not measure the real impact those manipulations have on the visual user experience.

The tests utilize a broad variety of math object calls, array manipulations, bit shifting, time object calls, timeouts, intervals, function calls and other common things used on web pages in combination in a more or less real world mix and do not perform the same short action over and over again in a loop like some other tests do. Heavy use of math.random provides additional variances so that caching effects are mostly mitigated.

Of course these tests do not test the full spectrum of JS, HTML, DOM or CSS manipulations, but they were never meant to do so. They just show an aspect that many other tests do not show:
Interaction of browser "modules" while displaying what happens.

Read more...

The web is no nice place for browsers and they have to correct b0rked code in many ways and usually do it quite good - but there is always room for improvement. Take the following piece of invalid HTML code as you can find it on many websites:

1    <div id="mytest">
2        <p class="theClass">blah 
3            <strong id="theID">"foo" 
4                <em arbitrary="someValue">bar 
3            </strong>
2        </p>
5        <script>
5        </script>
6        <p>baz 
4            </em>blubb 
6        </p>
7        <p>test 
7        </p>
1    </div>

Just the </em> is in the wrong place, what causes the segment to be invalid. How do you think different browsers handle it?

Read more...

Lately I looked into the HTML source of a big forum and found this:

<br>
<font style="font: normal 10px Arial, Helvetica, sans-serif;">
&mdash;&mdash;&mdash;&mdash; Signature &mdash;&mdash;&mdash;&mdash;
</font>
<br> 

They use style= (what is quite good) so what is so wrong about using a <span instead of the long deprecated <font tag or even better, as this was a signature separator that is repeated several hundreds of thousand times in that particular forum, to just write an additional CSS rule:

.sigsep {font: normal 10px Arial, Helvetica, sans-serif;}

and add the separator like this:

<p class="sigsep">
&mdash;&mdash;&mdash;&mdash; Signature &mdash;&mdash;&mdash;&mdash;
</p>