Interview questions

The interview questions

1. What happens to the front end if the back end passes a large number? What should the front end do?

• Lazy loading + paging

• Virtual scroll list

• Fragment processing using the js buffer

  function multistep(steps,args,callback){
      var tasks = steps.concat();
  
      setTimeout(function(){
          var task = tasks.shift();
          task.apply(null, args || []);   // The Apply argument must be an array
  
          if(tasks.length > 0) {setTimeout(arguments.callee, 25);
          }else{ callback(); }},25);
  }
  Copy the code

2. The new process

3. Browser caching mechanisms (strong caching and negotiated caching)

When the browser requests resources to the browser, it checks whether the strong cache is hit and then whether the negotiation cache is hit

[Strong Cache] When loading a resource, the browser determines whether a strong Cache is matched based on the header (Expires, cache-control) of the local Cache resource. If a strong Cache is matched, the browser directly uses the cached resource and does not send a request to the server. [Negotiated cache] When the strong cache is not hit, the browser will send a request to the server. The server determines whether the cache is hit based on the partial information in the header. If it hits, 304 is returned, telling the browser that it was not updated and that the local cache can be used.

If the local resource has expired, the server is asked whether the resource has been updated (whether the negotiated cache has been matched). If the server has not updated (304 is returned), the server continues to use the local cache resource

Cache-control fields

When cache-control is used in a request, its optional values are:When cache-control is used in the response, its optional values are:

Expanding knowledge:

DNS cache

The full Name is Domain Name System.

The World Wide Web, as a distributed database of domain names and IP addresses, makes it easier for users to access the Internet without remembering IP numbers that can be read directly by machines. DNS runs on TOP of UDP and uses port 53.

The DNS

Also called host name resolution.

The process of obtaining the IP address of a domain name is called domain name resolution

www.baidu.com – DNS resolution – 11.222.33.444

Where you have DNS, you have caches, browsers, operating systems, Local DNS, root DNS, they all cache DNS results to some degree.

The DNS query process is as follows:

1. First search the browser’s own DNS cache, if present, domain name resolution is complete
2. If the browser does not find the mapping, the system attempts to read the hosts file of the operating system to check whether the mapping exists. If yes, the mapping is complete
3. If no mapping exists in the local hosts file, search for the local DNS server (ISP server or manually configure the DNS server). If yes, the task is complete
4. If the local DNS server is not already hosting, it issues a request to the root server for a recursive query

CDN cache

Full name: Content Delivery Network.

Advantage:

1. CND node solves the problem of cross-operator and cross-region access, and greatly reduces the access delay. 2. Most of the requests are completed at the edge of THE CDN, which plays a role of diversion and reduces the load pressure of the source serverCopy the code

memory cache

MemoryCache, as its name implies, is a cache of resources in memory that can be retrieved from memory without having to re-download the resource for the next access. Webkit has long supported memoryCache. Currently, Webkit resources are divided into two types: main resources, such as HTML pages or download items, and derived resources, such as embedded images or script links in HTML pages, which correspond to two classes in the code: MainResourceLoader and SubresourceLoader. Webkit supports memoryCache, but only for derived resources, corresponding to the CachedResource class, which holds raw data (CSS, JS, etc.) as well as decoded image data.

disk cache

DiskCache, as its name implies, caches resources to disks. The DiskCache directly obtains resources from disks without re-downloading them for next access. Its direct operation object is CurlCacheManager.

• |memory cache | disk cache

4. Write a circular progress bar with CSS3

5. A task control programming problem about Promise

6. Tell me what BFC is and what problem it solves

7. How browsers load AN HTML (parsing DOM, CSS, JS…)

8. Principle of vue-Router implementation

9. Backflow redraw, why not position Top left with transform

10.if… else… How to solve multi-layer nesting

11. Programming problem: n-dimensional array into a 1 d array, such as: [1, [2, 3], [[4], [5, 6]]] to [6]

Write an EventEmitter

13. When the browser address bar enters a URL to the page display, this process?

14. HTTPS process

15. Relationship between HTTP and TCP

Find the second largest number in an unordered array

