“This is the 8th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge.”

Before I knew it, it was mid-August. Recently, a lot of senior students are talking to me about the fall recruitment interview. In fact, I don’t have much experience in the interview, so I can only silently share with them the front test questions I had arranged before. Today, I’ll take a look at the front end of the interview system (each section has a reference answer at the end of the interview question).

1. Front-end knowledge system

Before saying the front-end interview system, first take a look at the front-end knowledge system diagram before finishing (may not be complete, after all, I just graduated for more than a month of small vegetable chicken), this is just a basic version of the front-end knowledge system diagram, suitable for beginners front partner reference, big guy do not spray:

2. HTML

(1) Interview questions

HTML interview questions:

  1. The difference between SRC and href
  2. Semantic understanding of HTML
  3. The role of DOCTYPE
  4. The difference between defer and async in the script tag
  5. What meta tags are commonly used
  6. What’s new with HTML5
  7. What does the srcset attribute of img do?
  8. What are the inline elements? What are the block-level elements? What are the void elements?
  9. Let’s talk about Web workers
  10. How does HTML5’s offline storage work and how does it work
  11. How does the browser manage and load HTML5’s offline storage resources?
  12. What is the difference between title and h1, b and strong, I and em?
  13. What are the advantages and disadvantages of iframe?
  14. What does the label do? How to use it?
  15. The difference between Canvas and SVG
  16. What does the head tag do, and which tags are essential?
  17. What does a Doctype and a Doctype do? How to distinguish strict mode from promiscuous mode? What do they mean?
  18. What causes garbled browser characters? How to solve it?
  19. The difference between progressive enhancement and graceful degradation
  20. Talk about the HTML5 Drag API

(2) Mind mapping

The following figure roughly distinguishes the frequency of HTML interview questions, which can be selectively studied:

(3)

Since there are interview questions, the answer to the interview questions is also essential, refer to the article: “2021” high-frequency front end test summary HTML article

2. CSS

(1) Interview questions

CSS interview questions:

First, CSS foundation

  1. CSS selectors and their priorities

  2. What are the inheritable and non-inheritable properties in the CSS

  3. The value of the display attribute and its function

  4. The difference between block, inline, and inline-block of display

  5. What are the ways to hide elements

  6. The difference between link and @import

  7. The difference between transition and animation

  8. Display: None and visibility:hidden

  9. What are the differences between pseudo-elements and pseudo-classes?

  10. Understanding of requestAnimationframe

  11. Understanding of the box model

  12. Why is translate sometimes used to change position instead of position?

  13. What causes the invisible gap between Li and Li? How to solve it?

  14. What’s new in CSS3

  15. Substitution element concept and calculation rules

  16. Common picture formats and usage scenarios

  17. Understanding of CSSSprites

  18. What are physical pixels, logical pixels and pixel density, and why do you need @3X, @2X images for mobile development?

  19. Usage scenarios of Margin and padding

  20. Understanding of line-height and how to assign it

  21. What are some ways to optimize and improve CSS performance?

  22. What is the CSS preprocessor/post-processor? Why use them?

  23. What’s the difference between double and single colons for ::before and :after?

  24. Display: When does inline-block display gaps?

  25. Single, multiple lines of text overflow hidden

  26. What is Sass, Less? Why use them?

  27. Understanding of media queries?

  28. Engineering understanding of CSS

  29. How do I tell if an element is visible

  30. Under what conditions does the Z-index attribute become invalid

  31. What are the properties of a transform in CSS3

2. Page layout

  1. Common CSS layout units
  2. The differences between PX, EM and REM and the use scenarios
  3. Implementation of a two-column layout
  4. Implementation of a three-column layout
  5. Horizontal vertical center implementation
  6. How to adapt the mobile terminal according to the design draft?
  7. An understanding of Flex layouts and their usage scenarios
  8. The concept and basic principles of responsive design

Three, positioning and floating

  1. Why do you need to clear floats? Clearing float mode
  2. How does the Clear property clear floating?
  3. Understanding of BFC, how to create BFC
  4. What is margin overlap? How to solve it?
  5. The cascading order of elements
  6. What are the properties of position and what are the differences
  7. Relationship between display, float, and position
  8. The similarities and differences between absolute and fixed
  9. Understanding of sticky localization

Iv. Scenario Application

  1. Implementing a triangle
  2. Implementing a sector
  3. Implement a width and height adaptive square
  4. Draw a 0.5px line
  5. Set a font less than 12px
  6. How to solve the 1px problem?

