Frontend interview experience summary

Interview 3 what we are doing today, share gluten, and make progress together. There were two faces of sweat, come on. Some of them are forgotten. It may be a bit messy to remember what to write. Part 1: Leader 1. URL structure URI-UniversalResourceIdentifier common resource identifier every type of resource available on the Web... today's things are being done today, sharing gluten and making common progress. There were two faces of sweat, come on.

Some of them are forgotten. It may be a bit messy to remember what to write.

Part 1 Leader 1. URL Structure

URI-Universal Resource Identifier common Resource Identifier

Each type of resources available on the Web, such as HTML documents, images, video clips, and programs, is located by URI.
Generally, a URI consists of three parts.
① Resource Access naming mechanism
② Host name for storing Resources
③ The Name Of The resource, represented by the path, focuses on the resource.

URL-Uniform Resource Location

URL is a string used to describe information resources on the Internet. It is mainly used in various WWW client programs and server programs, especially the famous Mosaic.
URL can be used to describe various information resources in a unified format, including files, server addresses and directories.
A URL consists of three parts.
① Protocol (or service method)
② Host IP addresses containing the resource (sometimes including port numbers)
③ The specific address of the host resource. Such as directories and file names

Example
URI = Composition
URL = argumentative paper, narrative, poetry ......

So

1. in the macro description, the teacher will ask: Everyone writes well in the "Composition" of today's examination, rather than saying that everyone's "argumentative paper" is well written, although it refers to something.
2. When you describe objectively, you will say to your deskmate: I am writing "Poetry" today, instead of talking about the composition I wrote today in the form of poetry.

Likewise

When you write a technical document specification, you will say that a parameter needs to pass a URI, without having to say that a parameter needs to pass a "URL Format String ".

• Scheme: // protocol part, ending with:. common protocols include HTTP and HTTPS.

• // Hierarchical URL identifiers can be understood as separating the Protocol from subsequent information.

• Login: password @: Identity Authentication generally uses the default anonymous form for data retrieval.

• Address: the server Address generally exists as a domain name.

• Port: the default port number for different protocols.

• /Path/to/resource: the file path points to a unique determined resource.

• ? Query_string: query string

• /# Fragment

2. Recursion

I have made notes in the Fibonacci series, but it won't be recursive. It's hard to learn data structures, but the iterative method is okay. 1, 2, 3, 5 ....

// Recursive method function test (n) {if (n <2) {return 1;} return test (n-1) + test (n-2)} alert (test (9 ))

// Iteration method function test (n) {var num1 = 1; var num2 = 2; var num3 = 0; for (var I = 0; I
 
  
Nervous. method 2 is not similar to method 2.
3. What happened when the browser sent a request to the page to load the page
  
This problem leads to Question 1. You can dig yourself
  
The previous summary is not in place .. Come back
  
 

   
  
When the browser opens the thread, it will find the DNS server based on the domain name of www/baidu.com and resolve it to the corresponding IP address. For example, it is parsed to: #: 80/login. aspx
   
  
After the browser parses the IP address, the second step is to encapsulate the specified URL in HTTP format. After the browser encapsulates the URL into an http packet, the third step is to send the HTTP request message to the server.
  
 
  
