Front-end engineer interview questions (html, js, asynchronous)

1. Basic knowledge of html

1.1. What is the function of the html tag type ( <head>,<body>,<!DOCTYPE>)?

	head、body、!DOCTYPE
head tag	It is the container for all head elements, and most of the content of the head tag will not be displayed to the reader
body tag	Defines the body of the document, containing all the content of the document (such as text, hyperlinks, images, tables, lists, etc.)
!DOCTYPE tag	Instructs the browser about which HTML version the page is written with

1.2. What is HTML5?
HTML5 will become the new standard of HTML, XHTML and HTML DOM. HTML5 is still being perfected. However, most modern browsers already have some HTML5 support

1.3. New features of HTML5?
(1) canvas element for painting
(2) video and audio elements for media playback
(3) better support for local offline storage
(4) new special content elements, such as article, footer, header, nav, section
(5) New form controls, such as calendar, date, time, email, url, search

1.4. What are pseudo-classes and pseudo-elements

	Pseudo-classes and pseudo-elements
pseudo element	Also known as a pseudo-object, used to create and style some elements that are not in the DOM tree. For example, we can use :before to add some text before an element, and style the text, although the text is visible to the user, but it is not actually in the DOM document
pseudo-class	It is used to define the special state of the element. It can be used to set the mouseover style, the element's focus style, and the link style. For example, common hover, active, link, etc. are all pseudo-classes

1.5, html5 semantics
Before html5 came out, we were used to div to represent chapters or different modules of the page, but div itself had no semantics. But now, html5 has added some semantic tags to express the document structure more clearly.

insert image description here

Semantic advantages:
1. It is easy for users to read, and the page can present a clear structure when the style is lost.
2. It is beneficial to SEO and search engine tags to determine the context and the weight of each keyword.
3. It is convenient for screen reading and analysis, such as blind readers. Rendering web pages according to semantics
4. It is beneficial to development and maintenance, semantics is more readable, code is better maintained, and the relationship with CSS3 is more harmonious

2. Basic knowledge of JS

2.1, In-depth understanding of JS: the similarities and differences of var, let, const

	var、let、const
where	ES5 variable declaration method, the scope of var is the method scope, as long as it is defined in the method, the code after the variable is defined in the entire method can be used
let	1. ES6 variable declaration method, if you use it directly before the variable declaration, an error will be reported. 2. Let is the scope. The scope of variables declared by let can have a smaller limited scope than the scope of variables declared by var, and is more flexible. 3. Let prohibits repeated declaration of variables, otherwise an error will be reported; var can be repeated
const	ES6 variable declaration method, const is a constant declaration method, it must be initialized when declaring a variable, and the value of the constant cannot be modified in the code that appears later

2.2, JS data types

	JS data types
basic data type	Number, String, Boolean, null, undefined, symbol, bigint (the latter two are new for ES6)
reference data type	object, function (prop Function.prototpe), object: ordinary object, array object, regular object, date object, Math mathematical function object

Two data storage methods:


basic data type	The simple data segment directly stored in the stack occupies a small space, has a fixed size, and is frequently used data. The stack is the space for storing primitive values and executing code
reference data type	Stored in heap memory, occupying space, and the size is not fixed. The reference data type stores a pointer in the stack, which points to the starting address of the entity in the heap. When the interpreter looks for the reference value, it will retrieve its address in the stack, and obtain the entity from the heap after obtaining the address.
the difference	1. The heap is larger than the stack, and the stack runs faster than the heap. 2. Heap memory is unordered storage and can be obtained directly by reference. 3. The basic data type is relatively stable, and the memory occupied is relatively small. 4. The type size of reference data is dynamic and unlimited

2.3. Understanding of Object.assign
Function: Object.assign can realize the merging of objects
Syntax: Object.assign(target,…sources)

Parse:

1. Object.assign will copy the enumerable properties in the source to the target. If it has the same name as the existing properties of the target, it will be overwritten.
2. The subsequent source will overwrite the property of the same name of the previous source.
3. Object.assign copies the property value. If the property value is a reference type, then the copied address is actually the reference address, and there will be a problem of reference sharing.

2.4. Understanding of constructor
Each function created has a prototype (prototype) object, which is a pointer to an object. By default, all prototype objects will automatically obtain a constructor (constructor function) property, this property is a pointer to the function where the prototype property is located. When the constructor is called to create a new instance, the instance will contain a pointer (inherited from the constructor's prototype) to the constructor's prototype object. Note that when a constructor's prototype is set equal to a new object created as an object literal, the constructor property no longer points to the constructor

2.5, the difference between map and forEach


Same point	1, is to loop through each item in the array. 2. Each execution of the anonymous function supports three parameters, the parameters are item (each current item) index (index value), arr (original array). 3. This in the anonymous function points to the window. 4, can only traverse the array
difference	1. map() will allocate memory space to store the new array and return it, while forEach() will not return data. 2. forEach() allows callback to change the elements of the array, and map() returns a new array.

3. Asynchronous correlation

3.1, the difference between promise and async await

	meaning
Promise	A solution for asynchronous programming, which is more reasonable and powerful than the traditional solution callback functions and events. Simply put, promises are like containers, which store the results of events that will be executed in the future (asynchronously), and these results Once generated it cannot be changed
async await	It is also a solution for asynchronous programming. It follows the syntactic sugar of the Generator function. It has a built-in executor. It will automatically execute and output the result without additional calls. It returns a promise object.

the difference:

1. The emergence of promise solves the "address callback" problem caused by the traditional callback function, but its syntax causes it to develop vertically to form a callback chain. When encountering complex business scenarios, such syntax is obviously unsightly. The async await code looks more concise, making the asynchronous code look like synchronous code. The essence of await is to provide syntactic sugar equivalent to the "synchronization effect" of waiting for the asynchronous return ability. Only when this round of code is executed can the next code be executed. One round.
2. Async await is the same as promise and is non-blocking.
3. Async await is implemented based on promises, which can be said to be an improved version of promises, which cannot be used for ordinary callback functions.