Web Performance - Browser Rendering

Web Performance - Browser Rendering

README

Once resources have been downloaded to the client, the browser still needs to load, interpret, and render HTML, CSS, and JavaScript code. By simply formatting your code and pages in ways that exploit the characteristics of current browsers, you can enhance performance on the client side.

Use efficient CSS selectors

As the browser parses HTML, it constructs an internal document tree representing all the elements to be displayed; it then matches elements to styles specified in various stylesheets, according to the standard CSS cascade, inheritance, and ordering rules. The engine evaluates each rule from right to left, starting from the rightmost selector (called Key) and moving through each selector (the document element to which the rule should apply) until it finds a match or discards the rule. According to this system, the fewer rules the engine has to evaluate the better. So, of course, removing unused CSS is an important step in improving rendering performance. These rules are considered inefficient:

  • Descendant selectors are inefficient because, for each element that matches the key, the browser must also traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root element:
  body * {...}
  .hide-scrollbars * {...}
  ul li a {...}
  #footer h3 {...}
  * html #atticPromo ul li a {...}
  • Child and adjacent selectors are inefficient because, for each matching element, the browser has to evaluate another node. It becomes doubly expensive for each child selector in the rule.
  body > * {...}
  .hide-scrollbars > * {...}
  ul > li > a {...}
  #footer > h3 {...}
  • Identifier selectors are unique by definition, including tag or class qualifiers just adds redundant information that needs to be evaluated needlessly.
  ul#top_blue_nav {...}
  form#UserLogin {...}
  • The :hover pseudo-selector on non-anchor elements is known to make IE7 and IE8 slow in some cases. When a Strict DOCTYPE is not used, IE7 and IE8 will ignore :hover on any element other than anchors; when a strict DOCTYPE is used, :hover on non-anchors may cause performance degradation.
  h3:hover {...}
  .foo:hover {...}
  #foo:hover {...}
  div.faa :hover {...}

Web Performance Browser Rendering

Put CSS in the document head

It is important to put references to external stylesheets, as well as inline style blocks, in the head of the page by ensuring that stylesheets are downloaded and parsed first, you can allow the browser to progressively render the page; this recommendation was specified in the HTML 4.01 section 12.3.

Specify image dimensions

When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don’t match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML image tag, or in CSS.

Specify a character set

Specifying a character set in the HTTP response headers of your HTML documents allows the browser to begin parsing HTML and executing scripts immediately. HTML documents are sent over the Internet as a sequence of bytes accompanied by character encoding information. Character encoding information is specified in the HTTP response headers sent with the document, or in the HTML markup of the document itself. The browser uses the character encoding information to convert the stream of bytes into characters that it renders on-screen. Because a browser cannot correctly render a page without knowing how to construct the page’s characters, most browsers buffer a certain number of bytes before executing any JavaScript or drawing the page, while they search for character set information in the input.

Before browsers can begin to check for a character set, they must first determine the content type of the document being processed. If this is not specified in the HTTP header or the HTML meta tag, they will attempt to sniff the type, using various algorithms. This process can cause additional delays, besides representing a security vulnerability. For both performance and security reasons, you should always specify a content type for all resources (not only text/html).

Credits

Thanks to the Make the Web Faster Google’s project and this external resources:

Do you have a project idea? Let's make it together!