background
“
Take note of your interviews in the last half of the month and continue to add content and answers
HTML report
1. What are the new HTML5 features?
A: AN INVENTORY of HTML5 APIS
CSS article
1. CSS box model?
Answer: There are two kinds of box models: IE box model and standard box model. Box-sizing :border-box; Its width and height are border+padding+content. Box-sizing :content-box; ; His width and height are the width and height of content.
2. What BFC? How can BFC be played?
A: Full name: Block Format context. It is a box that is independent and undisturbed by the outside world. Common ways to create a BFC are: Position: Absolute; display:inline-block; float:left/right; overflow:hidden; BFC layout rules: 1. The internal boxes are placed vertically, one after the other. 2. The vertical distance of Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap 3. The left side of each element’s margin box touches the left side of the containing block’s border box (for left-to-right formatting, otherwise the opposite). This is true even if there is float. 4. The BFC area does not overlap with the float box. 5. The BFC is a separate container on the page. The child elements inside the container do not affect the outside elements. And vice versa. 6. When calculating the height of the BFC, the floating element is also involved in the calculation.
3. Horizontal and vertical center method?
Answer: more, can baidu by oneself
4. What about cSS3 pseudo-elements? Other CSS3 features?
Answer: before, after CSS3 features are recommended to look at, and look at the requirements of the company.
5. What about CSS3 animation?
A: The link is the same as above
6. What about cSS3 selectors?
A: The link is the same as above
Js article
1. What is event delegation? Event bubble? Event capture? Why do browsers have two event mechanisms?
A: The reason why browsers have two event mechanisms is because of the differences between browsers. In IE, event bubble is used, while in other browsers, event capture is used.
2. What does this point to? The difference between bind, call and apply. On which prototype chain is bind, call, apply placed? why
A: Bind, apply, and call are on function.prototype
3. What about addEventListener?
A: The third argument is that the default event is executed during the bubble phase, which defaults to false, and true is executed during the capture phase.
4. Talk about promise? Dictate how to implement a promise. Promise’s other apis
A: Promise
Let, const, var
Let,const,var
6. What about closures?
Return an inner function inside the outer function to save the inner execution context of the outer function to the external reference. Tips: Whenever a new function is declared and assigned to a variable, store the function definition and the closure. The closure contains all the variables that were in scope when the function was created, similar to a backpack. Function definitions come with a little backpack that stores all the variables that were in scope when the function definition was created.
7. What about inheritance? Implementation of parasitic composite inheritance?
A: Don’t be asked about the JS prototype chain and inheritance
8. What about event Loop?
Answer: this article read once understand. This time, understand the JavaScript execution mechanism thoroughly
9. What about prototype chains?
A: Don’t be asked about the JS prototype chain and inheritance
10. What about array deduplication?
A: Relatively simple. Unlock a variety of JavaScript array deweighting posture
11. How to judge an array?
Answer: the commonly used 1. Arr instanceof Array (2) Object. The prototype. ToString. Call (arr) 3. Array. IsArray (arr)
12. What about js data types?
A: Basic types:
- String (string)
- Boolean (Boolean value)
- Number (number)
- Symbol (s)
- Null
- Undefined (undefined)
Tips:
- The five types of string, number, Boolean, and null undefined are collectively called Primitive and represent basic types that can’t be subdivided any further;
- (2) the value of the generated symbol is the value of the original type. (3) The value of the generated symbol is the value of the original type. (4) The value of the generated symbol is the value of the original type.
- Null and undefined are usually considered special values. The only value of these two types is the value itself.
Reference type: Object
13. How can I change an array? The difference?
Answer: [dry goods] JS array detailed operation method and parse collection
14. What about anti-shake throttling? How?
Answer: JS shockproof and throttling
Vue article
1. Talk about the bidirectional binding principle of VUE?
A:
Implement a listener Observer: iterate over the data Object, including the properties of the child property Object, using object.defineProperty () to add setters and getters to each property. In this case, if you assign some value to this object, that triggers the setter, so you can listen for changes.
Implement a parser: parse Vue template instructions, replace variables in the template with data, and then initialize the rendering page view, and bind the corresponding nodes of each instruction to update functions, add subscribers to listen to data, once the data has changed, receive notification, call update functions to update data.
Implement a subscriber Watcher: Watcher subscribers are the communication bridge between The Observer and Compile. Their main task is to subscribe to the message of attribute changes in the Observer. When the message of attribute changes is received, the corresponding update function in the Compile parser is triggered.
Implement a subscriber Dep: The subscriber uses a publish-and-subscribe design pattern to collect subscriber Watcher and manage both the listener Observer and subscriber Watcher in a unified manner.
Borrow a picture (from the book Vue.js) :
2. What is the difference between computed and watch?
A:
Computed: The value of computed is cached. Only when the value of the dependent attribute changes, the value of computed is recalculated the next time the value of computed is obtained.
Watch: More of a “watch” function, similar to the listening callback of some data, every time the listening data changes, the callback will be executed for subsequent operations;
The application scenarios are as follows: 1. Use computed when a value depends on other data because computed cache can be used to avoid recalculation every time a value is obtained.
2. When we need to perform asynchronous or expensive operations when data changes, we should use Watch. Use the Watch option to allow us to perform asynchronous operations (access an API), limit the frequency of the operation, and set the intermediate state before we get the final result. These are things that computational properties can’t do.
3. What about the life cycle of VUE?
A: borrow figure
4. What are the benefits of vUE equivalent to native JS? The characteristics of Vue?
Answer: according to personal situation brief.
Bidirectional data binding 2. Virtual dom3. market
MVVM is short for Model-View-ViewModel: Model stands for data Model, and it is also possible to define business logic for data modification and manipulation in the Model. We can call the Model the data layer because it only cares about the data itself and doesn’t care about any behavior View: user interface. When the ViewModel updates the Model, it updates to the View ViewModel via data binding: business logic layer, what data the View needs, the ViewModel will provide that data; The View has certain actions, and the ViewModel has to respond to those actions, so it’s Model for View. Summary: THE MVVM pattern simplifies the dependency between the interface and the business and solves the frequent data updates. MVVM in use, the use of two-way binding technology, so that the Model changes, the ViewModel will automatically update, and the ViewModel changes, the View will automatically change.
5. How does VUE compile?
A:
The function of the parser is to convert template strings to Element ASTs.
The job of the Optimizer is to find those static nodes and static root nodes and label them.
The code generator is used to generate render function code from element ASTs.
The principle of a parser is to intercept strings in small pieces, and then maintain a stack to store the DOM depth. Every time a tag is intercepted, it is pushed to the stack, and a complete AST is parsed after all strings are intercepted.
The optimizer recursively marks all nodes to indicate whether they are static or not, and then recursively marks the static root node again.
Code generators work by recursively piecing together strings of code that execute a function, calling different generation methods depending on the node type. If an element node is found, a _c(tagName, data, children) function call string is spelled, and data and children are also spelled using attributes in the AST. Finally spell out a complete render function code.
Easyhappy Vue template compilation principle:
What about vue’s Keep-alive API?
A: Keep-alive is a component built into Vue that allows included components to retain their state and avoid rerendering. It has the following features:
1. It is used together with routing and dynamic components to cache components.
2. Provide include and exclude attributes. Both support strings or regular expressions. Include means that only components with matching names will be cached. Exclude has a higher priority than include.
3. The hook functions activated and deactivated are activated when the component is activated and deactivated when the component is removed.
7. What are the routing modes of VUE?
A:
8. What about some of vUE’s routing guards?
A:
9. How is v-model implemented? Which takes precedence, v-for V-if?
A:
10. What are the communication modes of vUE components?
A:
11. Why can’t we listen for changes when we assign an array index directly? How to solve it?
A:
12. In what lifecycle is the interface normally requested?
A:
13. How does Vue’s virtual DOM work?
A:
14. What is the function of key in Vue?
A:
15. How about the optimization of VUE project?
A:
16. Describe what you did on a project that made you feel successful.
A:
17. What about Vue’s mixins? Do you encapsulate your own components? What are the considerations for encapsulating components? Let you encapsulate a paging component how do you design it?
A:
18. Hand-write an Eventbus?
A:
19. What are the two apis of Watch? How does it work?
A:
other
1. What about HTTP? What’s the difference between HTTPS and HTTP?
A:
2. What about TCP/IP? What about SSL/TLS? The handshake?
A: Interviewer, don’t ask me for three handshakes and four waves
3. What about XSS attacks? What about CSRF attacks? How to prevent it?
A: Web security is a must for you to understand
4. What about cookies? How are cookies spliced?
Answer: Yes; By joining together
5. Talk about the difference between cookie and session
A:
6. What’s in the request header?
A:
7. What about caching? Strong cache, negotiated cache?
A:
8. What about common status codes?
A:
9. What about digital certificates? HTTPS encryption process? Symmetric encryption or asymmetric encryption?
Answer: first asymmetric encryption, then symmetric encryption
10. Talk about some features of http2.0
A:
11. What happens from the input URL to the page rendering?
Answer: here can post the summary of a very powerful person!
From the input URL to the page loading process? How to perfect their front-end knowledge system by a problem!
12. What about cross-domain?
A: Common cross-domain solutions on the front end (full)
What are loaders and plugins in WebPack?
A:
14. What should I do if I want to package it into compatible code?
A:
15. What optimizations did you make with WebPack in your project?
A:
16. What about webPack’s automated routing?
A:
17. What about the basic configuration parameters of WebPack?
A:
18. Do you know TS? What is the difference between ts type and interface? What is an enum? What does it look like when compiled into ES5?
A:
19. What’s the difference between vue and you when you react? Advantages and disadvantages?
A:
20. React lifecycle? React Page rendering? Is the react setState principle synchronous or asynchronous?
A:
What is a functional component? What’s the difference between react hooks and class?
A:
What does useEffect do? In detail?
A:
23. What about design patterns? What design patterns are commonly used?
Answer: do not make advertisement, can buy the small book of repairing speech big guy, write of good
24. What about project performance optimization? What did you mention about reducing HTTP requests? When should requests be split and when should requests be merged?
A:
25. Talk about understanding data structures? Common algorithm problem?
Answer: I really don’t know this very much, recently bought repair speech big guy’s nugget small volume, make up for it, by the way paste some good article that read again recently
Front-end data structures and algorithms THAT I’ve been exposed to
How should the front end prepare the data structures and algorithms?
Introduction to front-end data structures and algorithms
26. Have you learned about automated deployment?
A:
27. Do you know WebSocket?
A:
28. Have you learned about Webworker? What is his principle?
A:
Conclusion:
Interview is also a process of summary, but also to comb their own knowledge, through the interview to check the leakage and fill in the gaps, to have a cognition of their knowledge level, close to the big factory.
Due to the limitations of my technical ability, please contact me in time if there is any error, thank you!
This article was typeset using MDNICE