A twinkling of an eye has graduated a year this year’s work experience is really bitter sweet, or very bumpy, good all the experience is sorted out down ~ share to the same period of partners ~ big guy can go around 🤣

css

  1. Box model Standard model and weird model (emphasis on width calculation)

  2. BFC 1. Functions of the BFC

    1. Clear float 2. Prevent margin overlap between adjacent BFC elementsCopy the code

    2. Trigger conditions of the BFC

  3. How to hide an element only through CSS

   1.display:none
   2.opacity:0
   3.visibility:hidden
Copy the code

  1. Center an element horizontally (the element may be fixed or variable height)

    < div class = "parent" > < div class = 'children' > < / div > < / div > -- fixed high: - 1. Parent: position:relative Child: position: Absolute; top:0; bottom:0; right:0; left:0; margin: 0 auto; 2. Parent: position:relative child: position:absolute top:50%; left:50%; Margin-left: half the width of itself; Margin-top: half of one's height; Absolute + transform 2. Flex 3. Table display: table-cell; vertical-align: middle; text-align: center;Copy the code

  2. Selector priority (selector resolves from right to left)

! Portant > id > class > tag > * > Inherit > defaultCopy the code

  1. Floating/how to clear floating floating disadvantages: easy to cause the parent container height collapse solution:

    After {height:0; clear:both; content:''; Display :block} 2. Parent set overflow:hidden 3. Create the landingCopy the code

  2. Css3 new features pay more attention to animation, canvas and SVG usage and differences

  3. How to implement single-line text overflow display ellipsis and multi-line text ellipsis

