The first step into the front end requires further learning

The first step into the front end requires further learning

I received the first interview in my life this morning. The interview was very happy, but because of the first interview, I was very nervous, maybe because I only prepared the interview questions for 2 days, the reason is not enough. From the initial conversation to the awkward ending, the key point is to know my shortcomings. I believe that I will be greatly inspired in the following study.

I will review my interview today.

At the beginning, I received a call, but because it was a mobile phone, I switched to a school phone, so I had enough time for the interview.

The first priority is to make a simple self-introduction, which is very simple, without a rich introduction to myself and characteristics.

Then began the question and answer of technical questions.

The first question is:

CSS weight

css weight, I answered the previous scheme

  • Inline style 1000
  • ID selector 100
  • Class selector, pseudo-class, attribute 10
  • Element selector, pseudo element 1
  • !important has the highest level

Then the interviewer added a question:

div{ width:100px !impotrant; max-width:50px; } Copy code

What is the final width of his box? The final width is 50px

The reason is: the width and height will be covered by max-width/min-width, so !important will be invalid.

Then the interviewer continues to ask the next question:

Briefly talk about the box model

I answered directly: There is an IE box model: border-box, and a standard box model: content-box

Width calculation of IE box model: border+padding+content

Width calculation of standard box model: content

They are all declared by: attribute name: box-sizing.

Then asked in the interview

Talk about several methods in vertical dramas

I have mentioned 5 methods in total:

Do with table, flex layout, transform: translate(-50%,-50%);, margin and absolute positioning, and margin-top -50%.

Affirmed by the interviewer, here I list 6 methods:

method one

Use the table label to center vertically

< table class = "parent" > < tr > < td class = "child" > String of text string of text </td > </tr > </table > .parent{ border: 1px solid red; height: 600px; } .child{ border: 1px solid green; } Copy code

Method Two

100% height after before plus inline-block and vertical-align: middle;

< div class = "parent" > < div class = "child" > A string of text </div > </div > .parent{ border: 3px solid red; height: 600px; text-align: center; } .child{ border: 3px solid black; display: inline-block; width: 300px; vertical-align: middle; } .parent:before{ content:''; outline: 3px solid red; display: inline-block; height: 100%; vertical-align: middle; } .parent:after{ content:''; outline: 3px solid red; display: inline-block; height: 100%; vertical-align: middle; } Copy code

Method Three

transform: translate(-50%,-50%);

< div class = "parent" > < div class = "child" > A string of text A string of text A string of text A string of text A string of text A string of text A string of text A string of text A string of text </div > </div > .parent{ height: 600px; border: 1px solid red; position: relative; } .child{ border: 1px solid green; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } Copy code

Method Four

margin-top -50%

< div class = "parent" > < div class = "child" > A string of text A string of text A string of text A string of text A string of text A string of text A string of text A string of text A string of text </div > </div > .parent{ height: 600px; border: 1px solid red; position: relative; } .child{ border: 1px solid green; width: 300px; position: absolute; top: 50%; left: 50%; margin-left: -150px; height: 100px; margin-top: -50px; } Copy code

Method Five

flex layout

< div class = "parent" > < div class = "child" > A string of text A string of text A string of text A string of text A string of text A string of text A string of text A string of text A string of text </div > </div > .parent{ height: 600px; border: 3px solid red; display: flex; justify-content: center; align-items: center; } .child{ border: 3px solid green; width: 300px; } Copy code

Method Six

Absolute positioning and


< div class = "parent" > < div class = "child" > A string of text A string of text A string of text A string of text A string of text A string of text A string of text A string of text A string of text </div > </div > .parent{ height: 600px; border: 1px solid red; position: relative; } .child{ border: 1px solid green; position: absolute; width: 300px; height: 200px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } Copy code

Then the interviewer asked:

Talk about several ways to clear floats

I listed three methods:

The first one is to add:

, The following code was memorized at that time.

.clearfix:after{ content:''; display: block;/*or table*/ clear: both; } .clearfix{ zoom: 1;/* IE compatible*/ } Copy code

The second is to add to the parent element

overflow: auto/hidden;
At the same time, I mentioned the need to pay attention to the use of this: when the child element is higher than the parent element, the use of auto will cause a scroll bar, and hidden will hide the content outside the height of the parent box.

The third one adds an empty after the floating element box

Then add a
*clear*: both;

I felt that the interviewer thought it was OK, and then I asked

Please talk about the type of JS

