In general, this set of questions is more basic, but it is also some of the most frequently asked interview questions in front-end interviews, which is suitable for everyone to consolidate and practice Xi.
1.An understanding of the Flex layout and its use cases.
Flex Layout is a flexible layout that allows child elements within a container to adapt to size, position, and spacing, making it ideal for mobile development. By setting the properties of containers and items, various layout methods can be realized, such as horizontal centering, vertical centering, equal division, and flow layout. In actual development, you can use Flex Layout to achieve a variety of layout effects such as responsive design, grid layout, navigation menu, card list, etc.
2.An introduction to prototypes and prototype chains in JS.
A prototype in j**ascript is a property that every function object has, which points to an object that contains shared properties and methods. When we create a new instance of an object, the object inherits the properties and methods on the prototype of its constructor. The archetypal chain is connected by the proto property of an object, through which an object can access the properties and methods of its prototype object. These layers of connections form a prototype chain that makes all objects eventually accessible to the objectproperties and methods on prototype.
3.How many ways are there to pass values between react components?
Parent Component Passes Properties (props) to Child Components: You can use props to pass data from Parent Component to Child Component, which can be used by Child Components to render and manipulate as needed.
Child Component Passes Events to Parent Component: Event handlers can be defined in Child Components and these functions can be passed to Parent Component using props. When a child component triggers an event, the parent component's event handler can be called via props.
Context: Contexts allow data to be shared in the component tree without having to be passed through props. Contexts provide a way to pass information between ancestor and descendant components, but should be used sparingly, as overuse of contexts can lead to increased coupling between components.
Publish-subscribe pattern: You can use the event publish-subscribe mechanism to implement communication between components. One component can publish messages to an event bus (or event hub), and the other components can subscribe to those messages and respond when needed.
Shared state: You can put the state in a shared store, such as Redux or Mobx, and then get and modify the state in individual components. Shared state enables efficient component communication, but it needs to ensure that the state is consistent and correct.
4.What are the common horizontal and vertical methods?
5.Tell me about the difference between a class component and a function component?
Syntactic differences: A functional component is a pure function that takes props arguments and returns a react element. Class components are required to inherit from reactcomponent, and the class component needs to create a render and return a react element, which is more syntactically complex. Calling method Functional components can be called directly to return a new react element; When a class component is called, it needs to create an instance, and then return a react element by calling the render method in the instance. State Management Functional components do not have state management, while class components do. There are no specific requirements for the Use Scenario class component. Functional components are generally used in large projects to divide large components (functional components do not need to create instances, all are more efficient), and in general, functional components can be used instead of class components, which improves efficiency. 6.What happens if I enter an address enter into the address bar?
1. Enter the URL in the address bar of the browser and press enter. 2. The browser looks up whether the current URL has a cache and compares whether the cache is expired. 3. DNS resolves the IP address corresponding to the URL. 4. Establish a TCP connection based on IP (three-way handshake). 5. http initiates a request. 6. The server processes the request, and the browser receives the HTTP response. 7. Render the page and build the DOM tree. 8. Close the TCP connection (four wave of the hand)7Say for....in and for....The difference of of?
for...The in loop is mainly for traversing objects, and is not suitable for traversing arrays; for...Of loops can be used to iterate over arrays, class array objects, strings, set, map, and generator objects.
8.Convert the virtual DOM to the real DOM
First, compare the differences between the old and new virtual DOM trees to find out what needs to be updated. Then, a local update is made based on the differences, and a series of DOM operation instructions are generated. Next, execute these instructions in batches to apply the updates to the real DOM. Finally, the update is complete, and the user can see the corresponding changes on the page. 9.Implement throttling and anti-shake functions.
Throttling: It is allowed to run only once at most in each time period. For example, in the process of adjusting the window, the event has been triggered at a high frequency, and the throttling function can be used to trigger it at most once in a certain interval period. Anti-shake: In high-frequency calls, only if there is enough idle time, ** will be executed once, the common one is the input change event, and only the pause input event is greater than the specified time, ** will be executed once. 10.What's the difference between clicking the refresh button or pressing F5, Ctrl+F5 (force refresh), and press Enter in the address bar?
Click the Refresh button or press F5:The browser directly expires the local cache file, but with if-modifed-since, if-none-match, which means that the server will check the freshness of the file, and the return result may be 304 or 200. The user presses Ctrl+F5 (Force Refresh):Not only will the browser expire the local file, but it will also not bring if-modifed-since, if-none-match, which is equivalent to never requesting it before, and the return result is 200. Address bar enter: The browser initiates a request, and according to the normal process, the local check is whether it is expired, and then the server checks the freshness, and finally returns the content. 11.Implement template string parsing.
Click below to read the original article and see the detailed answer.
12.What fields does a cookie have and what are their functions?
13.Introducing the promiserace
When passed to a promiseWhen any of the iterable promise objects in the race object is solved or rejected, the returned promise object is immediately resolved or rejected, and the value or reason of the first resolved or rejected promise is adopted.
This feature makes promisesRace is very useful when dealing with race conditions. For example, you can use promiserace to implement the timeout function, that is, if an asynchronous operation does not complete within the specified time, it will be processed accordingly.
14.Tell us about the difference between slice splice split?
15.The rendering process of the browser.
First, parse the received document and build a DOM tree based on the document definition, which is composed of DOM elements and attribute nodes. The CSS is then parsed to generate a CSSOM rule tree. Build a render tree based on the DOM tree and the CSSOM rule tree. The nodes of the render tree are called render objects, which are rectangles containing properties such as color and size, and the rendered objects correspond to DOM elements, but this correspondence is not one-to-one, and invisible DOM elements are not inserted into the render tree. There are also DOM elements that correspond to several visible objects, which are generally elements with complex structures that cannot be described by a single rectangle. When rendered objects are created and added to the tree, they have no position or size, so when the browser generates the render tree, it will be laid out according to the render tree (also known as reflow). At this stage, what the browser has to do is figure out the exact location and size of the individual nodes in the page. Often this behavior is also referred to as "auto-reflow". The layout phase is followed by the draw phase, which traverses the render tree and calls the rendered object's Paint method to display their contents on the screen, drawing using the UI base components. 16.Tell us about your understanding of the box model?
There are two types of box models in CSS3: the standard box model, the IE box model, and the box model are composed of four parts, namely margin, border, padding, and contentThe difference between the standard box model and the IE box model: When setting width and height, the corresponding ranges are different1, the range of the width and height attributes of the standard box model only includes content2, the range of the width and height attributes of the IE box model includes border, padding and content, and the box model of the element can be changed by modifying the box-sizing attribute of the element; 1. box-sizing: content-box represents the standard box model (default) 2. box-sizing: border-box represents the IE box model (weird box model) 17What Is the Principle of Bidirectional Data Binding in Vue?
Two-way data binding is:Data hijacking + pub/sub pattern (observer pattern).。vue2 iterates through all properties in data at instance initialization and usesobject.definepropertyTurn all of these properties into getter setters. And hijacking individual property getters and setters, publishing messages to subscribers when the data changes, triggering the corresponding listen**, and there are several problems in betweenVue3 uses proxies to monitor changes in data。Proxy is a feature provided in ES6 that defines custom behaviors for basic operations (e.g., property lookups, assignments, enumerations, function calls, etc.). 18.Introducing the promiseany
with promiserace is different, promiseAny waits for all promise objects passed to it to be rejected before rejecting them, and only when at least one promise object is resolved, the returned promise object will be resolved. It will take the value of the first solved promise as its solution value.
This feature makes promisesAny is useful in cases where multiple asynchronous operations are handled, and as long as one operation completes successfully, the associated logic can continue to be executed. If all else fails, you can add a message in the promiseAny returns a promise object.
19.Application scenarios for closures.
returnReturning a function function as a parameter IIFE (self-executing function) is used to use the ** function for cyclic assignment, which is to use the closure throttling anti-shake function Curryization.