js

  1. The js base type (to beMDNAs the standard)

    String, number, Boolean, object, symbol, null, undefinedCopy the code
  2. Prototype chain (must test! The point of the point! There are too many parts of the prototype chain, I will write a separate one someday, there are many excellent summaries of the big guys on the Internet, in a word, if you understand this picture, you know the prototype chain

  1. Closure (! Must test key! A closure is a function that has access to a variable in the scope of another function.

    1. Closures can access variables other than the current function. 2. Closures can still access variables defined by the external function even after the external function has returned. Closures can update the values of external variablesCopy the code

    Closures can access external variables because primitives are stored in the heap, not the stack, when the function is created

  2. Script tag attributes

Defer loads asynchronously. Async loads asynchronously after element parsing, but blocks element rendering during execution

  1. Depth copy

1. Difference between shallow copy and deep copy 2. How to implement a deep copy

  1. What does the new operator do referring to my previous article how to implement a new

  2. Instanceof and array. isArray how instanceof is implemented

    Can be found in the instance of a prototype object chain instead of the constructor's prototype attribute points to the prototype object, return true instance. [_proto_] = = = the instance. The constructor. The prototypeCopy the code

    Array.isArray

    Call () by the Object. The prototype. ToString.Copy the code

  3. Anti-shake and throttling implementation methods (many companies require handwritten code)

  4. Inheritance I use the most is class and prototype inheritance, there are many kinds of inheritance, more say more points!

  5. Es6/ES7

    1. The const/let/var

    Const /let is a temporary dead zone because when the context is created, const and letc are created in the lexical environment and are not initialized. Var is created in the variable environment and initialized to undefined

    Const is often used to declare constants and cannot be changed once defined

    When const declares a reference type, it cannot change the address of the current reference type.

    const arr = ['12','3']; arr.push('44'); Console. log(arr) //['12','3','44'] No errorCopy the code

    2. Set the usage/Map

    3. State and implementation principle of promise

    4. Implementation principle of Async/AWIT

    Automatic actuator + GengeratorCopy the code

    5. Generator asynchronous function implementation

    Usage and principles of the generator

    5. Arrow function

    1. Features 2. Differences from ordinary functionsCopy the code

  6. Url the process of entering the url into the display in the address bar

    1.DNS resolution DNS search 1. Local DNS search recursion 2. Search iterative query between the local DNS and root domain subdomains 2.Tcp three-way handshake 3.Tcp four-way handshake 4. Create a DOM tree (transcoding Html binary data) Html strings --> Tokens Each Token has special meanings and rules (build Nodes) Nodes Nodes and attributes (all base DOM trees) 2. Style calculation CSS --> Stylesheet 3. Generate hierarchical tree Z-index, 2D, 3D.... 5. Rasterized map block ----> bitmapCopy the code

  7. Execution context 1. The global execution context has only one object, Windows object 2. The Eval function context creates code that is used in the Eval function

  8. Perform context creation procedure 1. Determine the value of this 2. Create lexical environment component 3. Variable environment component is created

  9. Garbage collection method 1. Reference counting method to see if an object has a reference to her –> circular reference can not judge (drawback)

    2. Flag cleanup (commonly used) objects that are not in use are called unreachable objects. From the JS object global start, periodic scan memory objects, all reachable, reserved. Unreachable collection.

  10. The difference between null and undefined is the same as the intrinsic memory difference

    Null means' none 'and is converted to a value of 0. Assigning a value of NULL to a global variable is equivalent to emptying the variable's pointer object and value. If you assign null to an object property and a local variable, and allocate empty memory to the property, null > JS will reclaim the object with the value NULLCopy the code
    Undefined means' the initial value of none 'and becomes a value for NaN. Assigning undefined to a global variable clears the value, but the object still exists. If an object attribute or local variable is assigned the value of undefined, the value is null.Copy the code

  11. Common memory leaks 1. Global variables

    Undefined variables create a new variable globally

**2. Closure **<br> **3. Timer **<br> **4. Out of DOM references **Copy the code

  1. What are the differences between call/apply/bind and how to implement them

  2. Is the variable declared by let/const on Windows? Why is that?

  3. How is front-end routing implemented

  4. How do I implement an indexOf method

  5. Webpack packaging principle Webpack is generally random ask, loader and plugin ask more, you can see more

Http

  1. HTTP packet structure start line + header line + blank line (distinguish header and entity) + entity

  2. Get and POST

  3. The HTTP status code

  4. Http1.0 http1.1 / http2.0 difference

  5. How is HTTP set up for fixed and variable length data

    content-length

    transfer-encoding:chunked

  6. How does HTTP handle large file transfers

    accept-ranges

  7. How does HTTP1.1 end up blocking

1. Concurrent connections (Chrome supports six concurrent connections) 2. Domain name fragmentation

  1. Talk about cookies and how to prevent XSS and CSRF attacks

  2. HTTP cache

  3. Talk about HTTP proxies

  4. How does HTTP2.0 implement multiplexing

  5. What does websocket have to do with HTTP/TCP

Vue

  1. Virtual DOM implementation principle

  2. How does COMPUTED in VUE work

  3. Talk about how nextTick works

  4. You know vue3.0, talk about Object.Prototype and proxy

  5. What’s the difference between Vue and React

  6. What does keep-alive do if the cache is high

  7. Are all vUE tasks asynchronous? Are there any synchronization tasks? When is a synchronization task?

React

  1. Class: has a lifecycle, can use other features such as state, has its own this function that accepts props rendering, is a stateless component, has no lifecycle, has no this

  2. High-order components High-order components are functions that take a component and return a new component.

  3. The difference between classes and functions

The prototype class is essentially a function. The class itself points to the constructorCopy the code

  1. Constructor and super Constructor methods are the default methods for class constructors. This method is automatically called when an object instance is generated through new. Constructor (); class (); class (); class (); class ();

    (2) If you don't need to use this. Props in constructor, you can dispense with props for super(). (3) If you don't need to use this. Actually there is no need to write the whole constructorCopy the code

  2. Life cycle (new vs. old)

  3. This. SetState update mechanism as we all know, setState does not update immediately, it will put the state to be updated in [queue mechanism], it will not update immediately and then determine whether the batchUpdate state. True -> Save to dityComponents false -> Iterate over all dityComponents and call updateComponent for updates

  4. React Fiber implementation principles

  5. How is the React Diff algorithm optimized? How are o(n3) and O (n) calculated

  6. React Lazy route loading and implementation principles

    React-loadable is a loadable system

  7. How does JSX translate into browser-aware JS

    The Babel process is very clear on the website

  8. Redux implementation

  9. What does Redux-Saga do

    Deal with side effects of Redux

  10. React set reducer to a pure function

conclusion

The last big chunk is the algorithm above leetcode, the algorithm of the face of big factory is basically from this above, brush the question is essential! Come on ~ 🤘