•  06-07-2019
  •  | 
  •  

Question

Is there any relation between doctype of an HTML document and browser rendering speed?

If yes then which one is fastest?

Was it helpful?

Solution

I don’t think that the document type has an influence on the rendering speed. But the structure and style of an HTML document will have.

A complex HTML document (huge DOM tree, many embedded objects) with a complex style (floats, positioning, margin, padding) will probably need multiple rendering runs. Additionally an invalid HTML code the browser will need to do some error handling for parsing and building the DOM tree (but that’s not the rendering).

Take the Gecko reflow for example that shows how Firefox’s rendering engine Gecko renders an HTML document (videos for mozilla.org, a Wikipedia page and google.co.jp).

OTHER TIPS

Google is one of the fastest sites on the planet. They use the following doctype:

<!doctype html>

At Google, "every byte matters".

To be sure, Google does a ton other stuff first. When you're at their level, you need to think about the number of characters/bytes you send out. So if you're at the point where you think changing your doctype will help, use the above.

Based upon nothing but my own experience, I would venture that any difference is purely negligible.

There are a couple of factors in doctype choice that MAY affect it:

  • A strict doctype could involve less parsing time (providing no errors, obviously).
  • XHTML may take longer to load due to mandatory closing tags on everything.

However, this is going to vary greatly based upon your rendering engine and how they process source code.

I'm yet to see a website that's so optimised that the only thing left to look at is the doctype. To improve page loading speed, I'd use a tool such as ySlow or Google Page Speed to indicate more obvious areas for improvement.

I've never heard about a rendering speed difference in the real world. It is similarly often suggested that XHTML will render faster. The idea being that with a well formed document the browser doesn't have to handle errors, but the browser doesn't know it's well formed until it's rendered it...

There are plenty of pages with Strict XHTML Doctypes that don't validate.

All the other factors involved are likely much more important - apart from download speed, the way you use CSS selectors can certainly have an affect for instance.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top