It’s graduation season (job-hopping season) and if you want to know how much you know about a new job, here’s an advanced checklist to see how many questions you can answer correctly.

This article has done a layer of combing for knowledge points, the specific understanding and answer may not be the same for everyone, I hope the audience master read this, check the gaps and fill the gaps, can gain something! Here I wish every job-hopping have an ideal job! 🥳

Part of the content is from the teacher’s advanced Notes on the Front End.

HTML

DOM manipulation and performance issues

  • Whether DOM manipulation causes performance problems
  • The page needs to render 10,000 DOM elements. How can I improve the page performance
  • How can you improve page performance when you need to manipulate 10,000 DOM elements

Events bubble up and delegate

  • Which is better, delegating events to the parent node or document

Design of the virtual DOM

  • Why use the virtual DOM
  • Why use JavaScript objects to describe DOM structures
  • Briefly describe the implementation principle of the virtual DOM

CSS

Page Layout Principles

  • What is a box model
  • What is document flow
  • Why can’t a floating element push out a parent element? How to solve

Common page layout tips

  • Several ways to center elements
  • Layout for Flex. Understanding and using Grid layouts

The layout process of the browser

  • What does the browser do during page layout
  • What problems can redraw and rearrange cause
  • What are the advantages and disadvantages of CSS animation compared to JavaScript animation

JavaScript

JavaScript archetypes and inheritance

  • How to Understand “Everything is an object” in JavaScript
  • How do I create an object
  • Difference between Proto and Prototype

Understanding single-threaded JavaScript

  • Single-threaded source
  • Understanding of WebWorkers and Service Workers

Asynchronous event mechanism

  • Why use asynchronous event mechanisms
  • What problems might asynchronous events cause in real life
  • About the accuracy of setTimeout and setInterval

Scope and closure

  • What scenarios require closures
  • Defects in closures

This and the execution context

  • Briefly describe the direction of this in different scenarios
  • The use of the apply/call/bind
  • The difference between an arrow function and a normal function

The understanding of the EventLoop

  • This section describes the EventLoop of the browser
  • The difference between macro and micro tasks
  • Execution order of setTimeout, Promise, async/await in different browsers

ES6/7

  • Write a Promise
  • Why use async, await
  • How to make ES6/ES7 code run across browsers (Babel and Polyfill)
  • The structure of Set and Map
  • How does JavaScript implement let and const scope

The browser

Type the URL in the browser address bar and press Enter. What happens?

  • The same origin policy of the browser
  • What does homology mean
  • Which behaviors are restricted by the same origin policy
  • What are the common cross-domain solutions

Browser cache dependent

  • What a Web cache usually includes
  • When do browsers use local caching
  • The difference between strong and negotiated caching
  • What happens when you force Ctrl+F5 to refresh
  • The difference between session, cookie, token and storage

Browser loading sequence

  • Why is JavaScript usually put in<body>The end of a
  • Why put CSS in<head> 里

How browsers render

  • HTML/CSS/JS parsing process
  • How is the render tree generated
  • What is the process of rearranging and redrawing
  • What rendering performance issues to look out for in your daily development

Browser events

  • What events the browser includes
  • How is user interaction handled in the browser
  • When will the callback function that listens for the event be executed

Node

Node.js modules and apis

  • What timing functions does Node.js have
  • The difference between Process.nextTick and setImmediate
  • How to understand asynchrony and synchronization in Node.js, and how to control asynchronous processes
  • A brief introduction to the core built-in libraries in Node.js (events, streams, files, networks)

Node.js is used as a server

  • What are the features of Node.js, and what are the advantages and disadvantages of single threading
  • How do I use Node.js to listen on port 80
  • How does Express execute from one middleware to the next
  • The difference between Express, KOA and Egg
  • Introduction to Rest apis

HTTP

What does a complete HTTP request look like?

  • Domain name resolution (addressing process involving DNS)

TCP Connection Establishment

  • TCP three-way handshake
  • Why does a TCP handshake need three communications and a wave of the hand need four
  • After a TCP connection is established, an HTTP request is sent
  • The server responds with an HTTP request

agreement

HTTP message structure

  • Request the Request
  • Corresponding to the Response
  • Common HTTP status codes
  • HTTP request methods
  • Why do browsers sometimes see two requests (involving simple and complex requests in CORS) when using put, delete, etc.

Application scenarios of HTTP requests

  • How does the browser control the cache: corresponding headers, status codes
  • Differences between WebSocket and HTTP
  • How to capture and transform requests
  • Optimization method of network request
  • What is the difference between a Socket and a WebSocket

HTTP update iteration

  • The difference between HTTPS and HTTP
  • What design changes have been made to http2 and HTTP3

Network request optimization scheme

  • Use of cache
  • Reduce resource size (sharding. Compression, lazy loading, preloading)
  • Reduce the time consuming of each link (DNS query, using CDN)
  • Using http2 etc.

Web security