(2) Mind mapping

The following figure makes a general distinction of the frequency of CSS interview questions, which can be selectively studied:

(3)

Since there are interview questions, the answer to the interview questions is also essential, refer to the article: “2021” high-frequency front end of the CSS test summary

3. JavaScript

(1) Interview questions

1. Data types

  1. What are the data types in JavaScript, and how do they differ?
  2. What are the methods of data type detection
  3. What are the ways to determine an array
  4. Difference between null and undefined
  5. What is the result of typeof null, and why?
  6. Intanceof operator implementation principle and implementation
  7. Why 0.1+0.2! == 0.3, how to make it equal
  8. How do I get a safe undefined value?
  9. What is the result of Typeof NaN?
  10. IsNaN = Number. IsNaN = Number.
  11. Casting rules for the == operator?
  12. Other value to string conversion rules?
  13. Rules for converting other values to numeric values?
  14. Rules for converting other values to values of type Boolean?
  15. | | and && operator returns a value?
  16. Is () and the comparison operators “===”, “==”?
  17. What are wrapper types in JavaScript?
  18. How do YOU do implicit conversions in JavaScript?
  19. When is the + operator used for concatenation of strings?
  20. Why is there a BigInt proposal?
  21. Assign and extend are deep or shallow copy operations

Second, the ES6

  1. Let, const, var
  2. Can properties of const objects be modified
  3. What happens if I say new to an arrow function
  4. The difference between an arrow function and an ordinary function
  5. Where does this point to the arrow function?
  6. The purpose and usage scenario of the extension operator
  7. What functions can Proxy achieve?
  8. Understanding the deconstruction of objects and arrays
  9. How to extract a specified attribute in a highly nested object?
  10. Understanding rest parameters
  11. Template syntax and string processing in ES6

Third, JavaScript foundation

  1. How the new operator works

  2. The difference between map and Object

  3. This section describes the difference between map and weakMap

  4. What built-in objects JavaScript has

  5. What are the common regular expressions?

  6. Understanding JSON

  7. What are the ways in which JavaScript scripts can be lazy loaded?

  8. JavaScript class array object definition?

  9. What native methods do arrays have?

  10. What are the differences between Unicode, UTF-8, UTF-16, and UTF-32?

  11. What are some common bitwise operators? What is the calculation rule?

  12. Why is the arguments to a function an array of classes instead of an array? How do I iterate over an array of classes?

  13. What are DOM and BOM?

  14. How to convert an array-like object into an array

  15. The difference between escape, encodeURI, and encodeURIComponent

  16. With an understanding of AJAX, implement an AJAX request

  17. Why does JavaScript do variable promotion, and what problems does it cause?

  18. What is a tail call and what are the benefits of using it?

  19. What are the similarities and differences between ES6 and CommonJS modules?

  20. What are the common DOM operations

  21. What does “use strict” mean? What’s the difference in using it?

  22. How do I determine if an object belongs to a class?

  23. The difference between strongly typed and weakly typed languages

  24. The difference between interpreted and compiled languages

  25. for… In and for… The difference of

  26. How to use for… Of traverses the object

  27. Ajax, Axios, FETCH difference

  28. What are the methods of traversing an array

  29. What’s the difference between forEach and map methods

Prototypes and prototype chains

  1. Understanding of archetypes, archetype chains
  2. Prototype modification, rewrite
  3. Prototype chain pointing
  4. Where does the prototype chain end? How do I print the end of the prototype chain?
  5. How do I get properties on an object that are not on the stereotype chain?

Execute context/scope chains/closures

  1. Understanding closures

  2. Understanding of scope, chain of scope

  3. An understanding of the execution context

Sixth, this call/apply/bind

  1. Understanding of the this object
  2. The difference between call() and apply()?
  3. Implement the call, apply and bind functions

7. Asynchronous programming

  1. How to implement asynchronous programming?
  2. SetTimeout, Promise, Async/Await
  3. Understanding Promise
  4. Basic use of Promise
  5. What problem did Promise solve
  6. All and promise. race
  7. Understanding of async/await
  8. I am awaiting the await.
  9. The advantage of async/await
  10. The advantages of async/await over Promise
  11. How does async/await catch exceptions
  12. What’s the difference between concurrency and parallelism?
  13. What is a callback function? What are the drawbacks of callback functions? How to solve the callback hell problem?
  14. What are the characteristics of setTimeout, setInterval, and requestAnimationFrame?