I replied: yes

string number boolen symbol bigInt null undefined object duplicated code

The interviewer did not follow up, and then asked

What is the prototype chain

Fortunately, I reviewed it in the review time of 2.

I just raised a chestnut

There is an Object stored on the window, but it stores an address. This address stores some methods of the Object in the memory #109 #109, the most important of which is a prototype. The address where it stores a prototype is #209, and #209 is the prototype.

Now we declare an object

const a = {}
It also has an address of #200, and a hidden attribute in #200 is
It points to the prototype of its constructed object, which happens to be the prototype of Object.

This is an entire prototype chain.

The big picture change is as follows, hand-painted by yourself

I think to understand the prototype chain first understand the understanding of these three words

__proto__ prototype constructor Copy code
  • ,
    Properties are unique to the object;
  • prototype
    The attribute is unique to the function;
  • Function is a kind of object, so functions also have

It is equivalent to martial arts cheats and can be used by disciples and grandchildren.

It is equivalent to the road to martial arts cheats, one by one to find martial arts cheats

Equivalent to my own father

Here is a method summarized by many people: to judge the prototype of an instance

Instance of

The property (prototype) is equal to its constructor

For example, some of our examples

function Person(name) { = name; } const a = new Person("ade"); console.log(a.__proto__ === Person.prototype); console.log(Person.__proto__ === Function.prototype); console.log(Person.prototype.__proto__ === Object.prototype); Copy code

The interviewer didn t ask much, and then we discussed

Tell me about your understanding of deep copy and shallow copy

Shallow copy is to copy the value for the basic type, and copy the address of the object for the reference type. If you modify the value of a new object, the previous object will be modified, which is actually the same object.

For example, the following code:

Resolve arrays and circular references

const target = { field1 : . 1 , Field2 : undefined , Field3 : "ConardLi" , Field4 : { Child : "Child" , child2 : { child2 : "child2" , }, }, }; function clone ( target ) { let cloneTarget = target; for ( const key in target) { cloneTarget[key] = target[key]; } return cloneTarget; } const a = clone(target); console .log(a); a.field4.child = "243" ; console .log(target); Copy code

Deep copy is to reopen a space in the heap memory and copy the original object completely to the new memory address.

const target = { field1 : . 1 , Field2 : undefined , Field3 : "ConardLi" , Field4 : { Child : "Child" , child2 : { child2 : "child2" , }, }, }; function clone ( target, map = new WeakMap () ) { if ( typeof target === "object" ) { let cloneTarget = Array .isArray(target)? []: {}; if (map.get(target)) { return map.get(target); } map.set(target, cloneTarget); for ( const key in target) { cloneTarget[key] = clone(target[key], map); } return cloneTarget; } else { return target; } } const x = clone(target); console .log(x); Copy code

Why use WeakMap

let obj = {name:'ConardLi'} const target = new Map(); target.set(obj,'code secret garden'); obj = null; Copy code

There is a strong reference relationship between objects using map, although it can be released manually: obj=null. But there is a strong reference relationship, this part of the memory cannot be released.

If you add a large amount of data to copy, the performance will be poor.

let obj = {name:'ConardLi'} const target = new WeakMap(); target.set(obj,'code secret garden'); obj = null; Copy code

Use weakmap

What exists is a weak reference relationship. When the garbage collection mechanism is executed next time, this memory will be released.


The interviewer thought I was an intern and didn't ask about the operating mechanism of weakmap in depth.

Then ask the following question:

What happened between the url entered in the address bar and the page appeared?

I didn t prepare myself, so I answered very vaguely. The interviewer asked me to elaborate a little bit, and in the end I faced a very embarrassing situation. I won t.

The next more article is there. Write an article about this yourself.

What are the scope of JS

There are global scope and function scope

var a = 1; function b(){ } Copy code

Global scope: The global scope is the outermost scope of the program and always exists.

Function scope: The function scope is created only when the function is defined, and is included in the parent function scope/global scope.

Scope type

Lexical scope (static scope) and dynamic scope

Lexical scope means that when a function is defined, its scope has been determined, and it has nothing to do with where it is executed. Therefore, lexical scope is also called "static scope".

Block scope

This is not the native scope of JS, but the new syntax of es6.

Let and const declarations have block-level scope

console.log(a);//An error will be reported, the variable cannot be promoted, and a temporary dead zone will be formed at the same time let a = 1 const b = 2 Copy code

Then I asked if I understand the algorithm?

