1. February 25: Ali tao department side
2. February 26 :CVTE side (cool)
3. March 13: Tencent Side
4. March 23: Ali Tao Series second Noodles (cool)
5. March 24: Byte side (cool)
6. March 25: Second interview with Tencent
7. March 26: Tencent Three Sides (cool)
8. March 28: Meituan side
9. March 31: Meituan second interview
10. April 03: MEituan HR noodle
11. April 03: mogu Street side
12. April 09: Mogu Street 2nd Side (rejected)
13. April 10 :TW side
14. April 10: Tencent changed departments to scoop up one side (cool)
15. April 12: Baidu One, two and three Technologies
16. April 13: Meituan OC(go ashore)
17. April 16: Netease Cloud Side
18. April 16 :TW second interview

1. baidu
2. TW
3. Netease cloud
4. tencent
5. Well quickly

• Algorithms and data structures

  1. The list
  2. Heap/stack
  3. Hash table
  4. Binary tree
  5. Sorts of sorts, especially quicksort
  6. BST
  7. KMP
  8. binary
• The operating system

  1. Thread related issues
  2. Process related issues
  3. The problem with process versus thread comparisons
• Computer network

  1. TCP related
  2. UDP relevant
  3. HTTP related
  4. DNS related
• Design patterns

  1. The factory pattern
  2. Abstract Factory pattern
  3. The singleton pattern

• JS (including ES6)

  1. DOM event triggers several stages (capture, target, bubble) related issues
  2. Value types are related to reference types
  3. The function is curialized
  4. closure
  5. This points to judgment
  6. apply,call,bind
  7. event loop
  8. promise
  9. The timer
  10. Prototypes and prototype chains
  11. Arrow function
  12. Type conversion
  13. Async and await
  14. An array of class
  15. Throttling stabilization
  16. Garbage collection mechanism
  17. The typeof and instanceof
  18. = = = = =
  19. JS
  20. Let, const, var
  21. Comparison of the various ways of traversing groups (for,forof,forin,forEach)
• CSS

  1. Reflux with redraw
  2. The box model
  3. Flexible Layout (Flex)
  4. Grid
  5. Display various values and their jobs
  6. Position Values and their effects
  7. BFC(concept, how to trigger, features)
  8. Display: none, visibility: hidden, opacity: 0
  9. CSS hierarchy, style weight calculation
  10. CSS pseudo-classes
  11. CSS pseudo-elements
  12. Zebra pattern realization
  13. Simple animation implementation
  14. The ball scrolls from left to right on the screen XXXPX
  15. Means that child elements are horizontally centered relative to the parent element
  16. The way children are centered horizontally and vertically relative to their parent
  17. How to make the page theme (skin) toggle
• VUE(for not looking at the source)

  1. Data bidirectional binding, data response type implementation principle
  2. The life cycle
  3. Communication methods between components (father and son, brother, grandparent, any)
  4. V – if, v – show similarities and differences
  5. Routing principle, why does the browser not refresh when the address changes
  6. Rights management
• The browser

  1. Caching mechanisms
  2. Page rendering Principles (Process)
  3. The local store
  4. Browser security related issues (SQL injection,XSS,CSRF,DNS hijacking, click hijacking)
  5. Cross-domain related issues (causes, solutions)
  6. The same-origin policy
  7. Preview the request
• Performance optimization

  1. Optimized Webpack code packaging
  2. Network layer optimization
  3. Optimized the first screen loading
• Small program

  1. Small program features
  2. Your thoughts on the development of mini programs
  3. The principle of small program
  4. Small program and traditional mobile Web difference
• Node

  1. Event loop in node
  2. Process and thread related issues in Node
• Regular expressions are simple to use

1. Do you have any other interests other than development
2. Work directly after graduation or take the postgraduate entrance examination, why not take the postgraduate entrance examination
3. Career plan for the next 5 years
4. What do you consider your strengths/strengths
5. What do you think are your weaknesses
6. Why the front end
7. How do you study? What are you reading
8. How to balance school curriculum learning with front-end self-study and development
9. What is your most successful sharing or achievement
10. Any other companies? Did you get any results? Why not? Do you know why
11. Why choose us

Build request line

The GET/HTTP/1.1 method indicates the protocol and version of the request pathCopy the code

Find strong cache

Check whether the resource has a strong cache. If yes, resolve the resource directly

Reading the DNS cache

1. The browser first checks whether the IP address corresponding to the domain name has been resolved in its cache. If yes, the resolution is complete
2. Check whether there are corresponding parsed results in the operating system cache (hosts file in Win)
3. If not, proceed to the next step