Object oriented

  1. How can objects be created?
  2. What are the ways in which objects are inherited?

Garbage collection and memory leaks

  1. The browser’s garbage collection mechanism
  2. What can cause a memory leak

(2) Mind mapping

The following figure roughly distinguishes the frequency of JavaScript interview questions, which can be selectively studied:

(3)

Since there are interview questions, the answer to the interview questions is also indispensable, reference article:

  • The first part of the text of “2021”
  • “2021” is a term for “2021”.

4. Vue

(1) Interview questions

I. Vue Foundation

  1. Basic principles of Vue
  2. Principles of bidirectional data binding
  3. What are the drawbacks of using object.defineProperty () for data hijacking?
  4. The difference between MVVM, MVC and MVP
  5. Difference between Computed and Watch
  6. The difference between Computed and Methods
  7. What is slot? What does it do? How does it work?
  8. How to implement a filter
  9. How do I save the current state of the page
  10. Common event modifiers and their effects
  11. Principles of V-IF, V-show and V-HTML
  12. The difference between v-if and V-show
  13. How is v-Model implemented, and what is syntactic sugar actually?
  14. Can V-Model be used with custom components? If so, how?
  15. Why is data a function and not an object
  16. Understanding of keep-alive, how it is implemented, and what exactly is cached?
  17. $nextTick Principle and function
  18. What happens when you add a new property to an object property in data in Vue? How to solve it?
  19. What are the array methods encapsulated in Vue, and how do they implement page updates
  20. Vue single-page vs. multi-page applications
  21. Vue Template to render
  22. Will the view be rerendered synchronously when the value of a property in Vue Data changes?
  23. Describe the covering logic of mixins and extends
  24. Describe the Vue custom instruction
  25. Can a child component directly change the parent’s data?
  26. How does Vue collect dependencies?
  27. The understanding of React and Vue, the similarities and differences
  28. The advantages of Vue
  29. The difference between assets and static
  30. Delete and vue. delete delete array difference
  31. How does vue listen for changes to a property of an object or array
  32. What is a mixin?
  33. Vue template compilation principles
  34. Understanding SSR
  35. What are the Vue performance optimizations
  36. Understanding of SPA single page, what are its advantages and disadvantages?
  37. What is the difference between template and JSX?
  38. The vUE initialization page is blinking
  39. What does extend do
  40. The difference between mixins and mixins
  41. What are the pros and cons of MVVM?

Ii. Life cycle

  1. Talk about the Vue lifecycle
  2. Vue Execution sequence of child components and parent components
  3. The difference between created and Mounted
  4. In which lifecycle asynchronous data is typically requested
  5. What are the life cycles in keep-alive

3. Component communication

  1. How components communicate

Four, routing,

  1. How is the vue-Router lazy loading implemented
  2. The difference between hash and History modes for routing
  3. How do I get hash changes to the page
  4. The difference between route and route is the difference between route and router
  5. How do I define dynamic routing? How do I get the dynamic parameters passed in?
  6. Vue-router Indicates the life cycle of a route hook
  7. What is the difference between vue-router hop and location.href
  8. Params vs. Query
  9. Vue-router Specifies the navigation guards
  10. Understanding of front-end routing

Fifth, Vuex

  1. The principle of Vuex

  2. The difference between action and mutation in Vuex

  3. Difference between Vuex and localStorage

  4. What is the difference between Redux and Vuex, their common ideas

  5. Why use Vuex or Redux

  6. What are the properties of Vuex?

  7. What’s the difference between Vuex and pure global objects?

  8. Why cannot asynchronous operations be performed in Vuex mutation?

  9. What is the strict mode of Vuex, what does it do, and how can it be turned on?

  10. How to batch use the Vuex getter property in a component

  11. How do I reuse Vuex mutation in a component

Six, Vue 3.0

  1. What’s new with Vue3.0
  2. DefineProperty and Proxy
  3. Why use proxy in Vue3.0?
  4. Vue Composition API in Vue 3.0?
  5. Composition API is very similar to React Hook, what is the difference

7. Virtual DOM

  1. Understanding the virtual DOM?
  2. Virtual DOM parsing process
  3. Why use the virtual DOM
  4. Does the virtual DOM really perform better than the real DOM
  5. Principle of DIFF algorithm
  6. Function of key in Vue
  7. Why not use index as the key?

