Some junior front-end knowledge points frequently asked by interviewers

CSS

1. Introduce the CSS box model

Just answer the following two points:

• A box consists of four parts: content, padding, border, margin. Two box models: W3C standard box model, IE weird box model
• The standard box model width/height is only the height of the content, excluding padding and border values; the IE weird box model width/height includes padding and border values

2. Properties and usage scenarios of flexbox layout

Regarding the commonly used properties of flex, we can divide them into container properties and container member properties

The container properties are:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

The container member attributes are as follows:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

Usage scenario: realize the horizontal and vertical centering of elements, and adaptive layout in two columns and three columns

3. Adaptive solutions for mobile terminals

• rem scheme
• vw、vh

It is necessary to understand the detailed implementation and how the units under development are converted. If you are interested, you can read this article Mobile Adaptive Guide

Javascript

1. Some common features of ES6

1. destructuring assignment

js

copy code

const { a = 2 } = { a: null } const { a = 2 } = { a: undefined }

What is the value of the above two a

1. The difference between let, var, and const
2. How to optimize const value = a && ab && abc, here is the main reference?. Usage

2. Method of JS type detection

• typeof
• instanceOf
• Object.prototype.toString()

Need to understand the output of each inspection method

3. Local storage method

• cookie
• sessionStorage
• localStorage
• indexedDB

The characteristics of each storage method and usage scenarios.

4. How to judge whether an element is in the visible area?

• offsetTop、scrollTop
• getBoundingClientRect, the read value of this API is as follows

• Intersection Observer

This API provides a way to asynchronously observe the changes at the intersection of the target element and the ancestor element or the top-level document view. Simply put, it can detect the visibility of the child element in the parent element

5. JS modularization scheme

• Execute the function immediately
• CommonJS
• AMD、CMD、UMD
• ES6 Module

In most cases, the main question is the use and difference between CommonJS and ES6 Module, and sometimes other solutions are also asked.

6. Loader and Plugin commonly used by Webpack

Common Loaders:

• style-loader: Add css to the inline style tag style of DOM
• css-loader : allows css files to be introduced through require and returns css code
• less-loader: handle less
• sass-loader: handle sass
• postcss-loader: use postcss to process CSS
• file-loader: Distribute files to the output directory and return the relative path, wepakck5 asset/resource built-in support
• url-loader: Similar to file-loader, but when the file is smaller than the set limit, it can return a Data Url, built-in support in wepakck5 asset/inline
• babel-loader: Use babel to convert ES6 files to ES

Common Plugins

• html-webpack-plugin: After the packaging is completed, an html file is automatically generated, and the js module generated by packaging is introduced into the html
• clean-webpack-plugin: delete (clean) the build directory, webpack5 has built-in function output.clean
• mini-css-extract-plugin: extract CSS into a separate file
• copy-webpack-plugin: Copy files or directories to the execution area, such as during the packaging process of vue, if we put some files in the public directory, then this directory will be copied to the dist folder

7. The role of React key

React has a Diff algorithm, and the key attribute of an element is used to determine whether an element is newly created or moved, thereby reducing unnecessary element rendering.

Further understanding of the three characteristics of the React Diff algorithm

• Tree level: DOM node cross-level operations are not optimized, only nodes at the same level are compared
• Component level: If it is a component of the same class, the diff operation will continue. If it is not a component of a class, then directly delete all child nodes under this component and create a new one
• Element level: For comparing nodes at the same level, each node is identified by a unique key at the corresponding level

8. React event mechanism

The main question is the purpose of React events and the order in which native events are triggered.

The React team implemented a set of event mechanisms in the source code to replace native browser events. The purpose is to:

1. Smooth out the differences of event objects in different browsers, such as: prevent event bubbling under different browsers (SyntheticEvent synthetic event);
2. Connect with the task scheduling "priority mechanism" on the underlying architecture

React adopts the event delegation method, and binds the bubbling and capture events to the document. React17 and later, no longer delegates the event to the document, but delegates to the root DOM container that renders the React application

9. Use of React useEffect

For useEffect, the frequently asked points are:

1. The use of useEffect, the role of the two parameters
2. How useEffect simulates componentDidMount and componentDidUpdate
3. Why is it not recommended to useEffect to set the first function parameter as an async function

10. Use of React useRef

useRef mainly asks about the usual use

1. Get DOM elements, or configure forwardRef to get component examples
2. Save variables, equivalent to instance variables of components

11. JSBrige

Because many of the company's projects are mobile h5, all of them must interact with the native, and this knowledge point will also be asked.

general knowledge

1. Talk about HTTP caching

It mainly asks about knowledge related to HTTP caching. You need to know when browser requests will return disk cache, 304, and 200.

For details, please see this article to illustrate HTTP caching

2. Which design patterns have been used

In front-end development, strategy mode, singleton mode, publish-subscribe, and appearance mode are mostly used.

Summarize

Most of the questions in the interview will be used in the development process. When answering, you should focus on the key points and be clear in logic.

 

Recommend a practical interview question bank for everyone

1. Front-end interview question bank ( necessary for interview) recommendation: ★★★★★            

Address: front-end interview question bank