The DNS

1. Request the local Domain name server (LDNS) to resolve the domain name. If not, proceed to the next step
2. DNS root server query

Establishing a TCP Connection

This section describes the process of establishing a THREE-way handshake for a TCP link

1. The clienttoThe service sideSending a request Packet
2. The service sideIf the request packet is received, the connection is forwardedThe clientSend a reply
3. The clientreceivedThe service sideReply and informThe service sideI’m ready

Some features of TCP

• A three-way handshake is required to establish a connection
• All disconnections require four handshakes
• In the process of data transmission, various algorithms are used to ensure the reliability of data
• Less efficient than UDP.

Check whether it is an Https request

If yes, the TLS handshake is performed

The basic process

1. The client requests and verifies the public key from the server
2. Generate a Dialogue Key through negotiation
3. The two parties use the dialogue key to encrypt communication

In the TLS handshake phase, the two ends use asymmetric encryption to communicate. However, because the loss performance of asymmetric encryption is greater than that of symmetric encryption, the two ends use symmetric encryption to communicate during official data transmission

No: An Http request is initiated

Sending an HTTP request

The HTTP request is formally sent to the server

Return HTTP packet

The server processes the response and returns an Http packet

What is the status code?

200: continue parsing, error if 4xx or 5xx, redirection if 3xx

If it is in gZIP format, it will be decompressed first, and then through the file encoding format to decode the file

The browser parses the rendered page

1. For the DOWNLOADED HTML file
   • Lexical analysis: tokenization
   • Parsing: Building the DOM tree
2. Parse HTML(Hypertext Markup Language)–>DOM(Document Object Model) tree
   • If a script tag is encountered, it will determine whether async or defer exists
     • Async: downloads in parallel, and executes JS after the download is complete
     • Defer: Download the file in parallel, then wait until the HTML is parsed and execute sequentially.
     • If neither: it blocks the rendering process until the JS is downloaded and executed
   • Encounter link download and parse the CSS(Cascading Style Sheets)–>CSSOM(CSS Object Model) tree
     • Link Tag Reference
     • Style in the style tag
     • The embedded style attribute of the element
3. DOM Tree + CSSOM Tree –> Render Tree: After the CSSOM Tree and DOM Tree are built, the Render Tree is generated
4. Backflow (Layout): According to the generated rendering tree, backflow can get the geometric information (location, size) of the node.
   • Calculate the position and size of the visible Dom nodes at the device viewport. This calculation phase is called backflow
   • To know the exact size and location of each visible node in the viewport, the browser traverses from the root node of the render tree
5. Painting: Obtain the absolute pixel of the node based on the geometric information of the node obtained by rendering tree and backflow
   • After the generated render tree and backflow stage, the detailed geometric information and styles of all visible nodes are obtained, and then each node of the rendered tree is transformed into an actual pixel on the screen. This stage is called redraw node
6. The pixels are sent to the GPU for rendering, compositing, and displaying on the page

Disconnect the TCP connection

This section describes the 4-times handshake process

1. The clientrightThe service sideSend a request to release the connection
2. The service sidereceivedThe clientThe application layer is told to release the connection
3. The service sideAfter sending the data, send it toThe clientSend a connection release request
4. The clientUpon receipt of the release request, and toThe service sideSend a reply confirming release, agreeing to release

1. Look for KMP to see if one string exists in another string
2. Linked list transpose, iteration/recursion
3. Merge two ordered lists
4. Merge the two BST
5. Build BST
6. Binary tree front/middle/back order traversal
7. TopK problem
8. Binary tree depth-first /DFS, breadth-first (sequential traversal)/BFS

   // DFS uses the stack
   function dfs(root){
       let stack = []
       if(! root){ stack.push(root) }while(stack.length! = =0) {let node = stack.pop()
           console.log(node.value)
           if(node.right){
               stack.push(node.right)
           }
           if(node.left){
               stack.push(node.left)
           }
       }
   }
   
   // BFS uses queues
   function bfs(root){
       let queue = []
       if(! root){ queue.push(root) }while(queue.length! = =0) {let node = queue.shift()
           console.log(node.value)
           if(node.left){
               stack.push(node.left)
           }
           if(node.right){
               stack.push(node.right)
           }
       }
   }
   Copy the code

