preface

This article, dedicated to my girlfriend, wish her in Hangzhou to find a 965 good company!

Aside: I have also written an article about the intermediate -> Advanced progression, which I hope will be helpful to you:

Advanced advanced guide for the beginning and middle front ends

HTML report

HTML 5 semantic

Html5 semantic tags

Baidu IFE H5 semantic article, speaks very well, many good companies will ask semantic questions.

CSS article

CSS often meet test questions

50 classic CSS interview questions

CSS foundation some companies take seriously, before the interview or need to review again.

Can you talk a little bit about Flex layouts and common properties? .

Ruan Yifeng’s Flex series

Flex layouts are a frequent test site and are one of the most common layouts used in common development, so be familiar with them.

What is the BFC? What problem does it solve?

What is the BFC? Under what conditions does it trigger? What are the application scenarios?

For BFC, check out the three Big Guy summary article

In this article, the problem of margin overlap is also discussed incidentally.

JS based article

What about JS data types?

The latest ECMAScript standard defines eight data types:

  • Six primitive types
    • Boolean
    • Undefined
    • Number
    • BigInt
    • String
    • Symbol
  • null
  • Object
  • Function

Developer.mozilla.org/en-US/docs/…

What about Map and Set?

  1. The key of a Map is more flexible than that of a common object. A common object’s key can only be a key of the underlying data type, and all incoming key values are converted to strings. A Map’s key can be a variety of data types.
  2. Set can talk about its deweighting property.

What is the difference between WeakMap and Map?

WeakMap can only take complex data types as keys, and the key value is a weak reference, which is more garbage collector friendly.

What about prototype chains?

JavaScript goes deep from prototype to prototype chain

The prototype chain is not used much now, but the __proto__ and prototype relationships, and the ability to look up attributes, should be clear.

Tell me about this?

JavaScript in this

  1. This points to the caller. This relationship must be clear
  2. Know how many ways to change this (call, bind, apply)
  3. The specificity of this in the arrow function has to be made clear

The difference between shallow and deep copies

  • Shallow copy: Generally refers to copying the first layer of an object onto a new object, such as
var a = { count: 1.deep: { count: 2}}var b = Object.assign({}, a)
/ / or
varb = {... a}Copy the code
  • Deep copy: Usually implemented recursively, if the value of the object is still an object, a deeper copy is made, completely replacing each reference to the complex type.
var deepCopy = (obj) = > {
    var ret = {}
    for (var key in obj) {
        var value = obj[key]
        ret[key] = typeof value === 'object' ? deepCopy(value) : value
    }
    return ret
}
Copy the code

For the same use case

/ / shallow copy
var a = { count: 1.deep: { count: 2}}varb = {... a} a.deep.count =5
b.deep.count / / 5
Copy the code
var a = { count: 1.deep: { count: 2}}var b = deepCopy(a)
a.deep.count = 5
b.deep.count / / 2
Copy the code

What about event bubbling and event capture and event proxy?

Do you really understand event bubbling and event capture?

The framework paper

React

React needs to be as skilled as possible. Because as an intermediate engineer, the company may not let you write the framework, tuning performance optimization, but will certainly let you complete the development task with quality and quantity, which requires you to be skilled in the framework.

React2019 High-frequency interview questions

17 React interview questions and detailed explanations

You can go through these problems first, and if you can’t understand them for the time being, you can skip them first. You don’t need to die.

Have you used React Hooks?

  • What are the common ones? What does it do?
  • How do I use hooks to resend requests when dependencies change?
  • Have you written custom hooks? What problems have been solved.
  • Talk about React Hooks closure traps. How did you fix them?

UseEffect complete guide

As for the Hook question, a brief review of Dan’s post will almost certainly give you a good laugh.

What about component reuse in React?

From Mixin to HOC to Hook

This article, from mixin to HOC to Hook, explains some exploration and development of Component reuse in React in detail. If you can explain this well, the interviewer will be impressed with your React strength.

In addition, the higher-order components and hooks in this article are also high frequency test points.

tool

The basics of WebPack

This series from the basic to optimization, you can choose to dig deep into liu Xiaoxi’s Webpack series

Performance optimization

What about the various phases of web performance optimization?

React 16 Load performance optimization guide

This is very long, very detailed, the same do not die of one of the points, for you probably know the point to consolidate the impression is OK.

How does WebPack code splitting work?

Webpack code splitting (same with lazy route loading)

This import() syntax for lazy route loading and asynchronous Webpack loading modules is worth taking a closer look at.

network

What about the basic structure of HTTP?

HTTP infrastructure

What are the common HTTP status codes?

The HTTP status code

What happens when the browser goes from the input URL to the rendered page?

What happens when the browser enters the URL

What is your understanding of cookies? Include the SameSite attribute.

Predict the SameSite property of the Cookie for the upcoming interview

This article will focus on the SameSite properties of cookies added to Chrome80, as well as review and review cookies as a whole

How does HTTPS work? Why does HTTPS guarantee security?

Talk about the HTTPS

HTTPS is also a high frequency test site. You need to go over the HTTPS encryption principle.

What about front end security? XSS, CSRF, and how to prevent it.

Web Security is a must for you

Security issues are also a lot of companies must ask, after all, who do not want to write their own front-end website vulnerabilities.

What about HTTP caching, strong caching, negotiated caching?

In-depth understanding of browser caching mechanisms

Browser caching is basically a must, and this article is well worth a look.

Write a series of

basis

Handwriting various native methods

How to simulate the effect of implementing a new? How to simulate the effect of a bind? How to implement a call/apply function? Ternary – Handwritten code series

To be honest, I’m not a big fan of handwritten code questions, but many companies do, so go through them if you can.

The advanced

Write Promise 20 lines

If you have limited energy, don’t memorize the A+ spec promise by hand, but if you have time, you can go through the paper, and then if you get it in the interview, write it down in A short way.

Parse the Promise internal structure and step by step implement a complete Promise class that can pass all Test cases

❤️ Thank you all

1. If this article is helpful to you, give it a like. Your likes are my motivation.

2. Follow the public number “front-end from advanced to hospital” can add my friends, I pull you into the “front-end advanced exchange group”, we communicate and progress together.