Page rendering: reflow/repaint

Reflow (relayot/relayouting) - process when parts or the whole DOM-tree need to be recalculating
Repaint (restyle) - process of changing of element's styles not connecting with it's size and position on the page

var body = document.body.style;
body.margin = "15px"; // reflow, repaint
body.color = "yellow"; // repaint - no dimensions changes
body.fontSize = "12px"; // reflow, repaint

Render tree changes are expensive. But browsers are quite smart - they will create a queue of the changes and only then will perform it in groups. Thus several reflows become one reflow. It sounds good, right? :)
Requesting style information, such as:

• offsetTop/Left/Width/Height
• scrollTop/Left/Width/Height
• clientTop/Left/Width/Height
• getComputedStyle() or currentStyle (IE)

preventing browser's optimization and applies all changes

__proto__ vs prototype!

__proto__

• Each object has a property '__proto__'
• __proto__ is a private system property
• When accessing the property of an object, it is first searched in this object:
  if false: it searched in __proto__:
      if false: it searched in __proto__.__proto__ and so on
• __proto__ of every value (but not null and underfined) refers to prototype of it's data type:

(0).__proto__ === Number.prototype &&
false.__proto__ === Boolean.prototype &&
"string".__proto__ === String.prototype &&
(new Date).__proto__ === Date.prototype &&
(function(){}/* new Function */).__proto__ === Function.prototype

All data types inherits from Object:

Number.prototype.__proto__ === Object.prototype

But only Object has no prototype:

Object.prototype.__proto__ === null

prototype

• This is a common property except for two nuances:
• Only functions in JavaScript have a prototype property. It defaults to the object with a single property constructor, which refers to the function itself.
• Prototype property is used to create new objects using operator 'new'.

* this article is partial translate of Original article

Closure and LexicalEnvironment

   
• Each variable on create get [[Scope]] - link on object in context where it was created
   
• [[Scope]] - is private internal property of function
   
• On function call: create a new object with LexicalEnvironment's (LE) variables. This object get link on external object from [[Scope]]
   
• Searching variables: at first it search in current variable's object and then by link [[Scope]]

Example

function saySomething(text) {
   // LexicalEnvironment = {sign: undefined}
   var sign = '!!!';
   // LexicalEnvironment = {sign: '!!!'}
   console.log('I say ' + text);

   function getText(text) { // [[Scope]] -> {sign: '!!!'}
      return text;
   }
}
saySomething('Hello World');

Where:

saySomething.[[Scope]] = window

getText.[[Scope]] = variable's object of current saySomething() call.

Scope

Initialization order

1. Initialization
1. Function Declaration on first step 
2. var (adds to window global object: var a -> window.a) on second step 
2. Assignment

!NB: Further comments in block of codes are states of initialization

Example 1

(function() {
   // window: {a: undefined, fo: undefined}
   var a = 5;

   // window: {a: 5, fo: undefined}
   var fo = function f() {
      // window: {a: undefined}
      console.log(a);
      var a = 1;
   }
   fo();
})();

Example 2

(function() {
   // window: {a: undefined, fo: undefined}
   var a = 5;

   // window: {a: 5, fo: undefined}
   var fo = function f() {
      // window: {a: 5} // 'a' has alredy exists
      console.log(a);
      a = 1;
   }
   fo();
})();

Example 3

(function() {
   // window: {a: undefined, fo: undefined}
   var a = 5;

   // window: {a: 5, fo: undefined}
   var fo = function f() {
      // window: {a: undefined, b: undefined, f2: function, e: error}
       console.log('a ' + a);
       console.log('b ' + b);
       console.log('e ' + e);
       var a = 1;
       var b = 2;
       e = 0;

       function f2() {
           console.log('f2 ' + f2);
       }
       f2();
   };
   fo();
})();