9. Quick sort

   function quickSort(array) {
       const _quickSort = (arr, left, right) = > {
           if (left >= right) {
               return
           }
           let o = left
           let start = left
           let end = right
           while (left < right) {
               while (arr[right] >= arr[o] && right > left) {
                   right--
               }
               while (arr[left] <= arr[o] && left < right) {
                   left++
               }
               if(left ! == right) { swap(arr, left, right) } } [arr[o],arr[left]] = [arr[left],arr[o]] _quickSort(arr, start, left -1)
           _quickSort(arr, left + 1, end)
       }
       _quickSort(array, 0, array.length - 1)}Copy the code

1. The difference between TCP and UDP
2. Outline HTTP(divulge everything you know about HTTP)
3. What header fields are commonly used in HTTP? You know which HTTP headers
4. What are HTTP status codes and what do they represent
5. What are the common HTTP methods
6. Briefly describes the UDP

   • Connectionless: There is no need to connect the two parties before formally passing the data
   • Porter: delivers data packets to the peer end without loss or order
   • There is no algorithm to control the flow, which is transmitted at a constant rate
   • It is suitable for the places that have low requirements on network communication quality but high requirements on real-time performance
     • Live, voice, video and other scenes
7. Briefly describes the TCP

   • Connection-oriented: three-way handshake for link establishment, four-way handshake for disconnect
   • In the process of data transmission, various algorithms are used to ensure the reliability of data
   • Application scenarios
     • HTTP
     • FTP
     • Online game
8. Why does TCP go through three handshakes, not one or two

   • To prevent invalid connection request packet segments from being received by the server, resulting in errors
   • If: The client sends a connection request but does not receive a reply from the server, the connection is successful
   • If two: The client sends the connection request and waits for the reply from the server. If the SYN from the client does not reach the server after a period of time, the client’s connection times out, and it resends the connection. If the server receives the SYN this time and replies to the client, the connection is established. When the first SYN reaches the server, the server considers it a new connection and sends an ACK to the client, which is discarded by the client. However, at this point, the server has already allocated resources for the connection, and the server will always maintain the resources, which will cause waste
9. The difference between HTTP and HTTPS

   • HTTP is transmitted in plain text
   • HTTP(80) and HTTPS(443) use different ports
   • HTTP pages respond faster than HTTPS pages
   • HTTPS is an HTTP protocol built on top of SSL/TLS. HTTPS consumes more server resources than HTTP
   • HTTPS establishes the SSL/TLS encryption layer over HTTP and encrypts the transmitted data
10. The characteristics of HTTP2

    • multiplexing
    • The Header compression
    • The server actively pushes resources
    • A new encoding mechanism was introduced in HTTP/2, where all transmitted data is split and encoded in binary format
11. HTTP2 Usage conditions

    • Support Http2 server and client
    • The domain name must be HTTPS (encrypted connection based on TLS/1.2 or above)
12. This chapter describes the TLS protocol working process

    Asymmetric encryption is used to implement identity authentication and key negotiation. Symmetric encryption algorithm uses negotiated key to encrypt data and verifies the integrity of information based on hash function

1. How do threads and processes work
2. How to communicate between threads | processes
3. How to switch processes

1. Why the typeof null = = ‘object’ is | null object

   Null is not an object

   Although Typeof null does print object, this is a long-standing Bug in JS. In the original version of JS, the 32-bit system was used, and for performance considerations, the type information of variables was stored in low order. The beginning of 000 represents an object, whereas null represents all zeros, so it was wrongly identified as object

2. What is a function curryization

   The technique of turning a function that takes multiple arguments into one that takes a single argument (the first argument of the original function) and returns a new function that takes the remaining arguments and returns the result

3. The difference between object types and primitive value types

   object

   • Object types store (address) Pointers: declaring an object opens up a space in memory for the value
   • When a variable is assigned, it is the address of the assigned value: changes to the new variable affect the original variable
   • There are deep and shallow copy problems

   Value types

   • When a new value is copied during assignment, it does not affect the original value
4. Typeof can correctly determine the type

   To be able to determine

   • number
   • string
   • boolean
   • undefined
   • symbol
   • function
5. What makes instanceof correct

   • Judge by the prototype chain
   • Each object has a stereotype, and Instanceof follows the stereotype chain up to the topmost stereotype
   • Can be achieved bySymbol.hasInstanceRedefine the behavior of instanceof, so the results of instanceof are not necessarily infallible
6. What is a prototype? A prototype chain

   • Each JS object is automatically associated with another object when it is createdThe prototypeEach object “inherits” properties from the stereotype
   • A chain of interrelated prototypes isPrototype chain