HTML

• What are the three layers of browser pages? What are they and what are their functions?

• What are the advantages and disadvantages of HTML5?

• Doctype? How to distinguish strict mode from promiscuous mode? What do they mean?

• What are the new features and elements removed from HTML5?

• In which browsers have you tested your web pages, and what are their cores?

• There’s a very important thing at the beginning of every HTML file, Doctype, you know what that is?

• What do you know about HTML5? (What and why)

• Understanding of WEB standards and W3C?

CSS

• Explain the box model of CSS.
• Can you describe the types of CSS selectors and give some examples of their use?
• What’s special about CSS? (Priority, calculate special value)
• Common Browser compatibility problems and solutions?
• List the values of display and say what they do?
• How do I center a div, how do I center a floating element?
• Please list how many ways (at least two) to clear float?
• Block, Inline and Inlinke-block details comparison?
• What is graceful degradation and progressive enhancement?
• Talk about the problems that float elements can cause and how you can solve them
• What performance optimization methods do you have?

JavaScript

• Js positions, such as clientHeight scrollHeight, offsetHeight, as well as the scrollTop, offsetTop, what is the difference between clientTop?

• Js drag function implementation

• Asynchronous loading of JS methods

• Js anti – shake and throttling

• A little bit about closures

• Explain your understanding of scope chains

• JavaScript prototype, prototype chain? What are the characteristics?

• Please explain what event delegation/event proxy is

• How does Javascript implement inheritance?

• The function executes to change this

  <! Use the arrow function to point to the function object itself -->function fn(){
      console.log('real'.this); // {a:100}
  
      var arr = [1.2.3];
      arr.map(item= >{
          console.log(this); // {a:100}
      })
    }
    fn.call({a:100}); // call forces fn to point to {a:100}<! Instead of using arrow functions,thisPoint to thewindow -->
    function fn(){
    console.log('real'.this); // {a:100}
  
    var arr = [1.2.3];
    arr.map(function(item){
        console.log(this); // window;
    })
     }
    fn.call({a:100});
  Copy the code

• Babel compilation principles

• The function is currified

• Talk about class creation and inheritance

• Talk about the flow of events in the front end

• How do I bubble events first and then catch them

• Talk about lazy loading and preloading of images

• What does the js new operator do

• Change the pointer to this inside a function.

• Ajax solves browser caching problems

2. How about asynchrony in JavaScript?

Answer: setTimeout, MutationObserver, postMessage, Promise, Async, await, Generator

From MutationObserver, postMessage is involved in vue’s $nextTick

From the generator will talk about co.js implementation, the code is not long, the meaning is easy to understand, but let me write really did not write, I suggest brothers have a good look!

From Promises and setTimeout to event loops

3. Browsers and NodeJS event loops?

A: Execution stack, promise is microTask, setTimeout is task

Many of the stage, can see from here the complete model is introduced: html.spec.whatwg.org/multipage/w…

SetTimeout is not special, it is also a task. In addition, renderUi stage is performed after each execution of task and a large number of microtasks (not necessarily all in one loop). Although renderUi is not performed for each event loop, each interval is 16ms at 60Hz.

The NodeJS event loop is slightly different… More process. NextTick etc

4. Write promises by hand or a static method of promises

A: Write promises by hand. Try to include Promise states, static methods, and. Then,. Catch. Of course, A more detailed restoration can be found in the Promise A+ specification.

Static methods refer to promise.allSettled promise.all promise.race, etc.

5. Handwritten throttling and anti-shake

Answer: Cliche, the principle is very simple, mainly depends on whether the function can be encapsulated, and whether the encapsulation is advanced, consider whether the situation is comprehensive.

6. Write bind

7. The service worker to use

A: Caching, progressive application, interception processing

You may also talk about Web workers, shared worders, etc. If you are confident or your job has an in-depth understanding of these aspects, you can show them off. Can reflect their strengths…

8. Strict mode

Arguments are not allowed to change, arguments are not allowed to change, assigns values to read-only objects throw exceptions, variables need to be declared first, call, apply first arguments will not be converted…

If you can get some answers.

Vue

