JavaScript basics, browser rendering, data types, traversal operations

Browser rendering mechanism:

1. Parse the HTML tag, build the DOM tree, and in the process, iterate through the elements in the tag until the next HTML tag is parsed.

2. Parse the CSS style and build the Cssom tree.

3. Combine the DOM tree and the Cssom tree to build the render tree.

4. Layout on the basis of the render tree, calculating the geometry of each node

5. Draw each node to the screen to complete the rendering

How do I place CSS styles and JavaScript scripts?

CSS: In general, CSS is written as a separate CSS file, then introduced through link, placed in the head tag, in addition, through a separate CSS file for easy maintenance.

javascript: Typically placed inside the body tag, the display is usually preferred, because JavaScript is a scripting language that parses the script when it encounters the tag, resulting in delays in building the DOM tree and subsequent rendering, So the screen may show a short time white screen, affect the user experience, so usually put the script tag at the end, but if there are some occasions to compare, there is only one page (there is only one screen, and there are some things involved in JavaScript needs to be done (login page), And the JS file is not very large, you can also choose to put in the head tag, but usually placed in the body tag in the last face.

Explain 白屏And FOUC

White screen

1. If JS is placed in the head, in the process of loading the JS file, it will lead to some time white screen, because the DOM tree and the Cssom will be stopped, resulting in white screen

2. Using the @import tag, searched, placed the style tag, introduced a CSS file, causing the loading of another CSS file, so it will lead to white screen.

3. If the CSS style is placed at the bottom, for IE browser, in some scenarios (new window open, refresh, etc.) page will wait until the HTML and CSS loading completed before rendering, resulting in the page content will not be gradually displayed.

Fouc:

In the Firefox browser, rendering does not wait for the CSS to fully load before starting, so if the CSS file is not placed in the beginning of the page, there will be loaded without the style of the page, after the CSS appears and refreshed with the style of the page, so the appearance is FOUC (Flash of Unstyle D content, no flicker of style contents) phenomenon.

In addition, if the style is placed at the bottom, for IE browser, in some scenarios (click the link, enter the URL, use tags to enter, etc.), there will be Fouc phenomenon (gradually loading no style content, and so on after the CSS load page suddenly show style), for Firefox will always show Fouc.

How many data types do JavaScript have? Refer to another question: https://segmentfault.com/q/1010000006008255

JavaScript defines 6 types of data, Number,string,boolean,null,undefined,object.

Complex data types: object, which is an array of objects that are used to hold data. ）

Simple data types: number numbers, String strings, Boolean Boolean types, these three types are placed in the stack memory, not referenced.

Special data type: Undefined,null. Where null is a type of object that is judged by typeof null as an object,

, so if you want to determine whether a variable will be used to hold the object in the future, you can also pre-assign null, distinguishing between undefined and null.

NaN、 undefined、 nullWhat do they stand for separately?

1.NaN: First nan is not equal to Nan, then Nan is the first not a number to convert the data into numbers.

2.undefined is a data type, a variable is not assigned, or the function is not declared and does not know what.

1. The variable is not assigned, and is automatically assigned as undefined when declared.

2. The function does not declare or access the function, or access to the variable, when calling the function, will return undefined

3. When the function does not return something, it returns undefined.

3.null: is a data type, itself an object, typeof null is an object that can be used to clear references.

the difference between typeof and Instanceof

typeof is used to determine which type of an element is in Function,object,number,string,boolean.

Instanceof is used to determine whether an element is an instance of an object, and the value returned is a Boolean value.

Judging data types

function isnumber (el) { return typeof (el) = = = "number";}

function isstring (el) { return typeof (el) = = = "string";}

function isboolean (el) {return typeof (el) = = = "boolean";}

function isfunction (el) {return typeof (el) = = = " function ";}

function IsObject (el) { return typeof (el) = = = "Object";}

Where array belongs to the object.

JavaScript syntax operations:

1. Iterate through the array:

var arr = [1,2,3,4,5];

for (Var i=0;i<arr.length;i++) {

Console.log (Arr[i]);

}

2. Traverse the object:

var obj = {name: ' Hank ', Age: ' $ ', Sex: ' Boy '};

for (var key in obj) {

Console.log (key+ ': ' +obj[key]);

}

JavaScript basics, browser rendering, data types, traversal operations