Three years of interview experience sharing: four stages and three deciding factors of front-end interviews
青灯夜游
Release： 2022-12-16 19:59:03
forward
3733 people have browsed it
The employment situation this year is simply dark. Based on the "lucky mentality" that next year will be worse than this year, I chose to resign without hesitation. After a month and a half of hard work, I received a pretty good offer. The salary and platform have been greatly improved, but there is still a big gap with my psychological expectations. So the biggest conclusion is: don’t talk naked! Don't say anything naked! Don't say anything naked! Because the pressure brought to people during the interview and the psychological damage caused by the gap between reality and ideals are immeasurable, it is a good choice to survive in such an environment.
Next, we will summarize the following things that will be experienced in front-end interviews under normal circumstances. Four stages and three determining factors:
As a front-end staff, the depth and breadth of technology is ranked first. Three years is a dividing line. You must find your own right at this time. Orientation and direction.
Secondly, good communication and expression skills, clothing and performance and other off-site factors can increase the interviewer's recognition of you.
Some people are very skilled, but the interviewer feels uncomfortable during the interview. They think you are arrogant/sloppy/self-righteous/cannot express themselves clearly, so they will just reject you. That is the worst loss.
The following is a summary of my entire interview preparation and the questions I was asked, because during the interview process, the communication with the interviewer is not a simple endorsement to a large extent. It is best to pass the knowledge Express your own summary and conciseness, and then supplement and improve it on the spot based on the interviewer's questions. [Recommended learning: web front-end, programming teaching]
1. Self-introduction
The interviewer will ask you to introduce yourself , and does not limit the scope of self-introduction. The interviewer must want to know you from your self-introduction, so the introduction must be brief and smooth. Facing different interviewers, the content of self-introduction can be exactly the same. Therefore, it is important to prepare your words in advance, and be sure to pay attention: don’t stumble, be confident! Smooth expression and communication skills is also one of the interviewer’s assessment points for candidates. I have also been an interviewer. Candidates who are confident and generous are often more likely to be favored.
1. Personal introduction (basic situation) and main resume are all available, which must be short
2. What you are good at, including technical and non-technical. Technical people can understand your transition, and non-technical people can understand you as a person
3. Pick the most core projects of the projects you have done, and don’t introduce all the projects like endorsements
4. Some of your own ideas, interests or opinions, even your own career plans. If this gives the interviewer a feeling: keen on "tossing" or "thinking"
Example:
Hello interviewer, my name is xxx, I graduated from xx University in xx. Since graduation, I have been engaged in front-end development related work.
The technology stack I am good at is vue family bucket, and I have a certain degree of research on the use and source code of vue2 and vue3; the packaging tools are familiar with webpack and vite; I have dominated medium and large-scale projects from zero to one Experience and ability in project implementation.
In my previous company, I was mainly the person in charge of the xx product line, and my main responsibilities were. . . . . .
In addition to development-related work, he also has certain technical management experience: such as serving as a requirement review, UI/UE interaction review judge, responsible for development scheduling, member collaboration, reviewing member code, organizing regular meetings, etc.
I usually record some learning articles or study notes on the blog I built, and also write some original technical articles and publish them on the Nuggets, and won the xx award.
Generally speaking, try to keep your self-introduction between 3-5 minutes. The first priority is to be concise and to the point, followed by highlighting your abilities and strengths.
For ordinary technical interviewers, self-introduction is just a habitual opening statement before the interview. Generally, the basic information listed on the resume has already satisfied their basic understanding of you. But for supervisor-level interviewers or HR, they will value your personality, behavioral habits, stress resistance and other comprehensive abilities. Therefore, you should be as positive as possible during the interview process, have broad hobbies, like continuous learning, like teamwork, and be able to work overtime unconditionally, etc. Of course, I don't mean to let you cheat, but in this environment, these "side abilities" are also magic weapons that can improve your competitiveness to a certain extent.
2. Project Mining
In the current market situation, when you receive an interview notice, there is a high probability that it is because of your project experience and the position you are recruiting for. More in line.
Therefore, you should pay extra attention to the preparation of the project, such as:
Deep dig into the technologies used in the project
Control of projectoverall designideas
Management of projectoperation process
Team collaboration ability.
What are the
optimization points of the project
I won’t go into details because they vary from person to person. Just dig into the situation.
3. Personal
Let me talk about the individual first. When you pass the technical interview and reach the stage of supervisor and HR, no matter how awesome your current technology is, they will In addition to examining your personal potential, learning ability, personality and team integration and other soft skills, here are some questions that are easy to be asked:
Why did you change jobs?
Start directly from personal development to show your ambition:
I have always wanted to go to a larger platform, which not only has a better technical atmosphere, but also I learned more things
I want to expand my knowledge. Before, I always made xx products on the x end. The technology stack was relatively simple, so I studied xx.
I fell into a comfort zone in my previous job, and I could only do those things. I want to change my platform to expand my technical breadth, and be exposed to and learn some new technical systems, which will be more beneficial to my subsequent personal development.
Tell me about you and ordinary front-ends. What are your highlights?
1. I am good at planning and summarizing. I will conduct a comprehensive analysis of the projects I handle. One is business dismantling, using mind maps to dismantle the business of each module; the other It is to dismantle the code modules and distinguish each code module according to function. Go to development again. I think this is something that many front-ends who only do blind business development can't do2. I like to specialize in technology. I usually keep learning the source code of vue, and I also output my own technical articles, like the one I wrote before A line-by-line intensive reading of
I have a relatively serious temper and am more introverted, so I will also try to make myself more extroverted. One is to hold various review meetings. As a front-end representative, I need to prepare various materials and make speeches. So I do more technical sharing within the team and host regular meetings every week, which also gives me the courage to express and discuss.
Have you paid attention to any new technologies recently?
Package dependency management tool pnpm (no repeated installation of dependencies, non-flat node_modules structure, adding dependent packages through symbolic links)
Packaging tool vite (extremely fast development environment)
flutter (Google’s open source mobile application (App) development framework, focusing on cross-platform, high fidelity, and high performance)
rust (I heard it is the future base of js)
turbopack, the successor of webpack, is said to be 10 times faster than vite, webpack 700 times faster, and You Yuxi personally verified that it is not 10 times faster than vite
webcomponents
You are biased towards Should you explore in various directions or keep researching in a certain direction?
My personal plan is as follows: In 3-5 years, while improving my technical depth, I will also broaden my knowledge, that is, both in depth and breadth. To improve, it is mainly in terms of breadth. Only when you have a full understanding of the big front-end can you make better choices5-7 years is when you have enough knowledge to accumulate before you choose a certain direction of interest. Study further and strive to become an expert in that field
Team size, team specifications and development process
This varies from person to person, just prepare truthfully, because different scales The research and development models of teams vary greatly.
The goal of code review
1. The most important thing is the maintainability of the code (variable naming, comments, function unity principle, etc.)2. Extensibility: encapsulation capabilities (whether components and code logic are reusable, scalability) 3. ES new features (es6, ES2020, ES2021 optional chain, at) 4. Function usage specifications (for example, when using map as forEach) 5. Performance improvement, how to use algorithms to write more elegant and better performing code
How to lead a team
I was in a technical management role in my last company. 0,
Implementing development specifications, I have posted on the company's internal wiki, from naming, best practices to the use of various tool libraries. In the early stage when new people come in, I will give priority to follow up on their code quality
1.
Team division of labor: Each person is responsible for the development of a product alone, and then I will generally designate a few people to develop public modules
2, Code Quality Assurance: Their code will be reviewed every week, and cross-review codes will be organized, and the output articles of the modified results will be placed in the wiki
3, Regular organizational meetings : Regular organizational meetings are held every week to synchronize their respective progress and risks, and allocate work tasks according to their own progress
4, Technology sharing: We will also organize irregular technology sharing. In the beginning, it was just me sharing, such as the micro front-end system, ice stark’s source code
5, public demand pool: such as the upgrade of webpack5/vite; the introduction of the upgrade of vue2.7 setup syntax sugar; use of pnpm; topology map performance optimization
6, Optimization project: After the first version of the product came out, I also initiated a special performance optimization project to improve first-screen loading performance. Packaging volume optimization; let everyone be responsible for the corresponding optimization items
What do you think about overtime?
I think there are generally two situations when working overtime:
First, the project progress is tight, so of course the project progress comes first, after all, everyone depends on this for a living
The second problem is my own ability. If I am not familiar with the business or introduce a new technology stack, then I think I not only have to work overtime to keep up, but also use my free time to study hard and make up for my shortcomings
What are your interests and hobbies?
I usually like to read, that is, I read some books on psychology, time management, and some speech skills in WeChat reading
Then I write articles, because I found It’s easy to forget simply taking notes, because you only record other people’s content, and write your own original articles. In this process, a very high proportion of knowledge can be converted into your own things, so in addition to your own gold-mining articles, I also often output articles on project outputs to the wiki
My other hobbies are playing basketball and singing with friends
4. Technology
Be sure to pay attention to technical interviews:Be concise and to the point, be detailed appropriately, and if you don’t understand, just say you don’t understand. Because the interview process is a face-to-face communication process with the interviewer, no interviewer would like a candidate who chatters for a long time without talking about the key points. At the same time, during the speaking process, the listener will passively ignore the parts that he is not interested in, so It is necessary to highlight the core features of a certain technology and appropriately expand around the core.
Big companies will basically screen candidates through algorithm questions. There are no shortcuts to algorithms. You can only answer questions step by step and then answer questions again. Those who are weak in this aspect should plan in advance and study.
The technical interview process will mainly ask questions about technologies related to the front-end field. Generally, the interviewer will be based on your establishment, and more often, the interviewer will be based on the interview questions he has prepared before, or the project team where he is working. Asking questions about relatively familiar technical points, because they are all unknowns, so all aspects are quite demanding.
If you want to enter a medium-to-large company with good development prospects, you can’t fool yourself by just memorizing other people’s experiences. Although each summary here is very brief, they are all I refined some of the core knowledge points after comprehensive study of each knowledge point, so I am not afraid of the interviewer's "divergent thinking."
The interview process generally involves the consideration of the following eight major types of knowledge:
JS/CSS/TypeScript/Framework (Vue, React)/Browser and Network/Performance Optimization/Front-End Engineering/ Architecture/Others
#So the technical preparation before the interview is by no means accomplished overnight. It also requires daily accumulation. For example, you can use ten to twenty minutes a day to study one of the small knowledge points. Comprehensive study, in the long run, no matter how many years of interviews, it will be enough to talk eloquently.
Common JS interview questions generally include these
What is a prototype/prototype chain?
The essence of a prototype is an object.
When we create a constructor, this function will have a prototype attribute by default, and the value of this attribute points to the prototype object of this function.
This prototype object is used to provide shared properties for the instance object created through the constructor, that is, is used to implement prototype-based inheritance and property sharing
So The instance object we create through the constructor function will inherit the above attributes from the prototype object of this function
When reading the attributes of an instance, if it cannot be found, it will look for the attributes in the prototype associated with the object. If it cannot be found, it will look for the prototype of the prototype until it finds the top level (the top level is The prototype of Object.prototype, the value is null).
So The chain structure that is interconnected layer by layer through prototypes is called the prototype chain.
What is closure?
Definition: Closure refers to a function that references variables in the scope of other functions, usually implemented in nested functions.
Technically all js functions are closures. From a practical point of view, a function that meets the following two conditions is considered a closure
It still exists even if the context that created it is destroyed. (For example, returning from the parent function)
Free variables are referenced in the code (variables used in the function that are neither function parameters nor function local variables are called free variables)
Usage scenarios:
Create private variablesThe data in vue needs to be a closure package to ensure that the data in each data is unique and avoid data sharing caused by multiple references to the component
Prolong the life cycle of variablesThe lexical environment of general functions is in the function It will be destroyed after returning, but the closure will save a reference to the lexical environment where it was created. Even if the execution context where it was created is destroyed, the lexical environment where it was created still exists, in order to extend the life cycle of the variable.
Application
Curried functions
For example, counters, delayed calls, callback functions, etc.
Pointing to this
In most cases, the way the function is called determines the value of
this (runtime binding)
1. The global this in non-strict mode points to the window object, and the strict mode points to undefined2. This in the object's property method points to the object itself3. apply, call, bind You can change this to point to the first passed parameter4. This in the arrow function points to its parent scope, which itself does not exist this
The event loop of the browser ?
During the execution of js code, the corresponding execution context will be created and pushed into the execution context stack. If an asynchronous task is encountered, the task will be suspended and handed over to other threads to process the asynchronous task. When the asynchronous task is processed, the callback result will be added to the event queue. When all tasks in the execution stack have been executed, that is, when the main thread is idle, the first event callback result will be taken from the event queue, and this callback will be added to the execution stack and then executed. code, and so on, this process is called an event loop. The event queue is divided into
macro task queue and micro task queue. When the current execution stack is empty, the main thread will first check whether there is an event in the micro task queue. If there is an event, the micro task queue will be executed in sequence. The event in the task queue is called back until the micro task queue is empty; if it does not exist, it will be processed in the macro task queue.
Common macro tasks include setTimeout(), setInterval(), setImmediate(), I/O , User interaction, UI rendering
Common microtasks includepromise.then(),promise.catch(),new MutationObserver、process.nextTick()
The essential difference between macro tasks and micro tasks
Macro tasks have clear asynchronous tasks that need to be executed and callbacks, and require support from other asynchronous threads
Micro tasks have no clear asynchronous tasks that need to be executed, only callbacks, and do not require support from other asynchronous threads.
How data is stored in the stack and heap in JavaScript
1. The basic data type has a fixed size and is simple to operate, so it is placed on the stack Storage2. The size of the reference data types is uncertain, so put them into the heap memory and let them determine the size by themselves when applying for memory3. Separate storage in this way can make the memory Minimal occupancy. The efficiency of the stack is higher than that of the heap4. The variables in the stack memory will be garbage collected immediately after the execution environment ends, while all references to the variables in the heap memory must be completed before they can be recycled
Talk about v8 garbage collection
1. Carry out memory garbage collection into different generations according to the survival time of the object, and then use different recycling algorithms for different generations2. The new generation uses the space-for-time scavenge algorithm: the entire space is divided into two blocks, and variables only exist in one of them. During recycling, the surviving variables are copied to another block of space, and the non-surviving ones are recycled, and the operation is repeated over and over again
3. The old generation uses mark clearing and mark sorting. Mark clearing: traverse all objects to mark the objects that can be accessed (alive), and then recycle the inactive ones as garbage. After recycling, to avoid memory discontinuities, live objects need to be moved to one end of the memory through marking and sorting, and then clean up the boundary memory after the movement is completed
Function calling method
1. Ordinary function is directly called using () and passes parameters, such as: function test(x, y) { return x y}，test(3, 4)
2. Called as an attribute method of the object, such as: const obj = { test: function (val) { return val } }, obj.test(2)
3. Use call or applyCall, change the this point of the function, that is, change the execution context of the function
4, newYou can indirectly call the constructor to generate an object instance
defer and The difference between async
Under normal circumstances, when the script tag is executed, it will download and execute a two-step operation. These two steps will block the parsing of HTML;
async and defer can The script's download phase becomes asynchronous execution (synchronously with HTML parsing);
Async will execute js immediately after the download is completed, which will block HTML parsing;
defer will wait until all HTML parsing is completed and executed before the DOMContentLoaded event.
Browser event mechanism
DOM event flow three stages:
Capture stage: event The less specific nodes are the first to receive events, and the most specific nodes (trigger nodes) are the last to receive events. To intercept events before they reach their final destination.
For example, if you click on a div, the click event will be triggered in this order: document => => => ; <div>, that is, it is captured by the document and then propagated downward along the DOM tree, <strong>and triggers the capture event </strong> on each node until it reaches the actual target element. <li>
<p><strong>Target phase</strong></p>
<p>When the event reaches the target node, the event enters the target stage. <strong>The event is triggered on the target node </strong> (executes the function corresponding to the event), and then flows back in reverse until it is propagated to the outermost document node. </p>
</li>
<li>
<p><strong>Bubbling phase</strong></p>
<p>After the event is triggered on the target element, it will continue to bubble up layer by layer along the DOM tree until Reach the outermost root node. </p>
</li>
<p>All events must go through the capture phase and the target phase, but some events will skip the bubbling phase, such as the element gaining focus and losing focus blur which will not bubble</p>
<p><strong>Extension 1</strong></p>
<p>What is the difference between e.target and e.currentTarget? </p>
<ul>
<li>
<code>e.target Points to the object that triggers event listening.
e.currentTarget Points to the object to which the listening event is added.
For example:
<ul>
<li><span>hello 1</span></li>
</ul>
let ul = document.querySelectorAll('ul')[0]
let aLi = document.querySelectorAll('li')
ul.addEventListener('click',function(e){
let oLi1 = e.target
let oLi2 = e.currentTarget
console.log(oLi1) // 被点击的li
console.log(oLi2) // ul
console.og(oLi1===oLi2) // false
})
Copy after login
The event is bound to ul. When clicking on the li, the target is the clicked li, and the currentTarget is the ul of the bound event
In the bubbling stage of the event (the above example), e.currenttarget and e.target are not equal, but in the target stage of the event, e.currenttarget and e.target are equal
Function:
e.target can be used to implement event delegation , The principle is to add event listening to the parent element through event bubbling (or event capturing), and e.target points to the element that triggers the trigger event
type: Type of listening event, such as: 'click'/'scroll'/'focus'
listener: must be an object that implements the EventListener interface, or a function. When the monitored event type is triggered, it will be executed
options: Specify the optional parameter object related to the listener
capture: Boolean value, indicating whether the listener is Triggered when the event capture phase is propagated to EventTarget
once: Boolean value, indicating that the listener can be called at most once after being added. If true, the listener will be removed after being executed once.
passive: Boolean value, Indicates that the listener will never call preventDefault()
signal: optional, AbortSignal, when its abort() method is called , the listener will be removed
useCapture: Boolean value, the default is false, the listener is executed at the end of the event bubbling phase, true means it is executed at the beginning of the capture phase . The function is to change the timing of the event to facilitate interception/non-interception.
Vue Chapter
The author is mainly engaged in Vue-related development, and has also done react-related projects. Of course, react is only capable of doing projects. , so it is the kind of thing that is mentioned in the resume. The value of frameworks is not too many but their essence. Learning the Vue source code series makes me very confident in Vue. The same is true for the learning process. If you can master the principles of a framework, learning other frameworks is just a matter of time.
The difference between vue and react
1. Data variability
React advocates functional style Programming, immutable data and one-way data flow, view updates can only be achieved through setState or onchange
Vue designs responsive data based on data variability , automatically update the view by monitoring data changes
2. Writing method
React recommends using jsx inline style, which is all in js
Vue It is in the form of single file component (SFC), divided into modules (tmplate/script/style) within a component. Of course, vue also supports jsx form, which can be used when developing vue's ui component library
3 , diff algorithm
Vue2 uses double-ended comparison, Vue3 uses fast comparison
reactmainly uses the diff queue to save which DOMs need to be updated, get the patch tree, and then Unified operation to update DOM in batches. , you need to use shouldComponentUpdate() to manually optimize react rendering.
Extension: Do you know react hooks?
The writing of component classes is very heavy, and it is difficult to maintain if there are too many levels.
Function components are pure functions, cannot contain state, and do not support life cycle methods, so they cannot replace classes.
The design purpose of React Hooks is to enhance the functional component. You can write a fully functional component without using "classes" at all
##React Hooks means that components should be written as pure functions as much as possible. If external functions and side effects are needed, hooks should be used to "hook" the external code in.
Why does vue need to add a key to the rendering list?
Vue in the process of updating a group of child nodes of the same type of vnode (such as the list node rendered by v-for), in order to reduce the DOM Performance overhead of frequent creation and destruction: The update of the child node array without key is through the
in-place update
strategy. It will compare the lengths of the old and new child node arrays, first use the shorter length as the basis, and directly patch the part of the new child node. Then judge, if the length of the new child node array is longer, directly mount the remaining part of the new child node array; if the new child node array is shorter, uninstall the extra part of the old child node) .
So if the child node is a component or a stateful DOM element, the original state will be retained, and incorrect rendering will occur
. The update of the child node with key is called patchKeyedChildren. This function is the familiar place to implement the core diff algorithm. The approximate process is to synchronize the head node, synchronize the tail node, and process new Add and delete nodes, and finally use the method of solving the longest increasing subsequence to deal with the unknown subsequence. This is to
maximize the reuse of existing nodes, reduce the performance overhead of DOM operations
, and avoid the problem of child node status errors caused by in-place updates. To sum up, if you use v-for to traverse constants or the child nodes are nodes without "state" such as plain text, you can use the writing method without adding a key. However, in the actual development process, it is recommended to add the key uniformly, which can realize a wider range of scenarios and avoid possible status update errors. We can generally use ESlint to configure the key as a required element of v-for.
Negotiation caching is a process in which the cache result of the forced cache becomes invalid. The browser carries the cache identifier to initiate a request to the server, and the server decides whether to use the cache through the cache identifier.
The fields that control negotiation cache include last-modified / if-modified-since and Etag / if-none-match, the latter has a higher priority.
The general process is to pass the value of last-modified or Etag to the server through the request message for comparison with the corresponding value in the server. If it matches the result of if-modified-since or if-none-match in the response message If consistent, the negotiation cache is valid, the cached result is used, and 304 is returned; otherwise it is invalid, the result is requested again, and 200 is returned. After entering a piece of content, the browser will first determine whether the piece of content is search content or a URL. If it is search content, it will be combined with the default search engine to generate a URL. For example, Google browser is goole.com/search?xxxx. If it is a URL Will splice protocols, such as http/https. When the page does not listen to the beforeupload time or agrees to continue the execution process, the browser icon bar will enter the loading state.
Next, the browser process will send the URL request to the network process through IPC inter-process communication. The network process will first search for the resource in the cache. If there is one, it will intercept the request and return 200 directly. If not, it will enter. Network request process. The network request process is that the network process requests the DNS server to return the IP and port number corresponding to the domain name (if these have been cached before, the cached result will be returned directly). If there is no port number, http defaults to 80 and https defaults to 443 , if it is https, you also need to establish a TLS secure connection to create an encrypted data channel.
Then the TCP three-way handshake establishes the connection between the browser and the server, and then performs data transmission. After the data transmission is completed, wave the hand four times to disconnect. If
connection: keep-alive
is set, it can always Stay connected.
The network process will parse the data packets obtained through TCP. First, the data type will be determined based on the content-type of the response header. If it is a byte stream or file type, it will be handed over to the download manager for downloading. , then the navigation process ends. If it is of text/html type, the browser process will be notified to obtain the document for rendering.
The browser process gets the rendering notification and will judge whether it is the same site based on the current page and the newly input page. If so, it will reuse the rendering process created by the previous web page. Otherwise, it will create a new separate one. rendering process. The browser process sends the "Submit Document" message to the rendering process. When the rendering process receives the message, it will establish a data transmission channel with the network process. After the data transmission is completed, it returns the "Confirm Submission" message to the browser. server process.
After the browser receives the "Confirm Submission" message from the rendering process, it will update the browser's page status: security status, address bar URL, forward and backward history messages, and update the web page. At this time The page is a blank page (white screen).
Page rendering process
(key memory)
Finally, the rendering process performs page parsing and sub-resource loading of the document. The rendering process will convert HTML into a DOM tree structure, and css converted to styleSeets (CSSOM). Then copy the DOM tree and filter out non-displayed elements to create a basic rendering tree. Then calculate the style of each DOM node and calculate the position layout information of each node to build a layout tree.
Layers will be created independently where there is a layering context or where cropping is required. This is called layering. A layered tree will eventually be formed. The rendering process will generate a drawing list for each layer and submit it to the composition thread. , the composition thread divides the layer into tiles (to avoid drawing all the contents of the layer at once, and the viewport part can be rendered according to tile priority), and converts the tiles into bitmaps in the rasterization thread pool. After the conversion is completed, the synthesis thread sends the drawing block command DrawQuard to the browser process. The browser generates a page based on the DrawQuard message and displays it on the browser.
Shorthand:
The browser's rendering process parses html into a dom tree and css into a cssom tree. Then it will first copy a DOM tree to filter out the The displayed elements (such as display: none) are then combined with cssom to calculate the layout information of each dom node to build a layout tree.
After the layout tree is generated, it will be layered according to the layer's stacking context or cropped part to form a hierarchical tree. The rendering process then generates a drawing list for each layer and submits it to the composition thread. In order to avoid one-time rendering, the composition thread renders in blocks. It divides the layer into tiles and passes them through the rasterization thread pool. Convert tiles to bitmaps.
After the conversion is completed, the synthesis thread sends the command to draw the tile to the browser for display
The difference between TCP and UDP
UDP is User Dataprogram Protocol (User Dataprogram Protocol). IP transmits data packets to the designated computer through IP address information. Finally, UDP can distribute the data packet to the correct program through the port number. UDP can verify whether the data is correct, but it has no retransmission mechanism and will only discard incorrect data packets. At the same time, UDP cannot confirm whether it has reached the destination after sending it. UDP cannot guarantee the reliability of data, but the transmission speed is very fast. It is usually used in areas such as online videos and interactive games that do not strictly guarantee data integrity.
TCP is a transmission control protocol (Transmission Control Protocol) introduced to solve the problem that UDP data is easy to lose and cannot correctly assemble data packets. It is a connection-oriented, reliable, byte-based Transport layer communication protocol for streams. TCP provides a retransmission mechanism to deal with packet loss; and TCP introduces a packet sorting mechanism that can combine out-of-order data packets into complete files.
In addition to containing the destination port and local port number, the TCP header also provides a sequence number for sorting, so that the receiving end can rearrange the data packets through the sequence number.
The difference between TCP and UDP
The life cycle of a TCP connection will go through three stages: link stage, data transmission and disconnection stage.
Connection phase
is used to establish the link between the client and the server. The three-way handshake is used to confirm the sending and receiving of data packets between the client and the server. ability.
1. The client first sends a SYN message to confirm that the server can send data, and enters the SYN_SENT state to wait for confirmation from the server
2. When the server receives the SYN message, it will The client sends an ACK confirmation message, and the server also sends a SYN message to the client to confirm whether the client can send data. At this time, the server enters the SYN_RCVD state
3. The client receives ACK SYN message will send a data packet to the server and enter the ESTABLISHED state (establish a connection); when the server receives the ACK packet sent by the client, it will also enter the ESTABLISHED state and complete the three-way handshake
Transmission data phase
In this phase, the receiving end needs to confirm each packet;
So when the sending end sends a data packet, it is not received within the specified time The confirmation message fed back by the receiving end will be judged as packet loss, thus triggering the retransmission mechanism;
A large file will be divided into many small data packets during the transmission process. After the data packet reaches the receiving end, Sort them according to the sequence number in the TCP header to ensure data integrity.
Disconnection phase
Wave four times to ensure that the connection established by both parties can be disconnected
1. The client initiates to the server FIN packet, and enters the FIN_WAIT_1 state
2. The server receives the FIN packet, sends an acknowledgment packet ACK, and brings its own serial number, and the server enters the CLOSE_WAIT state. At this time, the client has no data to send to the server, but if the server has data to send to the client, the client still needs to receive it. After receiving the ACK, the client enters the FIN_WAIT_2 state
3. After the server completes sending the data, it sends a FIN packet to the client. At this time, the server enters the LAST_ACK state
4. The client receives the FIN The packet sends a confirmation packet ACK. At this time, the client enters the TIME_WAIT state and waits for 2 MSL before entering the CLOSED state; the server enters the CLOSED state after receiving the client's ACK.
For four waves, because TCP is full-duplex communication, after the active closing party sends the FIN packet, the receiving end may still send data, and the data channel from the server to the client cannot be closed immediately, so it is The FIN packet from the server cannot be combined and sent with the ACK packet from the client. The ACK can only be confirmed first, and then the server will send it again when there is no need to send data. FIN packet, so four waves must be four packet interactions
Content-length Do you understand?
Content-length is the http message length, the number of bytes expressed as a decimal number.
If content-length > actual length, the server/client will continue to wait for the next byte when reading the end of the message queue, and a no-response timeout will occur
If content -length < actual length, the first requested message will be intercepted, which will cause confusion in subsequent data parsing.
When you are unsure about the value of content-length, you should use Transfer-Encoding: chunked, which can divide the data to be returned into multiple data chunks until a termination block with a length of 0 is returned
Cross-domain common solutions
What is cross-domain?
If the protocol domain name and port number are the same, it is the same domain, if any one is different, it is cross-domain
Solution
1. Traditional jsonp: Use the <script> tag to have no cross-domain restrictions and only support the get interface. No one should use this anymore
<img src="https://time.geekbang.org/sendcoin?user=hacker&number=100" alt="Three years of interview experience sharing: four stages and three deciding factors of front-end interviews" >
It establishes a connection based on the HTTP protocol and has good compatibility with the http protocol, so it can pass the HTTP proxy server; there is no origin restriction.
WebSocket is an event-driven protocol, which means it can be used for true real-time communication. Unlike HTTP (where updates must be constantly requested), with websockets, updates are sent as soon as they are available
WebSockets will not automatically recover when the connection is terminated. This is a mechanism that needs to be implemented by yourself in application development , which is also one of the reasons why there are many client-side open source libraries.
devServers like webpack and vite use websocket to implement hot updates
Differences between Post and Get
Application scenarios: (GET request is an idempotent request) Generally, Get request is used in scenarios that will not affect server resources, such as requesting resources for a web page. (And Post is not an idempotent request) It is generally used in scenarios that will affect server resources, such as operations such as registering users. (Impotence means that the effect of executing a request method multiple times and executing it only once is exactly the same)
Whether to cache:Because the application scenarios of the two are different, the browser Get requests are generally cached, but Post requests are rarely cached.
The parameters are passed in different ways: Get passes parameters through the query string, and Post passes parameters through the request body.
Security: The Get request can put the requested parameters into the URL and send it to the server. This approach is less safe than the Post request because the requested URL will be retained in history.
Request length: Due to browser restrictions on url length, it will affect the length of the get request when sending data. This restriction is stipulated by the browser, not by the RFC.
Parameter type: The get parameter only allows ASCII characters, and the post parameter transfer supports more data types (such as files, pictures).
Performance Optimization Chapter
Performance optimization is a point that medium and large companies pay great attention to. Because it is closely related to the KPIs of front-end people, it will naturally be an interview question. Regular customer.
What are the means for performance optimization
From a cache perspective
Read some non-changing big data through localstorage/sessionStorage/indexdDB
Use http cache (strong cache and negotiation cache) to store content in memory or hard disk to reduce requests to the server
In terms of network, it is more commonly used to use CDN for static resources
In terms of packaging
routing Need to load
Optimize the size of packaged resources
Enable gzip compression resources
Load third-party libraries on demand
Code level
Reduce unnecessary requests and delete unnecessary code
Avoid lengthy js processing blocking the main thread (time-consuming and irrelevant DOM can be thrown to the web worker To process or split into small tasks)
You can use lazy loading for pictures, and use virtual scrolling for long lists
First screen speed improvement
Code compression, reducing the size of packaged static resources (Terser plugin/MiniCssExtratplugin)
Lazy loading of routes, the first screen will only request related resources of the first route
Use cdn to accelerate the third-party library. We are a toB product and need to be deployed on the intranet, so it is generally not used. toC is mostly used
ssr server-side rendering, and the server directly returns the spliced html page
You can obtain various performance indicator data through window.performance
The complete front-end monitoring platform includes: data collection and reporting, data sorting and storage, and data display
Web page performance indicators:
FP (first-paint) The time from the page loading to the first pixel drawn to the screen
FCP (first-contentful-paint), the time from the page loading to any part of the page content The time it takes to complete rendering on the screen
LCP (largest-contentful-paint), the time it takes from the page loading to the time the largest text or image element completes rendering on the screen
Для интервью, Самое важное, что нужно проверить, — это степень владения упаковочными инструментами.
Процесс выполнения и жизненный цикл webpack
Webpack — это пакет, который предоставляет функции упаковки статических ресурсов для современных JS-приложений.
Основной процесс состоит из трех этапов: этап инициализации, этап построения и этап генерации
1. На этапе инициализации параметры инициализации считываются из файла конфигурации, объекта конфигурации и параметров оболочки. и сравнивается со значением по умолчанию. Конфигурация объединяется в окончательные параметры, а также создает объект компилятора компилятора и инициализирует его рабочую среду
2. На этапе сборки компилятор выполнит свой метод run() для запустите процесс компиляции, который сначала подтвердит файл записи, начиная с файла записи, выполните поиск всех файлов, которые прямо или кратко связаны с файлом записи, для создания зависимых объектов, а затем создайте объекты модуля на основе зависимых объектов. на этот раз загрузчик будет использоваться для преобразования модуля в стандартный контент js, а затем вызывать js. Интерпретатор преобразует контент в объект AST, а затем находит модули, от которых зависит модуль, из AST. Этот шаг является рекурсивным до тех пор, пока все На этом этапе были обработаны файлы зависимостей записей. Наконец, компиляция модуля завершена и получены переведенное содержимое каждого модуля и граф зависимостей между ними.Этот граф зависимостей представляет собой взаимосвязь отображения всех модулей, используемых в проекте.
3.На этапе генерации объедините скомпилированные модули в фрагменты, а затем преобразуйте каждый фрагмент в отдельный файл и выведите его в список файлов.После определения выходного содержимого определите выходной путь и имя файла в соответствии с конфигурацией. , запишите содержимое файла в файловую систему
webpack's плагин и загрузчик
loader
webpack может понимать только файлы JS и JSON, загрузчик по сути является преобразователем, который может конвертировать другие типы файлов в файлы, распознаваемые веб-пакетом
Загрузчик преобразует модуль, созданный зависимым объектом, в стандартный js-контент во время создания этап веб-пакета. Например, vue-loader преобразует файлы vue в модули js, а графические шрифты преобразуются в URL-адреса данных с помощью url-loader. Это вещи, которые Webpack может распознать.
В модуле.rules можно настроить разные загрузчики для разбора разных файлов
плагин
Суть плагина – это класс с apply function
class myPlugin { apply(compiler) {} }
, эта функция Apply имеет компилятор параметров, который является объектом компилятора, созданным на этапе инициализации веб-пакета. Вы можете вызывать перехватчики в объекте компилятора для регистрации обратные вызовы для различных перехватчиков.Эти перехватчики действуют на протяжении всего жизненного цикла компиляции. Таким образом, разработчики могут вставлять в него определенный код с помощью обратных вызовов для выполнения определенных функций.
Например, плагин stylelint может указать тип файла и диапазон файлов, которые Stylelint должен проверить; HtmlWebpackPlugin используется для создания упакованных файлов шаблонов; MiniCssExtactPlugin извлекает все CSS в независимые фрагменты, а stylelintplugin может предоставлять стили во время этап разработки, функция проверки.
хэш-стратегия webpack
MiniCssExtractPlugin Браузер, с одной стороны, ожидает получения новейших ресурсов каждый раз, когда запрашивает ресурс страницы; с другой стороны , он ожидает, что объекты Cache могут быть повторно использованы, если ресурсы не изменились. В настоящее время, используя имя файла и значение хеш-функции файла, вы можете определить, был ли ресурс обновлен, просто используя имя файла. В Webpack есть встроенный метод расчета хеша.Для сгенерированных файлов вы можете добавить поле хеш-функции в выходной файл.
Webpack имеет три встроенных хеша
#hash
: каждый раз при сборке проекта будет генерироваться хеш, который связан для всего проекта, и в любом месте проекта есть изменения. Он изменится
Хеш будет рассчитываться на основе содержимого каждого проекта, что может легко привести к ненужным изменениям хеша и не способствует управлению версиями . Вообще говоря, возможностей напрямую использовать хэши мало.
##хеш содержимого
: Относится к содержимому одного файла. Если содержимое указанного файла изменится, хэш изменится. Содержимое остается неизменным, а значение хеш-функции остается неизменным. Для файлов CSS MiniCssExtractPlugin обычно используется для извлечения его в отдельный файл CSS. В настоящее время вы можете использовать contenthash, чтобы пометить его, чтобы обеспечить возможность обновления хеша при изменении содержимого CSS-файла.
хеш чанка
: относится к чану, сгенерированному упаковкой веб-пакета. Каждая запись будет иметь свой хэш. Вообще говоря, для выходных файлов мы используем chunkhash. ###
Потому что после упаковки веб-пакета каждый входной файл и его зависимости в конечном итоге будут генерировать отдельный js-файл.
Использование chunkhash в это время может гарантировать точность обновления всего упакованного содержимого.
Расширение: хэш загрузчика файлов У некоторых учащихся могут возникнуть следующие вопросы.
Часто можно увидеть, что при обработке некоторых изображений и упаковке загрузчика файлов шрифтов [name]_[hash:8].[ext]
Но если оно изменено, генерируется хеш изображения другими файлами проекта, такими как index.js, не изменилось.
Здесь следует отметить, что хэш-поле file-loader, заполнитель, определенный самим загрузчиком, не соответствует встроенному хеш-полю веб-пакета.
Хеш здесь заключается в использовании алгоритмов хеширования, таких как md4, для хэширования содержимого файла.
Поэтому, пока содержимое файла остается неизменным, хеш будет оставаться согласованным.
принцип vite
Vite в основном состоит из двух частей
Среда разработки
Vite использует просмотр Сервер анализирует импорт, компилирует и возвращает их на серверную сторону по требованию, полностью пропуская концепцию упаковки, и сервер может использовать их по мере необходимости (что эквивалентно преобразованию файлов, которые мы разрабатываем, в формат ESM и их отправке). непосредственно в браузер)
Когда браузер анализирует импорт HelloWorld из './comComponents/HelloWorld.vue', он отправляет запрос на текущее доменное имя для получения соответствующего ресурса (ESM поддерживает анализ относительных путей) , и браузер напрямую загружает соответствующий файл и затем анализирует его в модуль Record (откройте сетевую панель и вы увидите, что данные ответа — это все ESM типа js). Затем создайте экземпляр и выделите память для модуля, а также установите отношения отображения между модулем и памятью в соответствии с операторами импорта и экспорта. Наконец запустите код.
vite запустит сервер koa для перехвата запроса браузера на ESM, найдет соответствующий файл в каталоге по пути запроса, обработает его в формат ESM и вернет клиенту.
Горячая загрузка Vite устанавливает соединение через веб-сокет между клиентом и сервером. После изменения кода сервер отправляет сообщение, уведомляющее клиента о запросе на изменение кода модуля. После завершения горячего обновления это означает, какое представление было изменено.file повторно запросит этот файл, таким образом гарантируя, что на скорость горячего обновления не влияет размер проекта.
Среда разработки будет использовать esbuild для предварительного создания кеша для зависимостей. Первый запуск будет медленнее, а последующие запуски будут напрямую считывать кеш.
##Производство EnvironmentИспользуйте накопительный пакет для сборки кода и предоставления инструкций, которые можно использовать для оптимизации процесса сборки. Недостаток заключается в том, что среда разработки и производственная среда могут быть несовместимыми;
Сравнение между webpack и vite
Принцип горячего обновления Webpack просто если это произойдет, то если зависимость (например, a.js) изменится, то модуль, в котором находится зависимость, будет обновлен и появится новый модуль будет снова отправлен в браузер. Каждое горячее обновление будет повторно создавать bundle
. Только представьте, если зависимостей становится все больше и больше, даже если изменяется только один файл, теоретически скорость горячего обновления будет становиться все медленнее и медленнее. Vite использует браузер для анализа импорта, компилирует и возвращает по требованию на стороне сервера и полностью пропускает После прохождения концепции упаковки сервер можно использовать по мере необходимости Горячее обновление устанавливает соединение через веб-сокет между клиентом и сервером После изменения кода сервер отправляет сообщение для уведомления клиента запросить измененный код модуля, и горячее обновление будет завершено. Всякий раз, когда файл изменяется, этот файл запрашивается снова. Это гарантирует, что на скорость горячего обновления не влияет размер проекта. Итак, самая большая особенность Vite в настоящее время заключается в опыте разработки. Служба запускается быстро, и горячие обновления выполняются быстро, что, очевидно, оптимизирует работу разработчика. Производственная среда является накопительной, потому что нижний уровень является накопительным, и накопительным больше подходит для небольших баз кода.От расширения Он не так хорош, как веб-пакет с точки зрения функциональности и функциональности.Вы можете использовать Vite в качестве сервера разработки сервера и использовать веб-пакет для производственной упаковки.
Какие оптимизации были сделаны
0. Обновите версию веб-пакета с 3 до 4. Фактические измерения показывают, что скорость упаковки увеличивается на десятки секунд 1. SplitChunksPlugin разделяет общий модуль и выводит отдельные фрагменты. Как и некоторые сторонние зависимые библиотеки, его можно разделить отдельно, чтобы отдельные фрагменты не были слишком большими. 2.Функция DllPlugin такая же, как и выше.Эта зависимая библиотека эквивалентна отделению от бизнес-кода.Только когда версия самой зависимой библиотеки изменится, она будет переупакована, улучшая скорость упаковки 3. Работа загрузчиков синхронна, каждый модуль будет выполнять все загрузчики
Вы можете использовать один из, пока соответствующий загрузчик соответствует, загрузчик не продолжит работу для выполненияИспользуйте HappyPack для преобразования синхронного выполнения загрузчика Параллельно, например (style-loader, css-loader, less-loader объединяются и выполняются)
4. исключение/включение указывает диапазон соответствия; alias указывает псевдоним пути;5. постоянное хранилище кэш-загрузчика; 6. Проект ESM включает тег useExport и использует встряхивание дерева 7.исключить/включить для указания диапазона соответствия;псевдоним указывает псевдоним пути;постоянство загрузчика кэша Хранилище;8.terserPlugin может обеспечить сжатие кода, удаление комментариев и пробелов; MiniCssExtractPlugin сжимает CSS###
процесс выполнения запуска npm
0. Элемент конфигурации скрипта можно определить в файле package.json, который может определять ключ и значение запущенного скрипта
1. Во время установки npm npm прочитает конфигурацию и выполнит программную ссылку скрипта на каталог node_modules/.bin, одновременно . /bin Добавьте в переменную среды $PATH, поэтому, если вы запускаете команду напрямую глобально, она будет искать в глобальном каталоге. Если команда не может быть найдена, будет выдана ошибка сообщил. Например, npm run start выполняет webpack-dev-server с параметрами
#2. Другая ситуация — просто выполнить команду сценария, например npm run build, и фактически запустить node build.js., то есть: используйте node для выполнения файла build.js
Разница между ESM и CJS
ES6
ES6 Модуль является ссылкой, и переназначение вызовет ошибку компиляции.Указатель на его переменную нельзя модифицировать, но можно изменить значение внутреннего атрибута.
Значения в модуле ES6 динамические ссылки только для чтения.
Только для чтения, то есть значение импортируемой переменной не может быть изменено.Импортированная переменная доступна только для чтения, независимо от того, является ли она базовым типом данных или сложным типом данных. Когда модуль встречает команду импорта, создается ссылка только для чтения. Когда скрипт фактически выполняется, значение будет получено из загруженного модуля на основе этой ссылки, доступной только для чтения.
Для динамики, если исходное значение изменится, значение, загруженное при импорте, также изменится. Будь то базовый тип данных или сложный тип данных.
При циклической загрузке модули ES6 динамически ссылаются. Пока существует некоторая ссылка между двумя модулями, код сможет выполняться.
CommonJS
Модуль CommonJS представляет собой копию (мелкую копию), его можно переназначать, а указатель можно изменять;
Для базового типа данных относится к репликации. То есть он будет кэшироваться модулем. При этом переменные, выводимые этим модулем, можно переназначить в другом модуле.
Для сложных типов данных это поверхностная копия. Поскольку объекты, на которые ссылаются два модуля, указывают на одно и то же пространство памяти, изменения значения модуля повлияют на другой модуль. Когда модуль загружается с помощью команды require, будет запущен весь код модуля.
Когда команда require используется для загрузки того же модуля, модуль не будет выполняться снова, но будет получено значение из кеша. Другими словами, независимо от того, сколько раз загружается модуль CommonJS, он будет запущен только один раз при первой загрузке. Если он загружен позже, будет возвращен результат первого запуска, если только системный кеш очищается вручную.
При циклической загрузке все коды скриптов будут выполняться при необходимости. После того, как модуль «загружен в цикле», выводится только исполняемая часть, а невыполненная часть выводиться не будет.
Шаблоны проектирования
Режим агента
Режим агента: укажите замену или заполнитель для символа объекта в чтобы контролировать доступ к ней
Например, чтобы реализовать функцию отложенной загрузки картинок, сначала используйте loading картинку, чтобы занять место, а затем загружайте картинку асинхронно и ждите пока картинка не загрузится.Затем загрузите готовое изображение в тег img
Шаблон декоратора
Определение шаблона декоратора: без изменения сам объект включен, динамическое добавление методов к объектам во время работы программы
обычно используется для сохранения исходных методов неизмененными, а затем монтирования других методов к исходным методам для удовлетворения существующих потребностей.
Декоратор типа typescript является типичным шаблоном декоратора, а примесь в vue
Шаблон с одним регистром
гарантирует, что класс имеет только экземпляр и предоставить глобальную точку доступа к нему. Метод реализации заключается в том, чтобы сначала определить, существует ли экземпляр. Если он существует, он будет возвращен напрямую. Если он не существует, он будет создан, а затем возвращен. Это гарантирует, что класс имеет только один объект экземпляра
Например, субприложение Ice Stark, один раз гарантированно отрисовывается только одно субприложение
Режим наблюдателя и режим публикации-подписки
#1 Хотя в обоих режимах есть подписчики и издатели (конкретных наблюдателей можно считать подписчиком, а конкретную цель можно считать издателем), но режим наблюдателя запланирован конкретной целью, а режим публикации/подписки единообразно корректируется центром планирования, поэтому между подписчиком и издателем режима наблюдателя существуют зависимости, а в модели публикации/подписки - нет.
2. Оба шаблона можно использовать для слабой связи, улучшения управления кодом и возможности повторного использования.
3. В режиме наблюдателя наблюдатель знает Субъекта, а Субъект ведет записи о наблюдателе. Однако в модели публикации-подписки издатель и подписчик не знают о существовании друг друга. Они общаются только через агента сообщений
4. Режим наблюдателя большую часть времени является синхронным. Например, при возникновении события субъект вызывает метод наблюдателя. Модель публикации-подписки в основном асинхронна (с использованием очереди сообщений)
Другие
Регулярное выражение
Какой тип данных является регулярным выражением?
— это объект, let re = /ab c/ эквивалентно let re = new RegExp('ab c')
Обычный жадный режим и нежадный режим?
Квантор
*: 0 или более раз; ?: 0 или 1 раз; : от 1 до нескольких раз; {m}: появляется m раз; {m,}: появляется как минимум m раз; {m, n}: появляется от m до n раз
Жадный режим
#В обычных правилах квантификатор, указывающий количество раз, по умолчанию является жадным и будет соответствовать максимальной длине как как можно больше, например a* будет соответствовать как можно большему количеству a в обратном направлении от первого соответствующего a, пока a не исчезнет.
Нежадный режим
Добавьте ? после квантора, чтобы стать нежадным режимом. Нежадный режим означает поиск минимальной длины и удовлетворение условий
Жадные и нежадные функции
Как жадный, так и нежадный режим требуют обратного отслеживания для выполнения соответствующей функции
Эксклюзивный режим
Эксклюзивный режим очень похож на жадный режим. Эксклюзивный режим будет соответствовать как можно большему количеству совпадений. Если сопоставление не удастся, оно завершится без возврата, что экономит время.
Запись: используйте
после квантификатора. Преимущества и недостатки: монопольный режим имеет хорошую производительность и может сократить время сопоставления и ресурсы ЦП; но в некоторых случаях сопоставление невозможно быть достигнуто, например:
#Обычный
Текст
Результат
жадный режим
a{1,3}ab
aaab
match
не жадный режим
a{1,3}?ab
aaab
Match
##Эксклюзивный режим
a{1,3} ab
aaab
не соответствует
a{1,3} ab to соответствует строке aaab, a{1,3} будет использовать все первые три символа a и не будет выполнять возврат.
Обычное регулярное сопоставление
Оператор
Описание
Экземпляр
#.
представляет любой одиночный символ
[ ]
Набор символов, задающий диапазон для одного символа
[abc]
представляет a, b, c, [a-z] представляет один символ a-z
[^ ]
Набор символов, дающий диапазон исключения для один символ
[^abc]
представляет один символ, который не является a, b или c
##_
Предыдущий символ расширяется ноль или бесконечное количество раз
abc_
представляет ab, abc, abcc, abccc и т. д.
##`
#Любой из левых и правые выражения
` abc
def` означает abc, def
$
соответствует концу строки
abc$
Представляет abc и в конце строки
#( )
Знак группировки является только внутренним. Вы можете использовать
(abc)
для обозначения abc, `(abc
#def)` для обозначения abc, def
\D
Нечисловой
#\d
Число, эквивалентное 0-9
##\S
Видимые символы
##\s
Пробелы (пробелы, новые строки, табуляции и т. д.)
##\W
Несловесные символы
##\w
символов слова, эквивалентных [a-z0-9A -Z_]
## Соответствует началу строки
^abc
означает abc И в начале строки
# {m,n}
перед расширением Символ от m до n раз
ab{1,2}c означает abc, abbc
{m}
Расширение предыдущего символа m раз
ab{2}c означает abbc
#{m,}
Соответствует предыдущему символу как минимум m Times
function multiple(a, b) {
let result = 0;
for (let i = 0; i < b; ++i)
result += a;
return result;
}
const assert = require('assert');
assert.equal(multiple(1, 2), 3));
Copy after login
2、常见单测工具：Jest，使用示例
const sum = require('./sum');
describe('sum function test', () => {
it('sum(1, 2) === 3', () => {
expect(sum(1, 2)).toBe(3);
});
// 这里 test 和 it 没有明显区别，it 是指: it should xxx, test 是指 test xxx
test('sum(1, 2) === 3', () => {
expect(sum(1, 2)).toBe(3);
});
})
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
As a front-end staff, the depth and breadth of technology is ranked first. Three years is a dividing line. You must find your own right at this time. Orientation and direction. 
![Front-end Vue3 actual combat [handwritten vue project]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
