Write it up front

  • As a front-end trainee who has practiced for about 3 years, I have started the long road of interview in this spring March. Here I would like to share my interview experience and experience with you. Some questions that are worthy of in-depth discussion and highly frequent occurrence are welcome to point out if there are pen mistakes or improper places.

  • React (16.8+ hooks) + mbox + typescript. From the middle to senior front end positions, base: Beijing.

Face the

  • The basic front end questions we should be familiar with, today to introduce some interview can be discussed in depth and asked questions are open, the examiner generally according to your answer to ask the next question. There are some solutions in the keywords provided below. You just mentioned XXX in your answer, can you talk about XXX in depth? Why use XXXX? “, we try to use key words that we are familiar with.

HTTP is about the web

  • 1. What happens to entering a URL?
    • Just mentioned TCP’s three-way handshake, where HTTPS (what is S? What does it do in the TCP layer?
    • What’s the difference between http2 and HTTPS?
    • What security policies are in place to protect user information (cookie security, token authentication user login information)?
    • What is XSS, CRSF? How to prevent it?
    • Can you elaborate on the front-end rendering process for the final browser rendered page?
    • HTML/CSS/JS page rendering process
    • Introducing the use of JavaScript script files using the script tag, what is the difference between defer/async

keywords: http&https&http2 && xss&crsf

Knowledge supplement:

  1. Enter the address, the browser parses the url.
  2. The DNS, and returns the corresponding IP address.
  3. A TCP connection(TCP three-way handshake port 80). HTTPS encrypts SSL/TLS before TCP connection, prevents hijacking, requires certificate, different port 443]
  4. Sending an HTTP request.
  5. Return the HTTP response.
  6. The browser parses the rendered page.
  7. disconnect(Four waves).
  • What is the same-origin policy?
    • -> Several methods to resolve cross-domain (jSONP, CORS, nginx)
    • -> In what scenarios are there cross-domains? (IFrame, interface request, different domain name)
    • -> HOW are sso sso issues resolved? How are co-domains resolved? How to solve the cookie session sharing problem in different domains?
    • -> Cookie usage security issues
    • -> Session using nginx configuration performance problems

Kewords: Cross-domain solution && Single sign-on principle

  • 3. White screen is often encountered during page rendering. How can we optimize this situation?
    • Using caching? (Talk about browser caches, strong and negotiated caches, details on each field and how they are used.)
    • I just mentioned redirecting 304, so you can name other status codes related to 300, any number of them.
    • Just mentioned browser caching, do you know service work? Talk about the life cycle of services and the benefits of sw
    • Besides service work, what other optimization solutions are there? (Server render SSR, enable HTTP2, load on demand, route segmentation, etc.)

Keywords: Service work and front-end cache && HTTP request headers and response headers, status code && white screen optimization scheme

React

  • 1. Know MVC? Also, what is MVVM?

    • React what is the design pattern? (There’s a pit here.)
    • How do you communicate with React? (Props Render, Context, global Store)
    • Can you explain to me the specific usage scenario of Mbox?
    • Just mentioned @observer, can you implement a JavaScript observer mode? .
    • React is a one-way data stream. I want to implement a two-way binding. (understand Object. DefineProperty ())

  • Keywords: Observer pattern && Object.defineProperty() && MVVM&MVC

  • 2, hooks? How does a functional component compare to a generic class component?

    • React Life cycle changes

    • What is the relationship between useEffect and lifecycle comparison?

    • Where do we optimize the render flow

    • PureComponent(Memo)

    • < span style = “box-sizing: border-box! Important

    • — > the hooks we use useMemo optimization (www.cnblogs.com/crazycode2/…

Keywords: hooks and React Life cycle

  • 3. React
state = {
    a: 0;
}

componentDidMount(){
    
    this.setState({
        a: 1
    })
    
    console.log(this.state.a)
}

Copy the code
  • What were the results?
    • Is setState synchronous or asynchronous?
    • What do I do if I want to achieve synchronous/asynchronous?
    • What is the render flow? (React rendering — Reconciliation process)
    • What do you know about Fiber?

Keywords: setState asynchronous? Synchronization && Fiber &&

subsequent

  • In the next part, I will record some basic JS questions, handwriting related topics, such as promise and algorithm, JS basic application related topics.