(2) Mind mapping

The following figure roughly distinguishes the frequency of Vue interview questions, which can be selectively studied:

(3)

Since there are interview questions, the answer to the interview questions is also indispensable, reference article:

  • “2021” High Frequency front face test Questions summary Vue (PART 1)
  • “2021” High frequency front face test Questions summary Vue (Part ii)

5. React

(1) Interview questions

I. Component Foundation

  1. React event mechanism
  2. How do React events differ from normal HTML events?
  3. How to do event proxies in the React component? How does it work?
  4. Q: What is the difference between React high-level components, Render props, hooks
  5. How does React get the DOM element corresponding to the component?
  6. Can REFs be accessed from Render in React? Why is that?
  7. Understanding of The React Portals, how to use them, and in what scenarios
  8. How to avoid unnecessary render in React?
  9. Understanding of React-Intl, how does it work?
  10. Understanding the React context
  11. Why does React not recommend using Context first?
  12. What are controlled and uncontrolled components in React?
  13. What is the function of refs in React? What are the application scenarios?
  14. What does the React component’s constructor do? Is it necessary?
  15. What’s the React. ForwardRef? What does it do?
  16. What are the similarities and differences between class components and function components?
  17. Can REFs be accessed from Render in React? Why is that?
  18. Understanding of The React Portals, how to use them, and in what scenarios
  19. How to avoid unnecessary render in React?
  20. Understanding of React-Intl, how does it work?
  21. Understanding the React context
  22. Why does React not recommend using Context first?
  23. What are controlled and uncontrolled components in React?
  24. What is the function of refs in React? What are the application scenarios?
  25. What does the React component’s constructor do? Is it necessary?
  26. What’s the React. ForwardRef? What does it do?
  27. What are the similarities and differences between class components and function components?

2. Data management

  1. How React setState is called
  2. What happens after the React setState call? Is it synchronous or asynchronous?
  3. What is the process of batch updating setstates in React?
  4. Do you use getDefaultProps in React? What does it do?
  5. What does the second parameter setState do in React?
  6. What’s the difference between setState and replaceState in React?
  7. What is the difference between this.state and setState in the React component?
  8. How is state injected into the component? What is the process from reducer to the component
  9. What’s the difference between the React component’s state and props?
  10. Why is props in React read-only?
  11. What are some ways to update a component when its props change in React?
  12. How do I check props in React? What was the purpose of verifying Props?

Iii. Life cycle

  1. What is the React lifecycle?
  2. What lifecycle does React scrap? Why is that?
  3. React 16.x props in which lifecycle changes are processed
  4. React performance optimization in which lifecycle? How does it optimize?
  5. What is the difference between the lifecycle of updates triggered by state and props?
  6. In which lifecycle should a network request be made in React? Why is that?
  7. What are the new life cycles in React 16

Iv. Component communication

  1. How do father and son components communicate?
  2. How do cross-level components communicate?
  3. How do non-nested relationship components communicate?
  4. How do I solve the problem of props being too deep
  5. What are the ways that components communicate

Five, routing,

  1. How does the React-Router work?
  2. How do I configure the React-router to implement route switchover
  3. How to set redirection for react-router?
  4. The difference between the Link tag and the A tag in the React-Router
  5. How to get URL parameters and history objects from react-router?
  6. How does React-Router 4 rerender the same component when routing changes?
  7. How many routing modes does the React-Router have?
  8. What’s the use of the React-Router 4 Switch?

Six, Redux

  1. What problems does Redux solve
  2. Redux principle and workflow
  3. What about asynchronous requests in Redux
  4. Redux how to achieve property transfer, introduce the principle
  5. What is Redux middleware? How many parameters are accepted? What are the parameters at both ends of the Currie function?
  6. How does the Redux request middleware handle concurrency
  7. What’s the difference between a Redux state manager and a variable mounted to a window
  8. What’s the difference between Mobox and Redux?
  9. What is the difference between Redux and Vuex, their common ideas
  10. How does Redux middleware get store and Action? And then what do we do?
  11. What does Connect do in Redux

Seven, Hooks,

  1. Understanding of React Hook and how it is implemented
  2. Why does useState use arrays instead of objects
  3. What problems do React Hooks solve?
  4. What are the use restrictions of React Hook?
  5. The difference between useEffect and useLayoutEffect
  6. React Hooks need to pay attention to the problems and reasons in daily development
  7. What is the relationship between React Hooks and life cycles?

