We often encounter some js problems during development and learning. This article will introduce some related js basic issues.
What is the order in which CSS and JS are placed on the web page?
Generally we put the CSS in the head tag and the JS code at the end of the body code.
Explanation of white screen and FOUC
White screen: If you put the CSS style at the bottom, in some scenarios (new window opening, refresh, etc.) the page will appear with a white screen instead of the content being displayed gradually. If you use @ Import tag, even if the CSS link is placed and placed in the header, a white screen may occur.
The script will block the display of subsequent content
The script will block the download of subsequent components
For images and CSS, they will be loaded concurrently during loading (such as loading two at the same time under one domain name) file), but when loading JS, concurrency is disabled and other content is prevented from being downloaded, so placing JS at the top of the page will also cause a white screen.
FOUC (Flash of Unstyled Content) Unstyled content flash: If you put the CSS style at the bottom, for IE browser, in some scenarios (click on the link, enter the URL, use the bookmark to enter, etc.), it will The FOUC phenomenon will occur (the unstyled content is gradually loaded, and the page suddenly displays the style after the CSS is loaded). For Firefox, the FOUC phenomenon will always occur.
What are the functions of async and defer? What's the difference?
Without async and defer, the current script will be loaded and executed immediately during browser loading, and the browser will be blocked from rendering the document elements under the script tag. However, with async and defer, the browser can The process of loading and rendering subsequent documents is carried out in parallel with the loading and execution of JS scripts, that is, loading is asynchronous.
The difference between the two is mainly when the script is executed after it is downloaded. defer will delay the execution of the script according to the loading order until the document is parsed and displayed, while async will not matter the order of your declaration, as long as it is loaded. Execute immediately, not in order.
Generally speaking defer is more in line with our usage scenarios.
Rendering mechanism of web pages
Parses HTML tags and builds DOM trees
Parses CSS tags and builds CSSOM trees
Combines the DOM and CSSOM into a rendering tree (render tree) perform basic layout
Calculate the geometric structure of each node
Draw each node to the screen and present it to the user
JavaScript defines several data types ? Which are simple types? Which are complex types?
Null: It is a null pointer
Underfined: There is a pointer but it does not point to any space
Boolean: Boolean value, true or false (true,false)
Number: Numeric type.
String: String type, represented by single quotes or double quotes.
Object: Object, the core concept of JS, the most important data type. (Everything is an object)
The first five types are simple types, and Object is a complex type.
What do NaN, undefined, and null represent respectively?
NaN: The meaning is Not a number, indicating a non-number, not equal to any value, including himself, (one is not equal to any Numeric type of value)
underfined: It is the only value of Underfined, which means that the variable is only declared but not initialized, which means that there is this pointer, but this pointer does not point to any space
null: Null The only value represents a null pointer, which is something that does not exist.
The functions and differences between typeof and instanceof?
The function of typeof can determine the data type of a value returned and put it in the operation In front of the number, the operand can be of any type.
function a(){}
a(){}typeof a"function" //The operand is the function returning functiontypeof 123421"number"typeof "32423423423""string"typeof true"boolean" typeof undefined"undefined" //Use this to check undefined variables typeof window"object" //All others return object
instanceof is used to determine whether a variable is an instance of an object, because typeof encounters The object type will be returned for null, array, and object, so when we want to determine whether an object is an array, or determine whether a variable is an instance of an object, we must use instanceof
Code Problem
1. The following code determines whether a variable is a number, string, Boolean, or function
function isNumber(el){ if ((typeof el)==="Number"){ return true; } else { return false }; }function isString(el){ if ((typeof el)==="String"){ return true; } else { return false }; }function isBoolean(el){ if ((typeof el)==="Boolean"){ return true; } else { return false }; }function isFunction(el){ if ((typeof el)==="Function"){ return true; } else { return false }; }var a = 2, b = "jirengu", c = false;alert( isNumber(a) ); //truealert( isString(a) ); //falsealert( isString(b) ); //truealert( isBoolean(c) ); //truealert( isFunction(a)); //falsealert( isFunction( isNumber ) ); //true
2. The output result of the following code is?
##I am a picture 3.The output result of the following code is? var a = 1;a a;typeof a 2;
var obj = { name: 'hunger', sex: 'male', age: 28}//todo ...// Output name: hunger, sex: male, age:28
The code is as shown in the picture: (reference here)
I am the picture
6. What is the output of the following code? Why
console.log(a);var a = 1;console.log(a);console.log(b);
The first console.log(a ); The output is underfined because JS will promote global variables, and a is only declared but not assigned.
The second console.log(a); output is 1, because it assigns 1 to a after var a =1;.
The third console.log(b); output will report an error because b is not declared or assigned a value.
This article introduces some basic introduction issues. If you want more related knowledge, please pay attention to the php Chinese website.
Related recommendations:
How to use front-end js to modularize require.js
A picture implemented with CSS Completed button example
Related knowledge about AJAX ASP/PHP request example
The above is the detailed content of Some basic questions about JS. For more information, please follow other related articles on the PHP Chinese website!