分级

General View

浏览器性能 - 图1

Rendering Engine

  • Trident
  • Gecko / SpiderMonkey
  • Webkit
  • Blink / V8

Layout Engine

  • Web Core
  • KHTML

The Process

Events on the Client-Side

Networking Process

Network Theory Knowledge … HTTP / SPDY / SSL / TCP / UDP / DNS / IP / Socket …

  • Angent Strategy
  • Cache Strategy
  • Prefetch Strategy

The HTTP connection number limitation.

  • Browser send a HTTP Request to the Server through stacks of networks.
  • Server Response with a Document, first as a HTML file.

Browser Parsing and Rendering

  • Browser get the document and start to create a document object as DOM and parse.
    • Bytes of HTML file will firstly be transformed into characters and then token and then become Noke and finally be assembled into DOM Tree
  • First of all, it will set the document.readyState = ‘loading’
  • If it get normal DOM texts, it will create DOM NODE and insert it into document.
  • If it get a inline style tag. It will save get the CSS Rules and create CSSOM
  • If it get a inline script tag.
    • default behavior: it will use JavaScript parser to execute the code and stop parsing the document until finish executing the code. Attention: code executed this time can’t “see” the complete DOM.
    • JavaScript can also mainpluate CSS by chang CSSOM via API.
  • If it get linkages.
    • css: browser will start a HTTP Request to fetch back the css files. After get the css file, it will create CSSOM and apply the CSS rules to the current documents.
      • Notice: the css file parsing will block the DOM Parsing.
    • js: browser will start a HTTP Request to fetch back the script files.
      • default: it will use JavaScript parser to execute the code and stop parsing the document until finish executing the code.
        • async: it will execute the code immediately and parse the document together.
        • defer: it will wait util the end of the parsing document.
  • others: browser will send a HTTP Request to fetch back related files and resources.

While the Document Finish Parsing

CSS Side

  • While finishing the JS Parsing, the browser will combine the external CSS files and inline files to create a CSSOM Object.

JavaScript Side

  • document.readyState = ‘interactive’
  • It will trigger an event: DomContentLoaded / jQuery.ready(), which means the Events Model of Javascript has turn to Async from Sync.
    • But pay attention that some deffered script may be executing.
  • Browser will execute the defer scripts.
    • So the deferred script can traverse the complete DOM Tree.
  • If there are still sub-sources(audio, video, image …) waiting to be downloaded, browser will stay and wait.
  • But Scripts are working in ‘Async’ way which means the async status of web is ready now. Async events can be correctly fired and executed the related callbacks.

Rendering Engine Side

  • After DOM and CSSOM created, browser will create a Render Object Tree which combines the infromation of DOM Node and CSSOM styles together and calculate the Computated Sytles for each element that will be displayed on the browser.
  • After the calculation is finished, the browser will call the painting library for rendering the webpage with styles.
  • The future changes caused by user interface, scripts or css style changes will change DOM, CSSOM and Render Object. The change will lead re-calculate called reflow and then paint called Repaint.

While the Document Finish Loading All Resources

  • document.readyState = ‘complete’
  • It will trigger the load event of window.

优化建议

Optimize JavaScript execution:

  • Avoid long-running input handlers.
  • Avoid style changes during user input.
  • Debounce your scroll handlers.
  • Use webworks, requestAnimationFrame to optimize code.
  • Avoid garbage collections in Animations.

Optimize Style

  • Avoid complex selectors.
  • Avoid style calculations.

Optimize Layout

  • See CSS Triggers to avoid trigger layout, use transform and opacity to avoid layout and repaint.
  • Use flex box layout.
  • Avoid asynchronous layout trigger.

Optimize Paint / Composite

  • Use transform and opacity to do animation.
  • Avoid manage rendering layer and add too many layers to render context.

Questions?

Question: How does the browser handle the css rendering with DOM while the css file finished downloading? How the CSS engine apply the CSS Rules to the DOM and Rendering the graphic on the screen?

CSSs -> Parser -> CSS Rules
HTML -> Parser -> DOM Tree
CSS Rules + DOM Tree -> Attachment -> Render Tree -> Painting -> Display

Attention:
CSS files will be downloaded in a parallel way as usual.
CSS files delay will cause a flash of style change, so put it on the top of a document or make inline ones.

Understand that the GUI thread and JS Engine Thread won’t work together.

The way to optimize the CSS Rendering could be:

  • Off-line Operate the DOM Use jQuery.fragment buildDOMFragment way.
  • Display:none the elements, then handle, then make it show again.
  • Don’t change the style one by one, make these changes together, for the browser has a queue to handle rendering process.
  • Cache the value of layouts.

Question: Is CSS file first to be rendered?

No, it will be downloaded with higher precedence, but may not be rendered if the file is too large or confront a network error.

Ref