Viii. Virtual DOM

  1. Understanding the virtual DOM? What does the virtual DOM mainly do? What is the virtual DOM itself?
  2. How does the React Diff algorithm work?
  3. What’s the React key for and why do you add it? What kind of problems does key mainly solve
  4. Is the introduction of the virtual DOM more efficient than direct manipulation of the native DOM, and why
  5. How is React different from Vue’s Diff algorithm?

Nine, other

  1. What is the recommended way to name the React component?
  2. What does the latest version of React fix or add
  3. React implements a global dialog
  4. What are the practices for React data persistence?
  5. The understanding of React and Vue, the similarities and differences
  6. Can I write React apps in TypeScript? How does it work?
  7. React design. What’s the philosophy behind it?
  8. React: props. Children.Children
  9. What’s the React status upgrade? What are the usage scenarios?
  10. Constructor = constructor; getInitialState = Constructor;
  11. How is React’s strict mode used and what is it used for?
  12. What are the ways to iterate in React?
  13. How do I retain data when a page reloads in React?
  14. What do you do with all three libraries: react. Js, React-dom.js, and babel.js?
  15. Does React have to use JSX?
  16. Why do components using JSX not see react but need to introduce React?
  17. How to use async/await in React?
  18. What is the difference between React.Children. Map and JS map?
  19. Understanding of React SSR
  20. Why does React use JSX?
  21. What are the advantages of HOC over mixins?
  22. What design patterns are used for the higher-order components in React?

(2) Mind mapping

The following figure roughly distinguishes the frequency of React interview questions, which can be selectively studied:

(3)

Since there are interview questions, the answer to the interview questions is also indispensable, reference article:

  • “2021” High-Frequency front end test questions summary part (1)
  • “2021” high-frequency front end test questions summary part (PART ii)

6. Working Principles of the browser

(1) Interview questions

First, browser security

  1. What is an XSS attack?
  2. How to defend against XSS attacks?
  3. What is a CSRF attack?
  4. How do I defend against CSRF attacks?
  5. What is a man-in-the-middle attack? How to prevent man-in-the-middle attacks?
  6. What are the potential front-end security issues?
  7. What kinds of network hijacking, how to prevent?

Processes and threads

  1. The concept of processes and threads
  2. The difference between processes and threads
  3. Which threads are in the browser rendering process
  4. Previous communication between processes
  5. What are zombie processes and orphan processes?
  6. What causes the deadlock? How to solve the deadlock problem?
  7. How to achieve communication between multiple tabs in the browser?
  8. Understanding of Service workers

3. Browser cache

  1. Understanding of browser caching mechanisms
  2. Where are browser resources cached?
  3. The difference between a negotiated cache and a strong cache
  4. Why is browser caching needed?
  5. What’s the difference between hitting the refresh button or F5, Ctrl+F5 (force refresh), and enter in the address bar?

Four, browser composition

  1. Understanding of browsers
  2. Understanding of the browser kernel
  3. Common browser kernel comparisons
  4. Common browser kernel
  5. The main component of the browser
  6. Principles of browser rendering
  7. Browser rendering process
  8. Browser rendering optimization
  9. How to deal with JS files encountered during rendering?
  10. What is pre-parsing of documents?
  11. How does CSS block document parsing?
  12. How to optimize critical render paths?
  13. What conditions block rendering?

6. Browser local storage

  1. Local storage mode and application scenario of the browser
  2. What are the fields in a Cookie and what are their functions
  3. Cookie, LocalStorage, and SessionStorage are different
  4. What are the front-end storage methods?
  5. What are the features of IndexedDB?

7. Browser same-origin policy

  1. What is the same origin policy
  2. How to solve the crossing problem
  3. The difference between forward proxy and reverse proxy
  4. Nginx concept and how it works

Browser event mechanism

  1. What is the event? Event model?
  2. How do I stop events from bubbling
  3. Understanding of event delegate
  4. Usage scenarios for event delegates
  5. The difference between synchronous and asynchronous
  6. Understanding of event loops
  7. What are macrotasks and microtasks
  8. What is an execution stack
  9. What’s the difference between an Event Loop in Node and one in the browser? Process. nextTick Execution sequence?
  10. What is the process of event triggering

9. Browser garbage collection mechanism

  1. What does V8 garbage collection look like
  2. What operations cause memory leaks?

