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 ?
-
JS Code -> It can be interpreted as AST ( Lexical analysis first 、 Syntax analysis ) -> Generated bytecode (V8)-> Generate machine code ( compiler )
-
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
- Js There is one 【 Main thread and call stack 】, All tasks will eventually be put into 【 The call stack 】 wait for 【 Main thread execution 】.
- 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 :
- 【 Data type checking 】 Lexical analysis , Syntax analysis
- parse Stage : V8 The engine will be js The code to AST
- 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 ;
- TurboFan Stage : The compiler takes advantage of the information collected in the last stage , Optimize bytecode to executable machine code ;
- 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
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich