current position:Home>[hand tear front end examination paper] series (I)

[hand tear front end examination paper] series (I)

2021-08-27 08:59:15 Infinite loop infinite

① JavaScript How it works ? What are the differences between interpretive languages and compiled languages ?

  1. JS Code -> It can be interpreted as AST ( Lexical analysis first 、 Syntax analysis ) -> Generated bytecode (V8)-> Generate machine code ( compiler )

  2. A lot of information will say ,JavaScript、Python、Ruby All are " Explanatory language ", It's implemented through an interpreter . It's easy to misunderstand : Language generally only defines its abstract semantics , It doesn't force a certain way of implementation .

For example, C Generally considered to be “ Compiler language ”, but C There is also an interpreter for , for example Ch. Again ,C++ There is also an implementation of the interpreter version , for example Cint.

In fact, many interpreters are built with “ compiler + virtual machine ” The way to achieve , First, convert the source code to AST Or bytecode , Then the virtual machine completes the actual execution .

summary :

  • So-called “ Explanatory language ” It's not that you don't have to compile , It just doesn't need users to explicitly use the compiler to get executable code .

  • In fact, many interpreters are built with “ compiler + virtual machine ” The way to achieve . The general process is : Source code -> compiler -> AST Or bytecode -> Virtual machine to complete the actual execution .

② Briefly describe Babel Compilation process ?

answer : First ,Babel The role of is From one source code to another , Act as a conversion compiler , It can be briefly described as   analysis ( analysis JS Code )-> transformation ( Parse and modify AST)-> The reconstruction ( Will modify the AST Convert to another JS Code )

③ JavaScript How are arrays and functions stored in memory ?

answer : ① Array ,JS The array in is mainly Stored in continuous memory FixedArray、 Stored as a hash table HashTable.

② function , The function belongs to the reference data type , Store in the pile , Only an address is stored in the stack memory to represent the reference to the heap memory . When the interpreter looks for a reference value , Will first retrieve its address in the stack , Get the address and get the entity from the heap .

** tips: **

  • The storage of reference types in memory 【 Address in stack memory -> Entities in heap memory 】 as a result of : The reference type entity is large , Compare memory space .
  • Storage that exists within the value type 【 Stack memory 】

④ The event loop mechanism in the browser is ?

answer : ① Event loop in browser :

macrotasks( Macro task ):

  • script( The overall code )
  • setTimeout
  • setInterval
  • setImmediate
  • I/O
  • UI rendering
  • event listner

microtasks( Micro task ):

  • process.nextTick
  • Promise.then
  • Object.observe
  • MutationObserver

In the browser , Whenever a monitored event occurs , The related tasks bound to the event listener will be added to the callback queue . The tasks generated by events are asynchronous tasks , Common event tasks include :

  • Event tasks generated by user interaction events , For example, input operation ;
  • Event task generated by timer , such as setTimeout;
  • Event task generated by asynchronous request , such as HTTP request .

When the main thread is running , There will be heaps (heap) And the stack (stack), Where heap is memory 、 Stack is function call stack . We can see that ,Event Loop Responsible for executing code 、 Collect and process events and perform subtasks in the queue , Specifically, it includes the following processes .

  • JavaScript There is a main thread and call stack , All tasks will eventually be put on the call stack and wait for the main thread to execute .
  • The synchronization task will be placed on the call stack , Wait for the main thread to execute in sequence .
  • There is a callback queue outside the main thread , The asynchronous task in the callback queue will eventually run as a call stack in the main thread .
  • Synchronization tasks are performed on the main thread , The code in the stack will call the browser when executing API, At this point, some asynchronous tasks will be generated .
  • Asynchronous tasks will have results ( For example, when the monitored event occurs ) after , Put the asynchronous task and the associated callback function into the callback queue .
  • After the task in the call stack is executed , At this point, the main thread is idle , The task is retrieved from the callback queue for processing .
  • The above process will be repeated , This is it. JavaScript Operation mechanism of , It's called the event loop mechanism (Event Loop).
summary
  1. Js There is one 【 Main thread and call stack 】, All tasks will eventually be put into 【 The call stack 】 wait for 【 Main thread execution 】.
  2. Macro task -> Micro task - Macro task -> Micro task Go round and round

⑤ ES6 Modules be relative to CommonJS What are the advantages of ?

  • CommonJS The output of the module is a copy of the value ,ES6 The module outputs a reference to a value . namely ES6 Module Read only , You can't change its value
  • CommonJS Modules are run time loaded ,ES6 Module is a compile time output interface
  • CommonJS Modular require() Is the synchronous load module ,ES6 Modular import The command is loaded asynchronously
  • import The interface of is read-only( Read only status ), Cannot modify its variable value .commonJS You can reassign , But yes. ES6 Module The assignment will compile and report an error .

ES6 Modules advantage : CommonJS It loads an object ( namely module.exports attribute ), This object will only be generated after the script runs . and ES6 Modules Not object , Its external interface is just a static definition , It will be generated during the static parsing phase of the code .

⑥ 【 High level programming language 】 How is it? 【 compile 】 become 【 machine language 】 Of ?

answer : High level language code -> It can be interpreted as AST ( Period accompanying lexical analysis 、 Syntax analysis )-> Generated bytecode (V8)-> Generate machine code ( compiler )

* Which stages does a compiler usually consist of ? At what stage does the data type check usually take place ?

5 Stages

  1. 【 Data type checking 】 Lexical analysis , Syntax analysis
  2. parse Stage : V8 The engine will be js The code to AST
  3. Ignition Stage : The interpreter will AST Convert to bytecode , Parsing the execution bytecode will also provide the necessary information for the next stage of optimized compilation ;
  4. TurboFan Stage : The compiler takes advantage of the information collected in the last stage , Optimize bytecode to executable machine code ;
  5. Orinoco Stage : Garbage collection stage , Reclaim the memory space that is no longer used in the program .