7. This points to how to tell what this is in the arrow function

   • For normal functions,this->window
   • For an object, the person who calls the function is this
   • New,this is always bound to the instance
   • Bind/Call /apply For these functions, this depends on the first argument, if the first argument is null, then window
   • No matter how many times you bind the function, this in the function is always determined by the first bind
   • The arrow function itself has no this
   • The “this” in the arrow function depends on the “this” of the first normal function that wraps the arrow function
   • Arrow functions that use bind,call,this are invalid

   A pen test

   let obj2 = {
       name: 'obj2'
   }
   
   const obj = {
       name: 'obj',
       say1() {
           console.log(this.name)
       },
       obj1: {
           name: 'obj1',
           say2() {
               console.log(this.name);
           }
       },
       say3() {
           const fn = (a)= > {
               console.log(this.name);
           }
           fn()
       },
       say4() {
           const fn = function () {
               console.log(this.name);
           }
           fn()
       },
       say5() {
           const fn = (a)= > {
               console.log(this.name);
           }
           fn.call(obj2)
       },
       say6() {
           const fn = function () {
               console.log(this.name);
           }
           fn.call(obj2)
       }
   }
   
   let a = obj.say1
   let b = obj.obj1.say2
   a() 
   b()
   obj.say1()
   obj.obj1.say2()
   obj.say3()
   obj.say4()
   obj.say5()
   obj.say6()
   Copy the code

   The results of

   undefined
   undefined
   obj
   obj1
   obj
   undefined
   obj
   obj2
   Copy the code

8. What’s the difference between == and ===

   = =

   • First, it determines whether the two types are the same. If they are the same, they are directly compared
   • If the type of the comparison is different, a cast is performed
   • Null and undefined: true
   • String and number: string->number
   • Boolean: Boolean -> number
   • Object vs. string, number, symbol: object -> Primitive value type

   = = =

   • Check whether the type and value are the sametrue
9. What are closures, their features and disadvantages

   1. Simple definitions

   Closures are functions that can read variables inside other functions

   2. Application scenario

   • You need to reuse a variable and protect it from contamination
   • Keeping a variable permanently in memory can be used to loop values
   • Private variable counter, external cannot access, avoid global variable amount pollution

   Characteristics of 3.

   Parameters and variables are not collected by the garbage collection mechanism

   4. Compare to scope

   • The global variable
     • Excellent: reusable
     • Lack: easy to pollute
   • A local variable
     • Excellent: not contaminated, only available inside the function
     • Lack: not reusable

   5. Shortcomings

   • Takes up more memory than normal functions.
   • The impact of memory leaks, when the memory leaks to a certain extent will affect your project to run slow and so on
   • Release method: Assign a variable that references the inner function object to null
10. What is a shallow/deep copy and how is it implemented?

    Shallow copy

    • Only one layer is copied. Deep objects can only copy references to objects

    Shallow copy implementation

    • Object.assign
    • Expansion operator.

    Deep copy

    • Complete copy of a deep object

    Deep copy implementation

    The interview generally does not consider too many boundary questions, generally examines the recursive implementation of an object that can copy objects mixed with arrays

    • JSON.parse(JSON.stringify(object))
      • Ignore the undefined
      • Ignore the symbol
      • Cannot serialize function
      • Objects with circular references cannot be resolved
    • Implement deepClone recursively
11. Promise has several states. What are they

    Three states

    • Pending, waiting for
    • Resolved:
    • Rejectde: refused to

    Once you go from a wait state to another state you can never change the state

12. Do you know async/await? Give a brief description

    • The characteristics of
      • A function with async returns a Promise, and async wraps the return value with promise.resolve ()
      • Await can only be used with async and not alone
    • advantages
      • The advantage is that you can write a clearer call chain than promises
    • disadvantages
      • Because await turns asynchronous code into synchronous code, performance degrades if there is no relationship between multiple asynchrons
    • The principle of
      • Await is the syntax sugar of a generator plus a Promise, with an internal implementation of automatic generator execution
13. What is the process of triggering an event

    There are three stages of event triggering:

    • Capture phase
    • The target stage
    • Bubbling phase
14. What is an event proxy

    If the child nodes in a node are dynamically generated, then the child node should register events with the parent node

    • Saves memory by not having to register each child node once
    • You do not need to deregister events for child nodes
15. What is the same origin policy, what is cross-domain, and how to solve it

    Browser has the same origin policy, if: protocol, port, domain name has a difference is cross-domain

    The solution

    • jsonp
    • CROS support is enabled on the server
    • Nginx reverse proxy
