On 24th, I had an interview with a Chengdu-based Company, Zhisuangyu. Compared with the last interview, I still made some progress this time, but unfortunately I failed to be shortlisted for the next round of interview. Know shame and then brave, make persistent efforts, summary summary, meet the next interview!

Self-introduction + project introduction

The interview questions

1. This section describes the elastic layout

My answer

Flexible layout, also known as Flex layout, replaces the previous "position+display+float", can be simple, fast layout page.Copy the code

2. Properties of the elastic layout

My answer

-flex-direction - flex-wrap - flex-flow - justify-content - align-itemsCopy the code

3. The difference between space-between and space-around

My answer

It simply says the amount of space between their layouts, the width is differentCopy the code

Summary answer

Space-between the left-most and right-most items fit the left or right border, and the spacing between items is equal. Space-around Margin of left and right direction of each item is equal. The space between the two items will be large.Copy the code

4. Calculation rules for spacing between space-between and space-around

My answer

NullCopy the code

Conclusion answer

1. Total width = width of item + 1 spacing + width of item + 1 spacing + width of item 1.1. Total line width = 0.5 space + width of item + 1 space + width of item + 1 space + width of item + 0.5 space 2.1. The total width of each item is reduced by 2.2. Assign the remaining width to the spacing proportionallyCopy the code

5. CSS class selector

My answer

Must have an appropriate class or className value to use.Copy the code

Conclusion answer

1. Combine element selectors. 2. Multi-class selectorsCopy the code

6. Grid layout properties

My answer

Display: grid; display: grid; display: grid; 5, repeat: repeat(number, value) 6, scale: fr (e.g. grid-template-columns: 1fr 2fr; The container is divided into two columns, two columns are twice as wide as one columnCopy the code

Conclusion answer

You can refer to Nguyen one of this article at http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.htmlCopy the code

7. Closure

My answer

Function returns a function inside that has a reference to a variable in the parent scope. Advantage: Private variables are stored in memory for a long time and will not disappear. Disadvantage: If not released, memory leaks may occurCopy the code

8. Recycling

My answer

Garbage collection is when the execution environment takes care of variables that are not needed and frees their memory.Copy the code

Conclusion answer

Js garbage collection mechanism can refer to this article, introduced the garbage collection is what, when to clean up and how to clean up, and the performance impact of https://juejin.cn/post/6844903781079973902Copy the code

9. Basic data types

My answer

Number, String, Boolean, Null and Undefind, Symbol (ES6), BigInt (ES11)Copy the code

10. Differences between base data types and reference data types

My answer

Storage location: 1. Basic data types are stored in stacks. 2. The value of the reference data type is in the heap, and the reference address is in the stack. 1. Basic data types are passed by value. 2. Reference data types are passed by reference, and copies are passed.Copy the code

11. Deep and shallow copies

My answer

- Shallow copy: If the attribute is a basic data type, the value of the basic type is copied. If the attribute is a reference data type, the memory address of the reference type is copied. The value of the new copy will affect the original value - Deep copy: A deep copy is a complete copy of memory, creating a new memory space in the heap, completely independent of the original object. Modifying the new object does not affect the original object. Deep copy methods: 1. Shallow copy + recursion 2. Serialization and deserialization: json.stringify json.parseCopy the code

12. Difference between functional components and class components

My answer

1. Define components: Class components are defined as class components, and function components are defined as javascript functions. State & Life cycle: Class components update state using setState and life cycle, function components update state using useState in hooks, no life cycle 4. Get render-time values: Class components are caught using closures, function components use hooks.Copy the code

13. Transfer values across components in React

My answer

I answered dVA for cross-level component transferCopy the code

Conclusion answer

Context provides a way to pass data through the component tree, eliminating the need to manually pass props properties at every level. 1. Call React. CreateContext () to create the Provider and Consumer components 2. Use the Provider component as the parent node. 3. Set the value property, which indicates the data to be transmitted. Call the Consumer component to receive data. (In the Consumer component, arguments to the callback function are those passed by the Provider.)Copy the code

14. Network request

My answer

The first step is to enter the target URL in the browser, and then send it to DNS to obtain the corresponding IP address, then link TCP protocol, send HTTP or HTTPS request to the server, and then the server responds to the request, returns the HTML source file to the client, and finally completes the page rendering.Copy the code

Conclusion answer

You can refer to this article https://www.cnblogs.com/zzm96/p/12740055.htmlCopy the code

15. What are caches? What’s the difference?

My answer

The differences between strong cache and negotiated cache are as follows: 1. Strong cache: Does not send a request to the server, but directly reads resources from the cache. In the Network option of the Chrome console, you can see that the request returns a status code of 200. 2. Negotiation cache: sends a request to the server. The server will judge whether the negotiation cache is matched according to some parameters of the request header. What they have in common is that they both read resources from the client cache; The difference is that strong caches don't make requests, negotiated caches doCopy the code

16. What are HTTP status codes?

My answer

301 // Permanent redirection 3. 302 // Temporary redirection 4. 304 // Resource not modified, using negotiation cache 5. Use GET mode 6. 400 // A syntax error occurs in the request packet 7. 401 // No login, authentication is required 8. 404 // Resource does not exist 10. 408 // Request timeout 11. 500 // Server internal error 12. 503 // Server busy or maintenance (request too frequent) 13. 505 // HTTP version of request not supportedCopy the code

17. Three handshakes

My answer

First: the client can send requests. Second: the server can accept and send requests. Third: the client can accept requestsCopy the code

18. What are the methods of cross-domain communication

My answer

1. Jsonp (using script tag without cross-domain limitation of vulnerability implementation. Disadvantages: Only support GET requests). 2. Set access-Control-allow-origin to specify the domain name of accessible resources. 3.Node acts as an intermediate proxy. 4.Nginx reverse proxy. 5.Websocket is a persistent protocol of HTML5, which realizes the full-duplex communication between browser and server, and is also a cross-domain solution. 6. Various ways to nest iframes.Copy the code

19. Local storage for browsers? What’s the difference?

My answer

The localStorage of a browser is divided into cookies, localStorage, and sessionStorage. Differences: 1. Cookies are passed back and forth between the browser and the server, while the other two types are only stored locally. 2. SessionStorage is only valid until the current browser window is closed, localStorage is always valid even if the current window is closed 4. Cookies are shared in all same-source Windows, localStorage through cookies, SessionStorage is not shared across different browser Windows, even on the same page.Copy the code

20. Return

My answer

Requirements of interns company technology stack, project directionCopy the code

conclusion

I didn't ask much, about 20 bits and pieces, and I still didn't review some knowledge and failed to enter the next round of interview. Failure is always the mother of success, as long as the improvement over time, go!Copy the code