(2) Mind mapping

The following figure roughly distinguishes the frequency of the browser principle interview questions, which can be selectively studied:

(3)

Since there are interview questions, the answer to the interview questions is also essential, refer to the article: “2021” high-frequency front end test summary browser principles article.

7. Computer networks

(1) Interview questions

1. HTTP protocol

  1. The difference between GET and POST requests
  2. The difference between POST and PUT requests
  3. Common HTTP request headers and response headers
  4. HTTP status code 304 is more or less good
  5. Common HTTP request methods
  6. OPTIONS Request method and application scenario
  7. What are the differences between HTTP 1.0 and HTTP 1.1?
  8. The differences between HTTP 1.1 and HTTP 2.0
  9. The difference between HTTP and HTTPS
  10. The reason for the URL length limit of the GET method
  11. What happens when you type Google.com into your browser and press Enter?
  12. Understanding of keep-alive
  13. How does HTTP behave when there are multiple images on the page?
  14. What is HTTP2’s header compression algorithm?
  15. What is the HTTP request packet?
  16. What is the HTTP response packet?
  17. Advantages and disadvantages of THE HTTP protocol
  18. Let’s talk about HTTP 3.0
  19. What is the performance of HTTP
  20. What are the components of a URL
  21. Which HTTP request headers are associated with caching

2. HTTPS protocol

  1. What is the HTTPS protocol?
  2. This section describes how TLS/SSL works
  3. What is a digital certificate?
  4. HTTPS communication (handshake) process
  5. The characteristics of the HTTPS
  6. How secure is HTTPS?

3. HTTP status code

  1. Common status codes
  2. The same redirection, 307,303,302 difference?

Iv. DNS Protocol Introduction

  1. What is the DNS protocol
  2. Does DNS use BOTH TCP and UDP?
  3. DNS complete query process
  4. Iterative query versus recursive query
  5. DNS records and packets

5. Network model

  1. OSI seven-layer model
  2. TCP/IP Layer 5 protocol

TCP and UDP

  1. Concepts and features of TCP and UDP
  2. Differences between TCP and UDP
  3. TCP and UDP usage scenarios
  4. Why is UDP unreliable?
  5. TCP retransmission mechanism
  6. TCP congestion control mechanism
  7. TCP traffic control mechanism
  8. The reliable transport mechanism of TCP
  9. TCP has three handshakes and four waves
  10. How to deal with TCP sticky packets?
  11. Why does UDP not stick to packets?

Seven, WebSocket

  1. Understanding of WebSocket
  2. Im implementation: What’s the difference between short polling, Long polling, SSE and WebSocket?

(2) Mind mapping

The following figure roughly distinguishes the frequency of computer network interview questions, which can be selectively studied:

(3)

Since there are interview questions, the answer to the interview questions is also essential.

8. Optimize front-end performance

(1) Interview questions

A, the CDN

  1. The concept of CDN
  2. The role of CDN
  3. The principle of CDN
  4. Usage scenarios of CDN

2. Lazy loading

  1. Concept of lazy loading
  2. Lazy loading features
  3. Lazy loading principle
  4. The difference between lazy loading and preloading

Three, reflux and redraw

  1. Concepts of backflow and redraw and triggering conditions
  2. How to avoid reflux and redraw?
  3. How to optimize animation?
  4. What is a documentFragment? What’s the difference between using it and directly manipulating the DOM?

Four, throttle and shake

  1. Understanding of throttling and damping
  2. Realize throttling function and anti – shaking function

Five, picture optimization

  1. How to optimize the images in the project?
  2. Common picture formats and usage scenarios

Webpack optimization

  1. How can I make WebPack faster?
  2. How to reduce Webpack packaging size
  3. How to optimize front end performance with WebPack?
  4. How can I speed up webPack builds?

(2) Mind mapping

The following figure roughly distinguishes the inspection frequency of front-end performance optimization interview questions, which can be selectively learned:

(3)

Since there are interview questions, the answer to the interview questions is also essential, reference article: “2021” high-frequency front end test summary performance optimization article.

Write your code by hand

(1) Interview questions

