This article summarizes my interview experience and some knowledge points in the past month.

Face to face induction

javaScript

• What are the js data types? What are the differences between typeof null and typeof undefined
• Deep and shallow copy
• var let const difference
• Block level scope
• The difference between arrow function and ordinary function
• Prototype chain

var name='byte'
var obj1={
  name:'dance',
  getName:()=>{
     return this.name;
  }
}
var obj2={
  name :'day1',
  getName:function getName(){
   return this.name;
  }
}
obj1.getName();
obj2.getName();

• event loop
  Firstly, there are two kinds of event loops: one is the macro and micro task loop inside the browser, and the other is nodejs event loop model based on libuv. The two must be distinguished.
  Three articles are recommended:
  Macro task and micro task in js - Zhihu
  You must understand the Event Loop after reading it
  Interview record of a valley
  Answer macro and micro tasks:

JS is single threaded, but when we write code, there will be code executed synchronously and code executed asynchronously. EventLoop is a mechanism to solve asynchronous callback. The specific solution is to use an execution stack and event queue, which is divided into macro task queue and micro task queue. In short, the code is pushed from top to bottom, and the synchronous task will be pushed into the execution stack. In case of asynchronous task, it will be put into different event queues according to the type of asynchronous task and handed over to other threads for processing. If the execution stack is empty, take the result from the event queue, put it into the execution stack and execute it. Each cycle of Event Loop is called a tick. Specifically, take out a macro task first, and then check the micro tasks in it. If there are any, execute all micro tasks. After that, render once. Take out another macro task and continue with the process just described.
Execution sequence:

1. Execute the synchronization code first (take out a macro task)
2. – > execute all micro tasks (this round is over)
3. -->UI render
4. – > execute the next macro task (start of the next round)
5. – > execute the next micro task (the next round is over)
6. -->UI render-->......
7. – > execute the next macro task (start the next round)
8. ...

• List which functions are macro tasks and which are micro tasks?

  Macro task

  script(Overall code)
  setTimeout
  setInterval
  I/O
  UI Interactive event
  postMessage
  MessageChannel
  setImmediate(Node.js environment)
  

  Micro task

  Promise.then
  Object.observe
  MutationObserver
  process.nextTick(Node.js environment)
  

• What is MutationObserver?

  The rotation observer is an API that makes corresponding processing when observing changes in the DOM tree structure.

  //new MutationObserver(function(records, itself){});
  //The other is the observer object itself
  //void observe(Node target, optional MutationObserverInit options)
  //dom node, optional parameters
  
  // There are prefixes in earlier versions of Firefox and Chrome
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
  // Select target node
  var target = document.querySelector('#some-id'); 
  // Create observer object
  var observer = new MutationObserver(function(mutations) {  
    mutations.forEach(function(mutation) { 
      console.log(mutation.type); 
    }); 
  }); 
  // Configure observation options:
  var config = { attributes: true, childList: true, characterData: true } 
  // Incoming target node and observation options
  observer.observe(target, config); 
  // Then you can stop observing
  observer.disconnect();
  

• What are the methods of array

TypeScript

• What are the advantages of ts over native js?

• If the value returned by a function is uncertain, how to determine the type?

  By type inference or generics

• How to understand type inference

• typescript generics
  Provides ts a flexible ability to define data types

  Note: parameters defined by generics must be treated as arbitrary types

  Like you can't

  function loggingIdentity<T>(arg: T): T {
      console.log(arg.length);  // Error: T doesn't have .length
      return arg;
  }
  

  But you can use constraints, that is, let T inherit an interface

  interface Lengthwise {
      length: number;
  }
  
  function loggingIdentity<T extends Lengthwise>(arg: T): T {
      console.log(arg.length);  // Now we know it has a .length property, so no more error
      return arg;
  }
  

  • The difference between ts interface and type
  1. Type can declare basic type alias, union type, Yuanzu and other types

  // Base type alias
  type Name = string;
  
  // Union type
  interface Dog {
      wong()
  }
  interface Cat {
      miao();
  }
  
  type Pet = Dog | Cat;
  
  // Specifically define the type of each position of the array
  type PetList = [Dog, Pet];
  