technological process

js -> word / Syntax check -> ast ( adopt v8 engine ) -> Bytecode ( Through the interpreter )-> Machine code ( By compiler )-> Garbage collection stage ( Reclaim memory that is no longer used )

Ⅷ Release / What is the difference between subscription mode and observer mode ?

answer : In observer mode , The observed usually maintains a list of observers . When the state of the observed changes , Will inform the observer .

In publish and subscribe mode , The specific publisher will dynamically maintain a list of subscribers : The event notification published to the corresponding subscriber can be started or stopped at runtime according to the needs of the program .

The difference is that publishers themselves do not maintain subscription lists ( It doesn't actively maintain a list like an observer ), It delegates work to specific publishers ( Equivalent to a secretary , Anyone who wants to know about me , Just ask my secretary directly ); After the subscriber receives the message from the publisher , Specific subscribers will be assigned to carry out relevant processing .

⑨ When will decorator mode be used ?【: Extend the functionality of existing objects 】

answer : Decorator mode generally refers to allowing new functions to be added to an existing object dynamically , Without changing its structure , It is equivalent to wrapping an existing object .

There are many scenarios to use , For example, I used to write jQ project , You can quickly and dynamically expand yourself jQ The above method , perhaps vue Custom instructions for , The main purpose is to extend the old functions through inheritance .

Ten List the programming paradigms you know ?

answer : declarative 、 imperative ( object-oriented oop)、 Functional expression fp

11. What is a sandbox ? What is the role of the browser sandbox ?

answer : Sandbox is designed to let untrusted code run in a certain environment , This limits the code's access to resources outside the quarantine area .

12. Hash and History Differences, advantages and disadvantages of routing ?

answer : hash The implementation of routing mode is mainly based on the following features :

  • URL in hash Value is just a state of the client , That is, when a request is made to the server ,hash Part will not be sent ;
  • hash Change in value , Will add a record to the browser's access history . So we can go back through the browser 、 Forward button control hash Handoff ;
  • Can pass  a  label , And set up  href  attribute , When the user clicks this tab ,URL  Of hash Values change ; Or use  JavaScript Come on  loaction.hash  Assign a value , change URL Of hash value ;
  • We can use hashchange Events to monitor hash Change in value , To jump to the page ( Rendering ). stay vue/react Detected in hash Change, just load different components .
  • hashchange Event triggered , There will be hash Before the change URL(oldURL) and hash After the change URL(newURL) Two attributes :

demo

www.baidu.com/#a=0 When you modify # After hash When the value of :

window.addEventListener('hashchange',function(e) { console.log(e.oldURL);  console.log(e.newURL) },false);
 Copy code 

history The implementation of routing mode is mainly based on the following features :

  • pushState and repalceState Two API To operate the implementation URL The change of ;
  • We can use popstate Events to monitor url The change of , To jump to the page ( Rendering );
  • history.pushState() or history.replaceState() Not trigger popstate event , At this time, we need to manually trigger the page Jump ( Rendering ).

13.JavaScript Medium const Arrays can be used for push Operation ? Why? ?

answer : Sure , It can also be done splice() operation .

const Declaration creates a read-only reference to a value . But that doesn't mean that the value it holds is immutable , Only the variable identifier cannot be reassigned . for example , When the reference is an object , This means that the content of the object can be changed .

14. A simple comparison Callback、Promise、Generator、Async Several asynchronous API The advantages and disadvantages of ?

answer : First callback It's not asynchronous API, It was early JS A means of asynchronous programming .

Promise The community is trying to solve the problem of callback hell in ES6 A solution proposed by version ;

Generator It is also an asynchronous programming solution , Its biggest feature is that it can hand over the execution right of the function ,Generator The function can be seen as a container for asynchronous tasks , Where you need to pause , Use both yield Grammar to mark ;

Async/await yes ES7 A new asynchronous solution proposed in ,async yes Generator Grammatical sugar of function ,async/await The advantages of Clear code ( It's not like using Promise I need to write a lot then Method chain ).async/await not only JS A way of asynchronous programming , Its readability is also close to synchronous code , Make it easier for people to understand .

async/await It comes with its own actuator , and generator Generator There is no actuator . Manual call required next()

15. Object.defineProperty and ES6 Of Proxy What's the difference? ?

answer : Proxy The advantages are as follows

  • Proxy You can listen directly to the entire object instead of the attribute .
  • Proxy Can directly monitor the changes in the array .
  • Proxy Yes 13 Interception method in , Such as ownKeys、deleteProperty、has Is such as Object.defineProperty Do not have the .
  • Proxy Returns a new object , We can only manipulate new objects to achieve the goal , and Object.defineProperty You can only traverse the object properties and modify them directly ;
  • Proxy As a new standard, browser manufacturers will focus on continuous performance optimization , That is, the legendary performance bonus of the new standard .

Object.defineProperty The advantages are as follows

  • Compatibility is good. , Support IE9, and Proxy There are browser compatibility issues with , And it doesn't work polyfill Grinding .

Object.defineProperty The disadvantage lies in :

  • Object.defineProperty Only the properties of the object can be hijacked , So we need to traverse every attribute of every object .
  • Object.defineProperty Can't listen to arrays . It's by rewriting the data 7 A way to change the data to listen to an array .
  • Object.defineProperty Not right es6 A new creation Map,Set These data structures make listening .
  • Object.defineProperty You can't listen to add and delete operations , adopt Vue.set() and Vue.delete To achieve responsive .

copyright notice
author[Infinite loop infinite],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827085910661m.html

Random recommended