(Note: How does the browser send http request packets to the server? Answer: the browser will establish a Socket object internally, convert the http request packet into byet [] bytes, and then call the Socket. Sent () method to send the data to the server
Another question is: Will requests still occur during page rendering? My answer: Maybe
  
I don't think this answer is correct. What if the requested page is 'Hello world' without css and images?
  
In fact, there must be other requests. Eg js, css, images, etc.
4. Understanding of frontend and backend Separation
  
After talking about your own situation, it is the frontend-to-backend negotiation interface, the frontend-to-backend collaborative development, the frontend writing baffle data, and the final interface adjustment.
  
The following is a reference
  
In the current frontend and backend separation, the role of the backend Server is more like an API Server, receiving requests and returning only in the form of data. How to render and present data, all are delivered to the front-end presentation layer to achieve front-end decoupling
5. Box Model
  
I have talked about the standard box model and the weird box model, and I have never talked about the common sense.
6. Understand or use the MV * framework
  
I used backbone and vue and talked about angular and react ..
7. Modularization
  
You know it yourself.
8. Let's talk about the packaging tools used by your company's projects (What are the good experiences for developers and users ?)
  
Ant used by the company
  
Webpack for other projects recently,
  
(1) Hot loading
  
(2) File compression and packaging
  
I asked about the basic configuration of webpack, And I answered entery and output, which is quite simple. I still need to use less, so I know little about it.
Common webpack configurations
  
 

   
  
Entry: {} // entry point for Loading modules
   
  
Output: {}// path and name of the packaged File
   
  
Module: {} // The loaders to process those files
   
  
Resolve: {}// some details about the setting module
   
  
Plugins: [] // system plug-ins and extensions
  
 
  

9. Other vue ecosystem libraries used
  
Vue-router and vue-resource are used to learn more about vuex.
  
This leads to questions 10, 11, 12
10. Let's talk about the principle of vue-router and how to implement routing.
  
In normal times, the project can jump normally. I have never thought about how to route the route. I did not answer the question ..
  
The principle of SPA routing is unknown if the interviewer wants a similar answer.
11. vue Lifecycle
  
12. vue component communication
  
The mechanism for parent-child component communication to transmit data using the prop attribute
  
 

   
  
Dynamic Prop
  
 
  
Usev-bindDynamically bind the value of props to the data of the component. Each time the data of the parent component changes, this change is also transmitted to the child component.
  
    
  
    
   
  
 

   
  
Unidirectional data stream
  
 
  
Prop is one-way binding: When the attributes of the parent component change, it is transmitted to the child component, but it is not reversed. This is to prevent the child component from inadvertently modifying the status of the parent component-which makes the data flow of the application hard to understand.
  
There are usually two ways to change prop:
  
 

   
  
The prop is passed in as the initial value. The child component then uses its initial value as the initial value of the local data;
   
  
Prop is passed as the original value to be converted.
  
 
13. Let's talk about the implementation principle of JSONP.
  
JSONP: JSON with Padding
  
(1) The script label src attribute can access external resources.
  
(2) There is no cross-origin problem in loading resources with script tags.
  
Define a function before the resource is loaded. The function accepts a parameter and contains the implementation logic (what to do)
  
Use the script tag to load Remote File resources. When a remote file is loaded in, run the defined function. The data is the parameter passed in by the function.
14. Career Planning
  
What exactly do I want to find a job?
Part 2 Leadership
  
Every point is very deep.
1.css Box Model
  
 

   
  
The standard box model and the weird box model are no longer repeated.
   
  
Box-sizing attributes: content-box: Standard box model, border-box: weird box model
   
  
The row element also hasBox Model
  
 
  

A. border can be set for any element.
  
   Haha
  
B. Set padding for the element in the row. The upper and lower of margin are invalid, and the left and right are valid.
  
   
1782
Woship
! [Snip20170211_5] (/Users/shenyuanyuan/Desktop/Snip20170211_5.png)
  

  
Padding-top and padding-bottom of row elements are added in the display effect, but the settings are actually invalid. It does not have any influence on the elements around it.
  
 

   
  
Yellow padding 5px
   
  
20 PX blue from yellow on the left
   
  
Although padding is displayed in the upper and lower layers, padding does not affect other elements.
  
 
2. position positioning (1) What are the attributes of position? What is the default value?
  
Default Value: static
  
Five attributes are available: relative, absolute, fixed, inherit, and static.
(2) Example
  
Parent element p: width: 500px; height: 200px; position: static | absoluta | relative | fixed. The position values are respectively. How to locate the child element?
  
Child element p: width: 200px; height: 200px; position: absolute
  
   
    
    
    
    


   
    
    
    
    


   
    
    
    
    

   
    
    
    
    

  

  
It is found that the child element is absolutely located and located according to the first parent element except the property is static. Therefore, the parent element is set to absolute, relative, and fixed. The sub-element positioning is consistent;
(3) Example Study (facts prove that the interviewer is wrong too)
  
What if the sub-elements set margin, border, and padding? The points in the upper left corner of the child element are located by margin, border, or padding.
  
    
    
    
    


   
    
    
    
    


   
    
    
    
    


   
    
    
    
    


   
    
    
    
    

  

  
Code shared above RunJS
3. BFC (Block-level formatting context)
  
 

   
  
Clear occlusion
    
. Left {width: 100px; height: 100px; background: red; float: left ;}. right {height: 200px; background: yellow; overflow: hidden; // clear attribute occlusion}
   
  
Disable floating
   
  
Solve the vertical bilateral distance problem
    
        
    

  
 
  


  
Function of BFC
  
#
4. flex (new feature of css3)
  
  
    
    
    
    .container {  display: flex;  flex-flow: row;    width:300px;    height:100px;    background:gray;    justify-content:space-around}.box {  width: 20px;    background:yellow;    height:20px;}
  

  
Flex reference 1
  
Flex Reference 2
  
Online example :#
5. JS prototype and prototype chain
  
I personally think the js prototype and prototype chain are very good.
  
Prototype chain
  
Function Foo () {} var a = new Foo (); // What is the var a = new Object () a in the new operation. _ proto _ = Foo. prototypeFoo. call ()
6. Closure
  
Closure: When function a's internal function B is referenced by a variable outside function a, a closure is created.
  
function a(){  var i=0;  function b(){     alert(i);         }         return b;   }   var c = a();   c();
7. http
  
Request Header field and status code
  

  
Http status code
8. array deduplication algorithm (time/space complexity)
  
Array deduplication
  
Time Complexity and space complexity.
X. Advantages of front-end
  
Besides technology, what should I do? I feel that I have no advantage. The advantage is that I have more experience on the Mobile End.