Vue

• Parent component nested child component, the life cycle sequence of parent and child components

  

  Because when the parent component is mounted (beforeMount and mounted), one will be defined in the middle

  updateComponent = () => {
      vm._update(vm._render(), hydrating)
  }
  

  Execute Vue render(); Render is used to generate vnode, where_ c('test ') will analyze whether it is a common element or a component. If it is a component, it will execute createComponent. At this time, the sub components will be merged again, and the life cycle hook will be installed

  Therefore, the parent and child components of Mount before are executed in this order.

• Vue nextTick principle

  You can see: Asynchronous update principle

  Let's first talk about the principle of vue asynchronous update:

  1. When modifying the Data in Vue, all watchers related to this Data will be triggered to update.
  2. First, all watchers will be added to the Queue.
  3. Then, the nextTick method is invoked to perform asynchronous tasks.
  4. In the callback of the asynchronous task, sort the Watcher in the Queue, and then perform the corresponding DOM update.

  Naturally, after asynchronous update, because of the first in first out principle, the nextTick function registered by the user will be executed, and the updated dom can be obtained at this time.

CSS

• There are at least 3 ways to realize the vertical center layout of elements
• Elastic layout

  • What are the abbreviations of flex: 1?

    flex-grow flex-shrink flex-basis
    Flex growth: allocate the proportion of elastic boxes. The default value is 0
    Flex shrink: allocate the proportion of remaining space. The default is 1. For example, the parent box is 300px and the three sub boxes are 150px. Set flex shrink to 1:1:2 respectively

    First box cut 1501 / 4
    The second box is cut 1501 / 4
    The third box is cut by 150 * 1 / 2

  • What are the attributes of flex?

  flex-direction
  flex-flow
  flex-wrap
  justify-content
  align-items
  align-content
  aligin-self
  flex-grow-flex-shrink flex-basis
  

The flex base attribute is used to set the benchmark value of the scaling (on the spindle), which is similar to that of witth, but the priority of base is higher.

• css how to draw triangles
  Transparent makes the border transparent. The key to understanding here is the shape of the border.

  <!DOCTYPE html>
  <html>
  
  <head>
    <title></title>
    <style type="text/css">
      /* css3 Draw triangle */
      .triangle {
        width: 0px;
        height: 0px;
        /* border-top: 200px solid #00a497; */
        border-bottom: 200px solid #cc7eb1;
        border-left: 200px solid transparent;
        border-right: 200px solid transparent;
      }
    </style>
  </head>
  
  <body>
    <div class="triangle"></div>
  </body>
  
  </html>
  

Front end performance

• What are the indicators of front-end performance?

  FCP: First Contentful Paint
  LCP: Largest Contentful Paint
  FMP: First Meaningful Paint
  DCL: DOMContentLoaded Event
  L: Onload Event

• How to measure and obtain these indicators?

  Using performance visualization tools and performance API s

• How to make users see the main elements faster when accessing

  Preload

• Delayed loading?

  Delay loading, use getBoundingClientRect() to judge the position of the viewport, render inside the viewport, and do not render if not.

  Preload preload or prefetch, both of which are selected in the html header

  The difference between the two is that preload is to forcibly improve the loading priority, and prefetch is to use the idle time of js to realize preloading.

• Optimization strategy of pictures on the page

  Cache, preload, lazy load, user model adaptation

• Let's talk about the image compression algorithm

  gzip

  Different image formats also have their own algorithms, jpg, png and so on

  Lossless compression and lossy compression

computer network

• The difference between tcp and udp
• What are the request methods and the differences between get and post
• How to set cookies

Algorithm & programming problem

• Data structure algorithm | what are the number structures of sorting and what are the traversal methods
• Implement a parseObj({a:{b:[0,1,2,3,4]}},'a.b[0]'), and take out the value of a.b[0]
• call, apply and bind methods to implement functions
• promise.all