Some questions often asked during the interview. Come and see how many correct answers you can get

Write it at the front

Briefly src And href The difference between

🥦 Examination site

Main investigation HTML in src and href Differences in use .

🥦 answer

href It points to the location of network resources , Build and current elements ( Anchor point ) Or the current document ( link ) Links between , For hyperlinks .

src Is pointing to the location of external resources , The content pointed to will be embedded in the document where the current label is located ; In the request src Resources will be downloaded and applied to the document , for example js Script ,img Pictures and frame Equal elements . When the browser resolves to the element , Other resources download and processing will be suspended , Until the resource is loaded 、 compile 、 completion of enforcement , The same goes for elements like pictures and frames , Similar to embedding the pointed resource in the current tag . That's why will js The script is at the bottom, not the head .

once http Request process for

Examination site

Main investigation http Basic flow .

answer

1. Domain name resolution

2. launch TCP Of 3 The second handshake

3. establish TCP Initiate... After connecting http request

4. Server response http request , The browser gets html Code

5. Browser parsing html Code , And ask for html Resources in the code

6. The browser renders the page to the user
   

The difference between synchronous and asynchronous

Examination site

This is a common test site in front-end interview , It mainly examines students' understanding of synchronization and asynchrony
.

answer

Synchronization is blocking mode , Asynchronous is non blocking mode

Synchronization is when a process executes a request , If the request takes a while to return information , Then the process will wait , It doesn't continue until the return message is received ;

Asynchrony means The process doesn't need to wait all the time , Instead, continue to do the following , Regardless of the status of other processes . When a message is returned, the system will notify the process to process , This can improve the efficiency of execution .

Deep copy and light copy

Examination site

This question is also the focus of the front-end interview , Mainly investigate the front-end students' understanding of deep / Understanding of shallow copies and the differences between them .

answer

Shallow copy is to create a new object , This object has an exact copy of the original object property values . If the attribute is a basic type . The copied values are the basic types , If the property is a reference type , Copy is the memory address .
Deep copy is a complete copy of an object from memory , Open up a new area from heap memory to store new objects .
difference ： Shallow copy basic types do not affect each other before , Reference type one of the objects has changed the address , Will affect another object ; Deep copy
Changing the new object will not affect the original object , They didn't affect each other before .

The front-end interface is composed of three layers

Examination site

This topic mainly investigates the three-tier structure of the front-end interface .

answer

The web page is divided into three levels , namely ： The structure layer 、 The presentation layer 、 Behavior layer .

1. Structure layer of web page （structurallayer） from HTML or XHTML Markup languages like these are responsible for creating . label , That's the words in angle brackets , These tags do not contain any information about how to display the content .
2. The presentation layer of the web page （presentationlayer） from CSS Responsible for creating .
3. The behavior layer of the web page （behaviorlayer） Be responsible for answering " How the content should react to the event " This is a problem .

html in action Methodical get and post The difference between

Examination site

This interview question mainly focuses on form In the form get and post The difference of .

answer

1. Get It's used to get data from the server , and Post It is used to transfer data to the server .
2. Get Set the data in the form according to variable=value In the form of , Add to action The point is URL Back , And both use "?“ Connect , And the variables use ”&" Connect .Post Put the data in the form form In the data body of , In the way that variables and values correspond , Pass on to action Points to URL.
3. Get It's not safe , Because in the transmission process , Data is placed on the requested URL in , Today, there are many servers 、 Either the proxy server or the user agent will request URL Log to a log file , And put it somewhere , In this way, some private information may be seen by a third party . in addition , Users can also see the submitted data directly on the browser , Some system internal messages will be displayed in front of users .Post All operations of are invisible to the user .
4. Get The amount of data transmitted is small , This is mainly due to URL Length limit . and Post Can transfer a large amount of data , So you can only use Post.
5. Get Limit Form The value of the data set of the form must be ASCII character . and Post Support the whole ISO10646 Character set .
6. Get yes Form The default method for .

cookie And session The difference between

