Interview summary from January to February

Posted by kaeRock on Thu, 03 Feb 2022 06:05:23 +0100

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

Face to face induction


  • 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={
var obj2={
  name :'day1',
  getName:function getName(){

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)
    UI Interactive event
    setImmediate(Node.js environment)

    Micro task

    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) { 
    // 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
  • What are the methods of array


  • 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 {
    interface Cat {
    type Pet = Dog | Cat;
    // Specifically define the type of each position of the array
    type PetList = [Dog, Pet];


  • 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.


  • 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-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>
      <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;
      <div class="triangle"></div>

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


  • 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


    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