Quick Notes

Browser.md

Browser

HTML Parser

• The HTML grammar definition (HTML DTD)

• DOM, The output tree - the "parse tree" is a tree of DOM element and attribute nodes. Document Object Model

• The parsing algorithm

  • consists of two stages - tokenization and tree construction.
  • state machine
  • Tree construction algorithm: "insertion modes"

• when the parsing is finished

  • mark the document as interactive
  • start parsing scripts that are in "deferred" mode - those who should be executed after the document is parsed. The document state will be then set to "complete" and a "load" event will be fired.

THE ORDER OF PROCESSING SCRIPTS AND STYLE SHEETS

• Script
  • scripts to be parsed and executed immediately when the parser reaches a <script> tag.
  • The parsing of the document halts until the script was executed.
  • If the script is external then the resource must be first fetched from the network. this is also done synchronously
• Speculative parsing
• Style sheets
  • Firefox blocks all scripts when there is a style sheet that is still being loaded and parsed. Webkit blocks scripts only when they try to access certain style properties that may be effected by unloaded style sheets.

Render Tree

• Further work Style Computation

Layout

Paint

THE RENDERING ENGINE'S THREADS

• The rendering engine is single threaded.
• Network operations can be performed by several parallel threads

Wired Thing

can not understand the result of following test case

• 1 js + 2 CSS + 2 imagse (DomContentLoad early !!)
• 2 CSS + 2 images + 1 js

Links

• http://www.stevesouders.com/blog/2012/10/09/webperfdays-performance-tools/
• http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/
• https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMContentLoaded
  • The DOMContentLoaded event is fired at the page's document object when parsing of the document is finished. By the time this event fires, the page's DOM is ready, but the referenced stylesheets, images, and subframes may not be done loading; use the "load" event to detect a fully-loaded page.

css.md

• a smart way resize background image size

<a class="btn-outer" role="button" href="#"><span class="btn-inside">Filter</span></a>

.btn-inside {
  background: white url(button.png) no-repeat left 0;
}

.btn-outer {
  background: transparent url(button.png) no-repeat right 0;
}

• something

height
line-height

jquery-quicknotes.md

API

• $.data

  • $.data(this[0], 'validator')
  • $.data(this[0], 'validator', validator)

• $.extend, its param object could have

  • prototype
  • method

Hints

// has class error but hideOnLoad
$('label.error:not(.hideOnLoad)')

$('.error').attr('for')

// all li has attribute data-error
$('li[data-error]')

'input:checkbox:checked'

siblings
children

jQuery(elem).data("events")

JS-Ninja.md

• function length

• page 57, listing 4-2, 4-3

• page 59, diff among those three

Ninja.prototype = Person.prototype;
Ninja.prototype = { name: Person.prototype.name };
Ninja.prototype = new Person();

• page 95, with statement

Linux.md

https://github.com/robbyrussell/oh-my-zsh

practical unix: http://openclassroom.stanford.edu/MainFolder/CoursePage.php?course=PracticalUnix

fix vbox additions failed at openGL module

export MAKE='/usr/bin/gmake -i'