Front-end engineers eat the guy, depth, breadth of the same can not be bad. Recommended books: “JavaScript you Don’t Know”, “JavaScript Language Essentials”, “Deep Understanding of ES6”, “JavaScript Design Patterns and Development Practices”, “High Performance JavaScript”, “JavaScript Advanced Programming”

Variables and types

  • 1.JavaScriptSeveral language types are specified

Six basic types: Number, String, Boolean, Null, Undefined, Symbol A reference type: Object

  • 2.JavaScriptWhat is the underlying data structure of the object

The root parent of all data types in V8 is Object(the Object class of the engine layer). Object is derived from HeapObject, which provides basic storage functions. JSReceiver is used for prototype lookup, and JSObject is Object in JS. Array/Function/Date and so on inherit from JSObject.

  • 3.JavaScriptHow variables are stored in memory

Basic JavaScript data is stored in the Stack by value (Undefined, Null, Boolean (not new), Number, and String). Each type of data occupies a certain amount of memory space, which is allocated and freed automatically by the system. The benefit is that memory can be reclaimed in a timely manner, making it easier to manage memory space compared to the heap.

JavaScript reference type data is stored in the Heap (objects, arrays, functions, etc., which are copied and new). In fact, it is not accurate to say stored in the heap, because the address pointer of the reference type data is stored in the stack, when we want to access the value of the reference type, we need to get the address pointer of the object from the stack, and then find the data needed in the heap through the address pointer.

  • 4. Reasons for the loss of decimal accuracy,JavaScriptMethods to avoid loss of accuracy

As all the number types of Js are double precision floating point type (64-bit binary) using IEEE754 standard, the problem of floating point operation precision loss is due to the loss of floating point number in the process of converting to the binary of this standard. Solution: 1. Convert decimals into integers for calculation (the accuracy of integers will not be lost) 2. Limit the accuracy, only retain the number of decimal parts, reduce the accuracy error

  • 5. Type detection method

Object.prototype.toString.call()

Enforcement mechanism

  • 1.JavaScriptHow do you implement asynchronous programming and what is itEventloop?

Callback -> Promise -> Generator -> async + await can also be used to implement asynchronous programming by task queue and event loop

Js is a single-threaded JavaScript runtime mechanism. The EventLoop graphical browser and EventLoop in Node.js environment and EventLoop mechanism in nodeJS are discussed

Eventloop is an infinite loop that transitions between the JavaScript engine waiting for a task, executing a task, and going to sleep for more tasks. Although JS is single-threaded, browsers are multi-threaded, and eventLoop is the bridge between the JS engine thread and the browser thread, and the key to the browser’s asynchronous non-blocking model.

A few important concepts: Execution stack: When a series of methods are called in sequence, because JS is single-threaded and only one method can be executed at a time, these methods are queued in a separate place, the execution stack. All synchronization tasks are executed on the main thread, forming an execution stack. Task queue: Instead of waiting for the result of an asynchronous event, the JS engine suspends the event and continues to execute other tasks in the stack. When an asynchronous event returns a result, JS adds the event to a different queue from the current stack, called the task queue. When an IO device completes a task, it adds an event to the “task queue”, indicating that the related asynchronous task can be placed on the “execution stack”. The main thread reads the “task queue”, which is to read what events are in it. Macro task

  1. setTimeout
  2. setInterval
  3. SetImmediate (Exclusive to Node)
  4. RequestAnimationFrame (browser only)
  5. I/O
  6. UI Rendering (browser only)

Macro tasks are callbacks generated by JavaScript and the host environment (e.g., browser). Tasks that need to be handled by the host environment and are queued for callback are macro tasks

Micro tasks

  1. Process. nextTick (Node only)
  2. Promise
  3. Object.observe
  4. MutationObserver

Perform a microtask checkpoint. Perform a microtask checkpoint. Perform a microtask checkpoint This operation checks if there are any microtasks in the job queue. If there are, the job queue will continue to execute as well, and the execution queue will be empty after completion.

  • After the current macro task task, before the next macro task, before rendering;
  • So it responds faster than setTimeout (because setTimeout is a macro task) because it doesn’t have to wait for rendering;
  • After a macro task is executed, all microtasks generated during its execution are executed (before rendering)
  • 2.NodeWith the browserEventLoopThe difference of