• The function of the key value in Vue

• Why does data have to be a function in a Vue component?

• What is the State feature of VUex?

• Introduce Vue’s responsive system

• Difference between computed and Watch

• Introduce the Vue lifecycle

• Why does a component’s data have to be a function

• How do components communicate with each other

• How to use custom components in vue. CLI? Have you encountered any problems?

• How does Vue implement load on demand with Webpack setup

• Briefly describe which scenarios are appropriate for each cycle

• What is SCSS? What are the installation steps in vue. cli? What are the major features?

• What is your understanding of template compilation in vue.js?

• Vue route jump in several ways

• How does Vue implement load on demand with webPack setup?

• Vue routing implementation: Hash mode and history mode

• How does Vue differ from Angular and React?

• Vue route hook function

• What are the calculated properties of Vue?

React

• React

• React Single data flow

• React life cycle The life cycle of the React function and the React component

• React and Vue react and Vue react

• Component communication for reactJs

• React virtual DOM: How does the React virtual DOM compare

• React was used in the project. Why react? What are the benefits of React

• How do I get the real DOM

• React

• React life cycle function

• The process after setState

• React High order components?

• React JSX, functional programming

• What does the React component use to determine whether to refresh

• How do I configure the React-router

• Dynamic load module for routing

• What is Redux middleware and how many parameters does it take

• How does redux request middleware handle concurrency

memory

Browser, Network, DNS, CDN,

• Communication across tabs

    // The first type of BroadCast Channel is BroadcastChannel, which helps us to create a communication Channel for broadcasting. When all pages listen for messages on the same channel, messages sent by one page are received by all the other pages. Its API and usage are very simple.
    // use the same name in different pages new BroadcastChannel()
    const bc = new BroadcastChannel("afc");
    / / send
    bc.postMessage("hello");
    / / to monitor
    bc.onmessage = function(e) {
        console.log("Listening", e);
    }
    / / close
    bc.close();
  
  
    // The second type of Server Worker Service Worker is a Worker that can run in the background for a long time and can realize two-way communication with the page. Service workers between multiple page sharing can be shared, and the broadcast effect can be realized by taking the Service Worker as the message processing center (central station).
    
  Copy the code

• Browser architecture

• Event Loop in browser

• The process from entering url to presentation

• Redraw and reflow

• storage

• Web Worker

• V8 garbage collection mechanism

• Memory leaks

• Reflow and Repaint optimizations

• How to reduce redrawing and reflow?

• What happens when a page is loaded and displayed from the time the URL is entered?

• LocalStorage and sessionStorage and cookie difference summary

Server and network

• The difference between HTTPS and HTTP

• The HTTP version

• What happens from entering the URL to rendering the page?

• HTTP cache

• The cache location

• Strong cache

• Negotiate the cache

• The cached resources are there

• The impact of user behavior on browser caching

• Advantages of caching

• Request execution for different refreshes

A small amount of algorithm

• Palindrome string, center diffusion method
• Bubbling, let’s go
• Binary search
• Binary tree
• Dynamic planning (did not meet this test, may be too difficult, the interviewer saw me simple half a day to win, this directly not considered, big guy can pay attention to)

Algorithms and data structures

Commonly used algorithm

The bubbling

function bubbleSort(arr) {
    for (let i = 0, len = arr.length; i < len - 1; i++) {

        for (let j = 0; j < len - 1 - i; j++) {
            console.log(i, j, arr.join());
            count++;
            if (arr[j] - arr[j + 1] > 0) {
                let x = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = x;
            } else {
                // break;}}}return arr;
}

Copy the code

Deduplicate method, sorting algorithm, count the maximum number of letters

• Binary tree sequence traversal
• Properties of B trees, the difference between B trees and B+ trees
• Tail recursion
• How do I write a large factorial? What’s wrong with the recursive approach?
• A method to turn a multidimensional array into a one-dimensional array
• Talk about how bubbling works
• How does Heap sort work? Complexity?
• Several common sorting algorithms, handwritten
• Array to write as many methods as possible
• If I have a large array, all integers, how do I find the largest 10 numbers