I said I know a few, I will list one

Quick sort ideas

Give an array

let a = [2,3,22,1,0,555,69] duplicated code

First find out the middle number in the array and compare them. Put the ones that are smaller than the middle number on the left and those that are larger on the right, then keep splitting them out like this for comparison, and finally combine them.

let quickSort = arr => { if (arr.length <= 1) {return arr;} let pivotIndex = Math.floor(arr.length/2); let pivot = arr.splice(pivotIndex, 1)[0]; let left = []; let right = []; for (let i = 0; i <arr.length; i++){ if (arr[i] <pivot) {left.push(arr[i]) } else {right.push(arr[i])} } return quickSort(left).concat( [pivot], quickSort(right)) } Copy code

Cross-domain issues, what is JSONP?

When it comes to cross-domain, you must first know what the same-origin policy is

The same-origin policy means that the domain name, protocol, and port are the same. For example, the following is an example of the same-origin

Same protocol: if all are http or https Same domain name: If both are and Same port: if both are port 80 Copy code

If it is not of the same origin: the browser will not restrict the function

  • cookie cannot be read
  • dom is not available
  • ajax request cannot be sent

We know the homology, then we come to understand what is cross-domain

Cross-domain refers to cross-domain access


Implementation principle:

  1. use
    Labels, circumvent cross-domain,
    <script src="url">
    , But can only issue GET requests
  2. Declare a function on the client side,
    function jsonCallback() {}
  3. Based on the information from the client, the server searches the database, and then returns a string.
  4. Client, use
    The tag resolves to be runnable
    Code, call

Figure for reference: Let's write a JSONP plug-in! article.

Then the interviewer started the topic of the react part. 1. the interviewer asked:

Understanding of react's Dom Diff

Very embarrassing, I only answered the virtual Dom, but did not answer that React has optimized the traditional diff algorithm in React style.

The interviewer can go and find out after talking about it.

Next, I went to read other people's blogs: React source code analysis series-the incredible react diff

  • The traditional diff algorithm compares nodes in turn through cyclic recursion, which is inefficient and the algorithm complexity reaches O(n^3), where n is the total number of nodes in the tree.
  • Virtual DOM tree using the hierarchical comparison, hierarchical control . If there is a cross-level move operation, it will directly delete the previous one and recreate it where needed.
  • For the same type of components, on the one hand: continue to compare the virtual DOM tree according to the original strategy. On the other hand: you can artificially use shouldComponentUpdate() to determine whether the Virtual DOM has changed. If there is no change, you don't need to perform a diff, which can save a lot of time. If it changes, update the relevant node.
  • For components that are not of the same type, the component is judged to be a dirty component, and all child nodes under the entire component are replaced. (Note that it is directly deleted and then created)
  • React diff provides three node operations, namely: INSERT_MARKUP (insert), MOVE_EXISTING (move) and REMOVE_NODE (delete). If there is no key, use diff to differentiate and compare directly, and create a new one after deleting. If there is a key and the node position is different, move the position.

No key

Have key

useCallbak and useMemo

Regarding this question, I was stunned and awkward, so I answered, I understand, but I haven't used it.

The interviewer said that's good, let's skip this question

Both are executed when the component is rendered for the first time, and then executed again when the dependent variables change; and both hooks return the cached value,
Return the cached variable ,
Return the cached function

HOC principle

I won t be very embarrassed about this question. The interviewer can only skip this question and ask other questions.

Next, I plan to take a closer look at HOC

UseState's batch update mechanism

React implicitly helps us set up similar to

. To determine whether the update can be merged, it appears in
Before and after.

At the same time, merge updates can be performed manually:


I also seem to be embarrassed and technically inadequate if someone else s articles are half-understood.

React parent-child component communication

Parent-child component communication: can be adopted

Pass data, use
, Callback event. The parent component can be used
To get the value of the sub-component.

Cross-level component communication: Method one: layer-by-layer component transfer props, method two: use context

Component communication without nested relationship: the way of using custom events


1. AMD respects dependence on the front, CMD respects nearby dependence

2. The execution timing is different: AMD is executed immediately after loading, and CMD is delayed execution (the biggest difference between the two)


Throughout the interview, I answered the basic questions quite well, but I didn't have any further study and understanding. This is the first step to the front end, maintaining enthusiasm and passion. While writing this article, I am also reading related articles while writing to make up for the lack of knowledge. Only by continuous learning can I make progress and advance bravely.