16. Do you know what a precheck request is

    Using CROS on the back end to solve cross-domain problems divides requests into two types:

    • A simple request
    • Complex request

    For complex requests, a precheck request (options) is initiated to determine whether the server allows cross-domain access

17. You know what an event loop is. Describe it briefly

    When executing JS code, functions are actually put into the execution stack. When asynchronous code is encountered, it will be suspended and added to the Task (there are various tasks) queue when it needs to be executed. Once the execution stack is empty, Event Loop will take out the code to be executed from the Task queue and put it into the execution stack for execution

    Event Loop Execution sequence

    • Synchronization code
    • After all synchronous code has been executed, the execution stack is empty and the query is made to see if any asynchronous code needs to be executed
    • If a microtask is generated during the execution of a microtask, it will be added to the end of the queue and will also be called for execution in this cycle
    • After performing all microtasks, render the page if necessary:
      • Determine whether the document needs to be updated: The browser has a refresh rate of 60Hz and updates every 16.6ms.
      • Judge whether there are resize or Scroll events. If there are, the events will be triggered. Therefore, the resize and scroll events will be triggered at least 16ms, and the throttling function is provided.
      • Determine whether the Media Query is triggered
      • Update the animation and send the event
      • Check whether full-screen operation events exist
      • Perform the requestAnimationFrame callback
      • Update the interface
    • Then the next Event Loop starts, executing the asynchronous code in the macro task, the callback function in setTimeout

    conclusion

    • A macrotask is executed one task at a time, and then executes the task in the microtask queue
    • All tasks in the microtask queue are fetched and executed until the microtask queue is empty
    • Whenever UI Rendering is executed, its node executes UI Render immediately after all microtasks are executed and before the next MacroTask

    Micro tasks

    • promise
    • MutationObserver
    • Process. NextTick (node)

    Macro task

    • script
    • xhr
    • setTimeout
    • setInterval
    • setImmediate(node)
    • RequestAnimationFrame (browser)
    • I/O
    • UI Rendering (browser)
18. Var, let, and const differences

    Global scope:

    • Variables declared using var will be mounted to window
    • Variables declared with let and const are not mounted to Windows
    • Variables declared with var are promoted to the top of the scope, and functions are promoted before variables

    Let and const cannot be used before they are declared. The latter cannot be reassigned to a variable

19. What’s new in ES6, and what you’ve learned

1. What is backflow and redraw

   backflow

   Calculate the position and size of the visible Dom nodes at the device viewport. This calculation phase is called backflow

   To know the exact size and location of each visible node in the viewport, the browser traverses from the root node of the render tree

   redraw

   After the generated render tree and backflow stage, the detailed geometric information and styles of all visible nodes are obtained, and then each node of the rendered tree is transformed into an actual pixel on the screen. This stage is called redraw node

2. CSS Hierarchy

   The weight

   • Tag (tag selector):1
   • Class :10
   • Id (ID selector):100
   • Tag inline style :1000
   • ! Important biggest

   In the case of the same weight, the later declaration overrides the previous one

3. Do you know anything about the BFC? How to trigger it

   Block formatting context

   • Specifies how the inner Block boxes are laid out: will the inner boxes be placed vertically one after the other
   • The vertical distance of Box is determined by margin
   • The left side of each element’s margin box touches the left side of the containing block’s border box
   • The region of the BFC does not overlap with the float box
   • Margins of two adjacent boxes belonging to the same BFC will overlap
   • When calculating the height of the BFC, the float element is also calculated
   • A separate container in which the child elements inside the container do not affect the outside elements

   How to trigger

   • The float value is not None
   • The overflow is not visible
   • The display value is inline-block, table-cell, and table-caption
   • The value of position is absolute or fixed
4. Flexible layout Flex
5. Fence layout grid
6. What are the values of the display attribute and what are their functions
7. What are the values of the position attribute, and what do they do
8. Display: none, opactiy: 0, visibility: hidden differences

1. Data bidirectional binding, data response type implementation principle
2. The life cycle
3. Communication methods between components (father and son, brother, grandparent, any)
4. V – if, v – show similarities and differences
5. Routing principle, why does the browser not refresh when the address changes
6. Rights management

1. Caching mechanisms
2. Page rendering Principles (Process)
3. The local store
4. Browser security related issues (SQL injection,XSS,CSRF,DNS hijacking, click hijacking)

1. Optimized Webpack code packaging
2. Network layer optimization
3. Optimized the first screen loading

1. Small program features
2. Your thoughts on the development of mini programs
3. The principle of small program
4. Small program and traditional mobile Web difference