The front security

  • What should be paid attention to in front-end security
  • What is the attack process of XSS/CSRF and how to defend against it
  • In addition to CSS and CSRF, learn about network security issues

Other Web Security

  • How does SQL injection and command line injection work
  • What is a DDoS attack
  • What traffic hijacking involves

Algorithms and data structures

Algorithm related

  • Various sorting algorithms. Stable sort, in place sort, which sort is used in JavaScript
  • Search algorithm (sequential, binary search)
  • Recursion, divide-and-conquer understanding and application
  • Dynamic programming

Common data structures

  • Linked lists and arrays
  • The stack and queue
  • Binary tree, equilibrium tree, red black tree, etc

General knowledge of computer

Computer resources

  • Understand computer resources, processes and threads
  • What methods interprocess communication (IPC) usually includes, and what methods interprocess synchronization mechanism includes
  • Learn about blocking and non-blocking, synchronous and asynchronous tasks, and so on
  • What is the relationship between Socket and network process communication? What is the process of Socket connection

Programming and design patterns

  • Common design patterns
  • List some design patterns that have been used in practice
  • How to understand object-oriented programming

The front frame

The front frame

  • How is bidirectional binding implemented in Vue?
  • Introduce dependency injection in Angular
  • React resource scheduling
  • React-hooks: useEffect and context, setTimeout
  • Talk about the common front-end framework understanding and differences
  • Why use Angular/Vue/React for this project
  • How do you re-decide what framework to use?
  • Have you seen what these frameworks do and how they are implemented

Other front-end tool libraries

  • How do Vuex/Redux/Mobx and other tools manage state
  • What is a single page app? How to optimize SEO?
  • Which tripartite libraries have actually been used?
  • What are the features, strengths and weaknesses of these libraries?

Applet correlation

  • What’s the difference between applets and H5? Why applet instead of H5?
  • Are you considering embedding H5 implementations in applets? Why is that?
  • Why do small programs perform better?
  • What frameworks are useful for applets development? Why is that?

Node.js scheme selection and design

Technology selection

  • Why use Node.js and for what scenarios?
  • As a server access layer, what are the advantages and disadvantages of Node.js compared to other multithreading and coroutine languages?
  • What are the differences between Restful and GraphQL?

Application scenarios

  • How to solve the problem of high concurrency (Spring Festival red envelopes, last-minute shopping, etc.)
  • What are the considerations of Node.js as a middleware service?

Performance optimization

General performance optimization

  • Did the page do anything to degrade it
  • Have you done any projects related to performance optimization? Process and effect?
  • What are common front-end page performance optimizations?
  • How to understand performance bottlenecks/when a project needs to be optimized

Specific performance optimization scheme

  • What can be improved about image loading performance
  • What are the ways to split code and reduce package size
  • How can I optimize the loading of the first screen
  • How to locate and optimize network requests that take a long time

Take a project as a starting point, from page launch and resource request to data parsing and rendering of the page, analyze which stages are time-consuming, and then optimize them accordingly

Targeted optimization program

Faster performance of the front screen

  • Load on demand, lazy load, preload
  • Second look at
  • SSR straight out
  • Client containerization
  • The client is offline

Network Request optimization

  • CDN optimization
  • Cache optimization
  • Using http2
  • Resource Compression (Gzip)
  • Request optimization (merge request, split domain name, reduce CDN query time), etc

Optimization from caching, resource optimization, rendering optimization, memory optimization, calculation/run speed optimization, etc

Front-end engineering

Front-end modularization

  • Why use scaffolding for development?
  • How to understand modularity? What are the differences between CommonJS/AMD/UMD/ES6 modules?
  • Why use Webpack, and what’s the difference between it and Gulp and Rollup?

Webpack

  • Webpack common configuration, loader, plugin?
  • What does Babel do, and how do I choose the right version?
  • How does Webpack pack multiple files into one, and how do dependency issues resolve?
  • What exactly does the WebPack compilation process look like?

Code compilation and construction

  • How can I avoid global CSS contamination during CSS file packaging
  • What is the process for native development versus code packaging
  • What is Tree Shaking like

Continuous Integration (CI) and Continuous Deployment (CD)

  • How to understand CI/CD and what problems can it solve?
  • Did the project use CI/CD? Why is that?

Automated process

  • Unit test/automated test no
  • Does the front-end code support automated publishing
  • How does the production environment support grayscale publishing and fast rollback

Code specification

  • How do I force a CodeReview
  • What about code custom differences
  • What are the code verification tools
  • How to configure Eslint and Prettier

The development process

  • How are code conflicts resolved
  • How to use Git Flow
  • How to improve development efficiency with frequent handoffs

The front-end monitoring

The data reported

  • How can I quickly locate an exception
  • What are the buried points
  • How can page data be properly reported without affecting core functions

Real-time monitoring

  • How to ensure page quality in daily development
  • Does version release have gray scale, what is the process
  • How do I detect problems in a timely manner and what data should I pay attention to during release
  • How do I observe the quality of online code