Examination site

This interview question is often asked in front-end interviews , This paper mainly investigates the browser session session and cookie Different .

answer

cookie Save on client （ browser ）;session Save on the server （redis）
Session It is the storage space of a server maintained by the application server , When the user connects to the server , A unique... Will be generated by the server SessionID, Use this SessionID Access the server-side... For the identifier Session Storage space .

cookie The advantages of ：

1. High scalability and availability
2. Through good programming , Control is kept in cookie Medium session Size of object .
3. Through encryption and secure transmission technology （SSL）, Reduce cookie The possibility of being cracked .
4. Only in cookie Store sensitive data in , Even if stolen, there will be no significant loss .
5. control cookie Life cycle , Make it not always effective . The thief is likely to get an expired cookie.

cookie The shortcomings of ：

1.cookie Restrictions on quantity and length . Every domain At best 20 strip cookie, Every cookie The length cannot exceed 4KB, Otherwise it will be cut off .
2. Security issues . If cookie Was intercepted , That person can get all of session Information . Even encryption doesn't help , Because interceptors don't need to know cookie The meaning of , He just forwards it as it is cookie You can achieve your goal .
3. Some states cannot be saved on the client side . for example , To prevent duplicate submission of forms , We need to save a counter on the server side . If we save this counter on the client side , Then it doesn't work .

Talk to you about MVVM Understanding of development patterns

Examination site

This question mainly examines the examinee's response to Vue in MVVM Understanding of patterns

answer

MVVM It is divided into Model、View、ViewModel The three .
Model Representative data model , Data and business logic are in Model Defined in layer ;
View representative UI View , Responsible for data presentation ;
ViewModel Responsible for monitoring Model Change of data and control of view update , Dealing with user interaction ;
Model and View There is no direct connection , But through ViewModel To make contact ,Model and ViewModel There is a two-way data binding relationship between . therefore When Model When the data in is changed, it will trigger View Layer refresh ,View The data changed due to user interaction will also be in Model Medium sync .
This pattern implements Model and View Automatic data synchronization , therefore Developers only need to focus on the maintenance and operation of data , And you don't have to operate it yourself dom.

Vue What are the instructions

Examination site

This paper mainly studies Vue The instructions of the framework .

answer

vue Common instructions are ：v-once Instructions 、v-show Instructions 、v-if Instructions 、v-else Instructions 、v-else-if Instructions 、v-for Instructions 、v-html Instructions 、v-text Instructions 、v-bind Instructions 、v-on Instructions 、v-model Orders, etc .

among ,v-show and v-if The difference is as follows ：
v-show Just control how elements are displayed , take display Attribute in block and none Switch back and forth ; and v-if Will control this DOM Whether the node exists or not . When we need to switch the display of an element often / When hidden , Use v-show It will save more on performance ; When you only need to show or hide once , Use v-if It is more reasonable .

http and https The difference between

Examination site

This topic mainly examines the understanding of the agreement , Job seekers can answer from their similarities and differences .

answer

http The data transmitted is unencrypted , That's the plaintext , Netscape set up SSL The agreement is right http The data transmitted by the protocol is encrypted , Simply speaking https Agreement is made http and ssl The network protocol which can be used for encryption transmission and identity authentication , Than http The protocol is more secure .
difference ：
Https Agreement needs to be ca certificate , The cost is high .
http It's the hypertext transfer protocol , The message is transmitted in clear text ,https It is safe ssl Encrypted transport protocol .
Use different linking methods , Ports are different , generally speaking ,http The port of the protocol is 80,https The port is 443
http The connection is simple , It's stateless ;HTTPS Agreement is made SSL+HTTP The protocol is built for encrypted transmission 、 Network protocol for identity authentication , Than http Security agreement .

This is the end of the article , This article mainly explains the common interview questions in the front-end interview , Such as Young friends who need to find jobs can see more about big factories on Niuke , Here's a link for the friends （ Click to register Niuke account ）, If you need a partner, you can register ~