Node external input data poll check Close callback Timer detection I/O event callback (I/O) Callbacks)–> Idle –> polling phase…

Browser (1) All synchronization tasks are executed on the main thread, forming an execution context stack. (2) In addition to the main thread, there is a task queue. Whenever an asynchronous task has a result, an event is placed in the “task queue”. (3) Once all synchronization tasks in the “execution stack” are completed, the system reads the “task queue” to see what events are in it. Those corresponding asynchronous tasks then end the wait state, enter the execution stack, and start executing. (4) The main thread repeats step 3 above. Web apis in browsers provide a separate running space for asynchronous code. When the asynchronous code is finished, the callback in the code is queued to a Task Queue. When the stack is empty, the callback function in the Queue is pushed to the call stack. When the stack is empty and the task queue is also empty, the call stack will continue to detect whether there is any code in the task queue that needs to be executed. This process is the complete Event Loop

  1. The event loop is the core mechanism by which browsers and Nodes execute JS code, but the browser and NodeJS event loops are implemented differently.
  2. The browser event cycle has a macro queue and a micro queue, and the micro queue is executed one after another in the execution process until the queue is empty. The macro queue only takes a task at the head of the queue and puts it into the execution stack. After execution, the micro queue is executed and forms a cycle.
  3. The NodeJS event loop has four macro queues and two microqueues. The execution of the microqueues is similar to that of the browser. The Next Tick Queue and Other Microtask Queue execute all tasks first. However, macro queue execution will execute each task in the queue successively until the queue is empty before starting to execute the microqueue task again.
  4. SetTimeout, setInterval, setImmediate(Node), requestAnimation(browser), IO, UI Rendering (UI rendering), etc
  5. Microtasks include process.nexttick (Node), Promise, Object.Observe, and MutationObserver
  • 3. How to process massive data while ensuring smooth running of the page

The operator Worker interface is a part of the Web Workers API and represents a background task. It is easy to create and send back messages to the creator. To create a runner, simply call the Worker() constructor, specify a script, and execute it in the Worker thread.

Front-end rendering 100,000 data pages, virtual list, rendering three screens; Time slicing

  • 4. Garbage collection mechanism GC problem

Talk about garbage collection GC

  • Mark clearance
  • Reference counting method
  • Replication algorithm

Modern browsers are basically three methods for dealing with the combination of GC, V8 GC algorithm referred to as a generational garbage collection algorithm, through the record object reference number, could be divided into older reference number of objects over a certain object, the rest of the object called a new generation, then respectively using different to them to the garbage collection algorithm. For this new generation of objects, the collection becomes frequent, and using the GC tag cleanup algorithm means that many objects need to be processed at a time, wasting a lot of time. Therefore, if GC replication algorithm is used for new generation objects, it is only necessary to copy the active objects and empty the whole From. There is no need to traverse the objects that need to be cleared to achieve the purpose of optimization. On the other hand, for old objects, they have multiple references, which means that they are less likely to become inactive objects, which means that old objects will not easily become garbage. Furthermore, the old objects produce very little garbage. If the replication algorithm is adopted, the gain is outweighs the loss. A large number of old objects are copied and duplicated, which will also increase the burden.

Prototype and prototype chain

  • 1. Understand prototyping patterns and rules of prototyping in JavaScript

  • 2. The basic implementation principle of Instanceof, manually implement an Instanceof

  • 3. Can describe the detailed process of new an object, manual implementation of a new operator

  • 4. Understand the underlying implementation of ES6 class construction and inheritance

Scope and closure

  • 1. Understand lexical and dynamic scopes

  • 2. Understand the execution context stack of JavaScript and use stack information to quickly locate problems

  • 3. The implementation principle and function of closures can be listed several practical applications of closures in development

  • 4. Understand the principle of stack overflow and memory leak and how to prevent it

Grammar and API

  • 1. Proficient in using map, Reduce, filter and other higher-order functions to solve problems

  • 2. SetInterval Points to pay attention to, use settimeout to achieve setInterval

  • 3. Regular expression API provided by JavaScript, regular expressions (mailbox verification, URL parsing, deduplication, etc.) can be used to solve common problems

  • 4.JavaScript exception processing method, unified exception processing scheme

The problem collection mainly refers to the self-check list of a [qualified] front-end engineer