First, JavaScript foundation

  1. Handwritten Object. The create
  2. The handwriting instanceof method
  3. Write the new operator by hand
  4. Write a Promise
  5. Written Promise. Then
  6. Written Promise. All
  7. Written Promise. Race
  8. Handwriting stabilization function
  9. Handwritten throttling function
  10. Handwriting type judgment function
  11. Handwritten Call function
  12. Handwritten Apply function
  13. Handwriting bind function
  14. The implementation of function Currying
  15. Implementing AJAX requests
  16. Use promises to encapsulate AJAX requests
  17. Implement shallow copy
  18. Implementing deep copy

2. Data processing

  1. Implement date formatting functions
  2. Swap the values of a and b, you can’t use temporary variables
  3. Implement out-of-order output array
  4. Implement array element summation
  5. To achieve array flattening
  6. Implement array deduplicating
  7. Implement the flat method for the array
  8. Implement the array push method
  9. Implement the filter method for arrays
  10. Implement the map method for arrays
  11. Implement the repeat method for strings
  12. Implementing string flip
  13. Separate the numbers by commas (,)
  14. Implement the addition of non-negative large integers
  15. Add (1) (2) (3)
  16. Implement class array to array
  17. Sum with Reduce
  18. Convert the JS object into a tree structure
  19. Use ES5 and ES6 to sum the parameters of the function
  20. Parse URL Params into objects

Iii. Scenario Application

  1. Recycle print red, yellow and green
  2. Print 1,2,3,4 every second
  3. The child counted off the number
  4. Use Promise for asynchronous image loading
  5. Implement the publish-subscribe pattern
  6. Look for the most frequent words in the passage
  7. Encapsulate an asynchronous fetch with an async await
  8. Implement prototype inheritance
  9. Achieve bidirectional data binding
  10. Implement simple routing
  11. Implement Fibonacci sequence
  12. The maximum length of a string that appears without repeating
  13. Use setTimeout to implement setInterval
  14. To realize the json
  15. Determines whether the object has a circular reference

(2) Mind mapping

The following figure roughly distinguishes the frequency of examining the interview questions written by the opponent, which can be selectively studied:

(3)

Since there are interview questions, the answer to the interview questions is also essential, refer to the article: “2021” high-frequency front end of the question summary handwritten code article.

10. Code output

The output of the code is often tested in the interview, a piece of code may involve a lot of knowledge points, which examines the basic ability of the applicant. In the front end of the interview, often test the code output problem mainly involves the following knowledge points: asynchronous programming, event loop, this point, scope, variable promotion, closure, prototype, inheritance, etc., here is not a list of related interview questions, has been in another article to write very clear, reference article: “2021” high frequency front end test questions of the code output results.

If you can understand all the questions in this article, it will be easy to solve the problems in the interview code output.

11. Front-end engineering

(1) Interview questions

A, Git

  1. The difference between Git and SVN
  2. What Git commands do you often use?
  3. The difference between git pull and git fetch
  4. Git rebase and Git merge

Second, the Webpack

  1. What are the differences between Webpack and grunt and gulp?
  2. Webpack, rollup, parcel?
  3. What are the common loaders?
  4. What are some common plugins?
  5. What are bundle, chunk, module?
  6. What is the difference between Loader and Plugin?
  7. Webpack’s build process?
  8. How to write loader or plugin?
  9. How do hot updates for WebPack work? Explain how it works?
  10. How to optimize front end performance with WebPack?
  11. How can I make WebPack faster?
  12. How can I speed up webPack builds?
  13. How to configure a single page application? How do I configure a multi-page application?

Third, other

  1. How does Babel work?

Note: about the front end engineering related interview questions, because the individual is still sorting out, is not very comprehensive, will be sent to nuggets as soon as possible, temporarily do not give the answer, you can search for learning.

12. Other

In addition to these categories, there are many more, such as data structures and algorithms, front-end business implementation, and so on. About the data structure and algorithm, the main direction of investigation is LeetCode topic, you can refer to the codeTop of a fat guy moving bricks to targeted brush questions. Here are just a few business implementation questions for your reference:

  1. How to optimize long lists
  2. How do I implement a Dialog component
  3. How server-side rendering works
  4. The entire process of packaging a project to a server
  5. What do you need to consider to do SEO from the perspective of the front end?
  6. How to implement front-end login
  7. How to scan for login

Finally, this article only gives the “eight-part essay” which is often observed in the front-end interview, and basically does not involve the questions related to the project experience. I can only answer according to my own actual situation. It’s not easy to organize. The total number of words in the interview questions in the link attached to this article has exceeded 30W words. Please click “like” if you find it useful.