Frontend Questions### React #### 1.What is the virtual DOM i

汇总

react

1.What is the virtual DOM in React and how does it improve performance?
2.Explain the difference between state and props in React.
3.Explain the difference between functional components and class components.
4.What are keys in React and why are they important?
5.What are higher-order components (HOCs) in React?
6.What is the purpose of refs in React?
7.How do you handle routing in React applications?
8.Explain the component lifecycle methods in React.
9.What are hooks in React and how do they differ from class components?

js

1.Explain the concept of closures in JavaScript.
2.What is event delegation in JavaScript?
3.Explain the concept of prototypal inheritance in JavaScript.
4.What are promises in JavaScript and how do they differ from callbacks?
5.Explain the concept of the "this" keyword in JavaScript.
6.What is the difference between let, const, and var for variable declaration?
7.Can you describe the event propagation model in the DOM? What is the difference between event capturing and event bubbling?
8.What is the difference between .then() and async/await in handling promises?
9.How can you prevent memory leaks in a JavaScript application? Discuss some common sources of memory leaks and strategies to mitigate them.

ts

1.What is TypeScript and how does it differ from JavaScript?
2.Can you explain the difference between interface and type in TypeScript?
3.What are TypeScript Generics and why are they useful?
4.How does TypeScript support Object-Oriented Programming?
5.How do you handle type assertions in TypeScript?
6.What are Union and Intersection types and how do you use them?

Webpack

1.What is Webpack and why is it used in web development?
2.Can you describe the core concepts of Webpack, such as entry, output, loaders, and plugins?
3.How does Webpack handle different types of assets?
4.What are some ways to optimize the performance of a Webpack build?
5.How can you set up Webpack for a multi-environment build (e.g., development, production)?
6.Can you explain what Hot Module Replacement (HMR) is and how it works in Webpack?

CSS

1.What is the difference between classes and IDs in CSS?
2.Can you explain the concept of the CSS Box Model?
3.How do CSS preprocessors enhance CSS writing? Mention some examples.
4.What are Flexbox and CSS Grid? How do they differ and when would you use one over the other?
5.What is the purpose of media queries in CSS?
6.Can you explain what specificity is in CSS and how it affects the cascade?

React

1.What is the virtual DOM in React and how does it improve performance?

React uses JS objects to simulate DOM nodes, and then renders them into real DOM nodes. This JS object is the virtual DOM.
The "tag" written in JSX syntax is a form of JS object, which will be converted into a JS object later.
If the data changes, the entire component will not be rendered directly. Instead, the actual changed parts are obtained by comparing the JS objects, and only the changed parts are modified by calling the DOM API.

advantage:
Combined with the diff algorithm, unnecessary DOM modifications are reduced and performance is guaranteed.
Brings cross-platform capabilities to React, because virtual nodes can be rendered into other things in addition to real nodes.

2.Explain the difference between state and props in React.

State

state is the state data inside the component, which is managed by the component itself. It can be initialized and modified inside the component.
state is mutable and is usually updated through the component's setState method or useState hook. When the state changes, the component will re-render.
state is mainly used to process dynamic data of components, such as user input, timers, server responses, etc.

Props

props are data passed from parent component to child component.
props are immutable, child components cannot directly modify the props received from the parent component. If modification is required, it must be modified through the parent component.
Props are used to make components more reusable and customizable. They are often used to define the appearance and behavior of components, such as styles, specific behaviors, etc. Through props, components can be used in different ways by different parent components.

3.Explain the difference between functional components and class components.

class component

Use ES6 class syntax definition, which needs to be inherited from React.Component.
manage internal state through this.state and this.setState methods.
You can use a variety of life cycle methods, such as componentDidMount, componentDidUpdate, componentWillUnmount, etc.
Before the emergence of Hooks, only class components could use state management and life cycle methods, so they were often used in situations that required complex state logic or life cycle operations.

function component

Define it using a normal function or arrow function, receive props as parameters, and return the React element that needs to be rendered.
With the introduction of Hooks, function components can now use Hooks such as useState to manage internal state.
Life cycle behavior can be simulated through Hooks such as useEffect.
Due to the addition of Hooks, function components are now able to complete most of the functions of class components, so they have become the recommended way of defining components in modern React development, especially in new projects.

4.What are keys in React and why are they important?

key is an attribute supported by every React element and needs to be included when creating each element of the list. Its main role is to help React identify which items have been modified, added, or removed from the list.
You can reuse some DOM elements whose position has changed but the content has not changed.

The same key as the new virtual DOM was found in the old virtual DOM:
①. If the content in the virtual DOM has not changed, use the previous real DOM directly.
②. If the content in the virtual DOM changes, a new real DOM is generated, and then the previous real DOM in the page is replaced.

5.What are higher-order components (HOCs) in React?

A higher-order component is a function that accepts a component as a parameter and returns a new component.
Higher-order components are a technique in React for reusing component logic.
Components convert props into UI, while higher-order components convert a component into another component.
For example: React Router's withRouter, the parameters and return values are components, which are used to pass some routing APIs to the components.

6.What is the purpose of refs in React?

In React, the main purpose of ref is to provide a way to access a DOM node or React component instance.

When you need to interact directly with the DOM, such as setting the focus of an input field, reading or modifying the size and position of a specific element, or directly manipulating the DOM, refs provides an interface that can directly access DOM nodes.
it can avoid unnecessary rendering, when you need to store a mutable value in a component, and changes in this value should not trigger a re-rendering of the component, refs can be used as a tool to store this value. This is because changing the ref does not trigger an update of the component.
Many JavaScript libraries directly manipulate the DOM rather than through React's virtual DOM mechanism. Using refs you can pass DOM nodes to these libraries, enabling them to perform the necessary DOM operations.

7.How do you handle routing in React applications?

Install react-router-dom.
Set Router in the top-level component of the React application.
Using Route and Switch, the Route component is used to define the response of the UI. When the user accesses a specific URL, the corresponding component will be rendered. The Switch component is used to wrap multiple Route and only render the first Route that matches the current path.
Use the Link or NavLink components to create links that can navigate to other parts of the application without causing the page to reload.

import { Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route component={NotFoundPage} />
      </Switch>
    </Router>
  );
}

8.Explain the component lifecycle methods in React.

Mounting
These methods are called when a component instance is created and inserted into the DOM:
constructor() This is the constructor of the React component and is where the initial state and other initial values of the component are set.
render() is responsible for returning a React element.
componentDidMount() is called after the component is rendered to the DOM for the first time. Requesting data, etc. can be performed here.

Updating
These methods are called when the component's props or state change, causing a re-render:
render() re-renders the component, returning a new React element.
componentDidUpdate() is called immediately after an update and can be used to process the updated DOM or perform operations that depend on the DOM.

Unmounting
This method is called before the component is removed and destroyed:
componentWillUnmount() is called when the component is about to be destroyed. Can be used to perform necessary cleanup such as canceling network requests, clearing timers, etc.

9.What are hooks in React and how do they differ from class components?

React Hooks are a feature introduced in React 16.8 that allow you to use state and other React features without writing class components. Hooks provide a more functional way to write components, while also bringing better reuse logic and clearer code structure.
Enables functional components to use state and lifecycle methods.
Components written using Hooks are closer to pure functions, making the logic easier to reuse and test.
It is more in line with the idea of functional programming and can more easily split and combine logic.

JS

What are higher-order functions in JavaScript?

1.Explain the concept of closures in JavaScript.

function throttle(fn, delay) {
  let status = true
  return function() {
    if(status) {
      status = false
      fn.apply(this, arguments)   
      setTimeout(() => status = true, delay)
    }
  }
}

A closure is created whenever an inner function is defined within an outer function and has access to the outer function's variables.
it allows functions to retain access to variables from their outer scope even after the outer function has finished executing.

Closures are often used to create private variables and encapsulate functionality within functions.
It can be used for throttle and debounce.

2.What is event delegation in JavaScript?

instead of attaching event handlers directly to individual elements, we attach a single event handler to a parent element that contains all the target elements. This handler then listens for events bubbling up from the child elements. When an event occurs, the parent element's event handler is triggered, and we can use the event object to determine the target of the event.

The main benefit of event delegation is that it allows we to handle events efficiently, especially for dynamically created or frequently changing elements. Instead of attaching and removing event handlers for each individual element, we only need to attach one event handler to a parent element, reducing memory consumption and improving performance.

3.Explain the concept of prototypal inheritance in JavaScript.

For example, for let a = [], a.__proto__ points to Array.prototype. As an object, Array.prototype.__proto__ points to Object.prototype. This forms a prototype chain where the prototype of a is Array.prototype, and the prototype of Array.prototype is Object.prototype.

The prototype chain is the way inheritance is implemented in JavaScript; a has both the properties of Array.prototype and the properties of Object.prototype.

4.What are promises in JavaScript and how do they differ from callbacks?

In JavaScript, a Promise is an object that represents the eventual completion or failure of an asynchronous operation. It is a way to handle asynchronous operations, allowing you to write clearer and better-organized code, especially when dealing with multiple asynchronous tasks. A Promise provides a method to escape from what is often referred to as 'callback hell'.

Promise objects have three states:
Pending: Initial state, neither success nor failure state.
Fulfilled: means the operation was completed successfully.
Rejected: means the operation failed.

let promise = new Promise(function(resolve, reject) {
    // 异步操作代码
    if (/* 操作成功 */) {
        resolve(value);  // 传递给 then 的值
    } else {
        reject(error);  // 传递给 catch 的错误
    }
});

5.Explain the concept of the "this" keyword in JavaScript.

this is the first parameter of call.
The value of this relates to how the function is called. ( global context, function call, method call, constructor )
Arrow functions do not bind their own this. Arrow functions can be viewed as code blocks when analyzing the this pointer.

6.What is the difference between let, const, and var for variable declaration?

Scope：Variables declared with var have function scope. Variables declared with let and const have block scope.
Hoisting：Variables declared with var are hoisted to the top of their function scope or global scope. This means you can access the variable before it is declared, but its value will be undefined. variables declared with let and const are also hoisted, but they are not initialized.
Reassignment：Variables declared with var and let can be reassigned a new value after declaration.

7.Can you describe the event propagation model in the DOM? What is the difference between event capturing and event bubbling?

Event Capturing Phase: The process where the event travels from the top level (usually the window object) downwards to the target element. During this phase, the event passes through the ancestors of the target element, moving from the outermost to the inner elements, until it reaches the actual target (the element that triggered the event).

Event Bubbling Phase: The process where the event bubbles up from the target element back to the top level. In this phase, the event travels layer by layer outward, passing through the ancestors of the target element, until it reaches the outermost layer.

By default, most event handlers are executed during the bubbling phase, unless specifically indicated to trigger during the capturing phase. This can be controlled by using the third parameter of the addEventListener method when adding an event listener: passing true indicates triggering during the capturing phase, while passing false or omitting it indicates triggering during the bubbling phase.

8.What is the difference between .then() and async/await in handling promises?

.then() is a traditional method based on Promises. It allows you to specify callback functions to be executed when the Promise is either fulfilled or rejected. .then() can be chained, with each .then() capable of returning a new Promise, thus enabling continued chaining of calls.

async/await was introduced in ES2017, providing a more concise way to handle Promise-based asynchronous operations. The async keyword is used to declare a function as asynchronous, while the await keyword is used to wait for a Promise to resolve. Using async/await can make asynchronous code look very similar to synchronous code, which enhances the readability and simplicity of the code.

difference: async/await makes the code more intuitive and appear similar to synchronous code, which can help developers more easily understand the logic of the code.

9.How can you prevent memory leaks in a JavaScript application? Discuss some common sources of memory leaks and strategies to mitigate them.

Common Sources of Memory Leaks
Global Variables:
Accidentally creating global variables (by omitting var, let, or const) can cause these variables to remain in memory for the lifetime of the application.
Closures:
Closures can inadvertently hold references to an outer scope's variables longer than necessary, especially if the closures are still accessible (e.g., attached to events, stored in global structures).
Timers and Intervals:
Set intervals or timeouts that are never cleared can cause functions and their scopes to be retained indefinitely.

Strategies to Mitigate Memory Leaks
Avoid Global Variables:
Use let, const, or var to declare variables to avoid them becoming global.
Use strict mode ('use strict';) which helps in identifying undeclared variables that would otherwise become global.
Manage Closures Carefully:
Be mindful of what variables closures are capturing from the outer scope. Minimize the retention of large objects or complex data structures unless necessary.
Break unwanted closures by setting function references to null or redefining them once they are no longer needed.
Optimize DOM Manipulations:
Avoid unnecessary retention of DOM elements. When removing elements from the DOM, ensure that there are no remaining references to these elements in your JavaScript code.
Utilize document fragments or virtual DOM (if using frameworks like React) to minimize direct DOM manipulation.

Can you explain what a memory leak is in the context of JavaScript and how certain practices can contribute to them?
Discuss the difference between shallow copy and deep copy in JavaScript. How can you achieve each, and what are the implications of choosing one method over the other?
How does JavaScript's single-threaded nature impact the way we write asynchronous code?

TS

1.What is TypeScript and how does it differ from JavaScript?

TypeScript is a programming language developed by Microsoft that is a superset of JavaScript. TypeScript extends the capabilities of JavaScript to provide stronger tools and error checking capabilities by adding static types and object-oriented features such as classes and interfaces.

Type system: The biggest feature of TypeScript is its static type system. In TypeScript, you specify the types of variables, parameters, and function return values while writing code. This helps catch errors at compile time, whereas JavaScript is dynamically typed and type errors can only be caught at runtime.

Tool support: TypeScript's type system enables editors and IDEs (such as Visual Studio Code) to provide more powerful code auto-completion, navigation, and refactoring capabilities. These tools can use type information to help developers write more reliable code faster.

2.Can you explain the difference between interface and type in TypeScript?

In TypeScript, both the interface and type keywords can be used to define types.
Scalability:
Interfaces are primarily designed to define the shape of objects, which can extend each other through the extends keyword.
Type aliases can be used to define an alias for a type, which is not limited to object types, but can also be any other type (such as primitive types, union types, tuples, etc.).
Statement merge:
Interfaces support declaration merging. This means that you can declare the same interface multiple times in different parts of your program and TypeScript will treat them as a single interface.
Type aliases do not support declaration merging.
scenes to be used:
Interface is more suitable for defining the shape of an object or class, especially when you need to take advantage of the features of an extension or implementation.
Type is more flexible and suitable for defining union types, tuples, and other situations where explicit types are required.

juejin.cn/post/736583…

3.What are TypeScript Generics and why are they useful?

Generics in TypeScript is a tool that allows you to define functions, interfaces, and classes without specifying specific types in advance, but to specify the type when using them. Generics provide a way to ensure type consistency, allowing components to not only support current data types, but also future data types, increasing code flexibility and reusability.

Benefits of generics:
Improve code reuse: Generics allow you to write components that work with multiple data types.
Increased type safety: Generics can help you catch more type errors because you can explicitly specify the type of elements in the collection.
Provide better type information: Using generics allows your code to express its intent more clearly because you can see exactly what type of elements are stored in the collection.

4.How does TypeScript support Object-Oriented Programming?

Classes:
TypeScript fully supports ES6’s class syntax and adds some additional features such as access modifiers and abstract classes. You can define classes, constructors, properties, methods, and their access levels (such as public, private, and protected).
Interfaces:
Interfaces are a very powerful feature in TypeScript that allow you to define contracts that should be followed in your code. An interface can describe the shape of an object, including its properties and methods. In addition, a class can implement one or more interfaces to ensure that class instances follow a specific structure.
Inheritance:
TypeScript supports class inheritance, allowing you to extend a new subclass from a base class. This supports code reuse and allows the creation of more specific class definitions.
Access Modifiers:
TypeScript provides several access modifiers to control the visibility of members (properties and methods). These include public (default), private, and protected. This helps with encapsulation and controlling access to members within a class's inheritance chain.

5.How do you handle type assertions in TypeScript?

In TypeScript, type assertions are a way of telling the compiler "I know what I'm doing" by specifying the specific type of a value. Type assertions do not restructure or transform data, but guide TypeScript's type checker at compile time to understand the data type you determine. This is often used to handle situations where the type information is known to the developer, but the TypeScript compiler cannot infer on its own.
scenes to be used:
When interacting with the any type: When you migrate code from JavaScript or use third-party libraries, you may need to deal with variables of the any type. In this case, a type assertion can specify a more specific type.
Union type reduction: When a variable is of union type, but you determine its specific type in a block of code, you can use type assertions to specify this type.

6.What are Union and Intersection types and how do you use them?

Union Types
A union type means that a value can be one of several types. You can define a union type by using the pipe symbol |. This is useful when you want a function parameter, variable or property to accept values of different types.
Intersection Types
Intersection types allow you to combine multiple types into a single type, which means the new type will have the properties of all member types. You can define an intersection type by using the ampersand & symbol.

function logId(id: string | number) {
  console.log("ID:", id);
}

logId(101); // 可以是 number
logId("202"); // 也可以是 string

interface BusinessPartner {
  name: string;
  credit: number;
}

interface Contact {
  email: string;
  phone: string;
}

type BusinessContact = BusinessPartner & Contact;

function emailContact(bc: BusinessContact) {
  console.log(`Sending email to ${bc.name} at ${bc.email}`);
}

emailContact({
  name: "Company A",
  credit: 100,
  email: "contact@companya.com",
  phone: "1234567890"
});

Webpack

1.What is Webpack and why is it used in web development?

Webpack is a static module bundler for modern JavaScript applications.
Modularity: Webpack allows you to organize your JavaScript code in a modular way, which helps you maintain code clarity and maintainability.
Loaders: Webpack itself only understands JavaScript, but loaders can convert all types of files into valid modules that can be used by applications and added to the dependency graph. For example, by using different loaders, Webpack can package CSS, images, TypeScript, etc.
Plugins: Plugins can be used to perform a variety of tasks, such as packaging optimization, asset management, and injecting environment variables. This provides a high degree of flexibility and powerful configuration capabilities.
Code Splitting: Webpack allows code to be split into multiple bundles, which can be loaded on demand or in parallel, thereby improving application loading speed and performance.

2.Can you describe the core concepts of Webpack, such as entry, output, loaders, and plugins?

Entry:
The entry point tells webpack where to start building its internal dependency graph. Webpack will start from the specified entry point and find out all the dependent modules and files required to start from that entry point.
Output:
Output properties tell webpack where to output the bundles it creates, and how to name these files. By default, the output file is placed in ./dist/main.js.
For multi-entry configurations, you can use placeholders to ensure that each file has a unique name.
Loaders:
Loaders allow webpack to handle non-JavaScript files (webpack itself only understands JavaScript). Loader can transform these files so that they can be added to the dependency graph and ultimately the bundle.
Typically, loaders are used to process stylesheets (such as CSS, Less, Sass), images, and font files.
Plugins:
Plugins are used to perform a wider range of tasks such as packaging optimization, resource management, and environment variable injection. Plugins are executed at certain points in the webpack life cycle and provide full access to the API of the compilation process.

3.How does Webpack handle different types of assets?

Webpack mainly relies on loaders and plug-ins to handle different types of resources. Loaders and plugins allow webpack to understand and process multiple file types beyond just JavaScript, converting them into modules and ultimately integrating them into the generated bundles.

CSS, Sass and Less
CSS: Use style-loader and css-loader. css-loader allows webpack to parse @import and url() paths in CSS files, while style-loader can inject CSS into the DOM.
Sass/SCSS: Use sass-loader plus css-loader and style-loader.
Image and font files
Images: use file-loader or url-loader. file-loader can parse image files in your project and output them to the build directory. url-loader functions similarly, but can convert small files into base64 URIs and embed them directly into the code, thus reducing HTTP requests.
Font files: are also usually processed using file-loader or url-loader, the method is similar to processing images.

4.What are some ways to optimize the performance of a Webpack build? (改进)

Include only necessary modules
Exclude unnecessary modules: Ensure that libraries in node_modules are not incorrectly included if they are not needed. Use the externals configuration to exclude some third-party libraries that do not need to be packaged.
Tree Shaking: Using the static structure of ES2015 module syntax to detect unused code, Webpack can help remove these unreferenced code.
Use Loader options and plugin intelligence
Reduce the scope of files processed by the loader: Reduce unnecessary file processing by configuring include and exclude options for the loader.
Use cache-loader or other caching mechanisms: Adding cache-loader before some time-consuming loaders can cache the results of the loader and avoid recalculation every time it is built.
code splitting
Use dynamic imports: Webpack supports dynamic loading of code through the import() syntax, thereby enabling on-demand loading and reducing initial loading time.
Separate third-party libraries (vendor chunk): Separate third-party library code into independent bundles. Because these codes change less frequently, browser cache optimization can be used.

5.How can you set up Webpack for a multi-environment build (e.g., development, production)?

Use environment variables
Webpack can use the process.env.NODE_ENV environment variable to differentiate between development and production environments. This is often used in conjunction with environment variables in Node.js, such as process.env.NODE_ENV = 'production'.
Separate basic configuration
Create a shared base configuration file and then create specific configuration files for development and production environments. These configurations can be merged using the webpack-merge tool.
NPM script
Set up different NPM scripts in package.json to run builds for different environments.

6.Can you explain what Hot Module Replacement (HMR) is and how it works in Webpack?

Hot Module Replacement (HMR) is a feature provided by Webpack that allows modules to be updated, added, or removed while the application is running (without completely refreshing the page). This capability is particularly useful in a development environment because it can significantly improve the efficiency of front-end development, allowing immediate feedback to modify the results without interrupting the current state of the application.

How HMR works
Update file:
When you modify one or more files, Webpack recompiles and generates the updated module.
Notify browser:
After the update is completed, Webpack's development server will send an update message to the browser via WebSocket.
Replace module:
After the browser receives the message, the HMR runtime fetches the updated module from the server via an HTTP request. The old module is then replaced by the new module without reloading the entire page.

CSS

1.What is the difference between classes and IDs in CSS?

Class selectors are used to select one or more elements with the same class name.
ID selectors are used to select a single element with a specific ID.

A class name can be assigned to multiple elements.
An ID must be unique on the page.

Class selectors are less specific than ID selectors.

2.Can you explain the concept of the CSS Box Model?

The CSS box model mainly consists of the following four parts: Content, Padding, Border, and Margin.
We can set the box-sizing property,
content-box: The width and height include only the content.
border-box: Width and height include content, padding and border.

3.How do CSS preprocessors enhance CSS writing? Mention some examples.

variable:
Use variables to store colors, font sizes, or other reusable values. This way, when the values need to be changed, they only need to be updated in one place rather than having to be changed manually in multiple places.
Nested rules:
Allows CSS selectors to be nested inside another selector, making the structure clearer and easier to understand.
inherit:
Allow one selector to inherit all styles of another selector to avoid duplication of code.
Mixins:
Create reusable blocks of code that can be called from multiple places. They can accept parameters, making custom styling easy.

4.What are Flexbox and CSS Grid? How do they differ and when would you use one over the other?

Flexbox is a one-dimensional layout method that focuses on laying out content in one dimension (rows or columns).

Easily distribute elements evenly within the container.
Controlling the alignment, order, and size of elements is extremely flexible.
It is very suitable for small-scale layouts or component-level layouts (such as navigation bars, widgets).

CSS Grid is a two-dimensional layout system that allows you to work with both rows and columns, making it ideal for complex page layouts.

Complex layout structures can be created, such as the overall layout of a web page.
Provides precise position control and size adjustment, suitable for large-scale layout design.

5.What is the purpose of media queries in CSS?

Media queries in CSS are a powerful tool for creating responsive web designs. They enable developers to apply different style rules based on different media characteristics (such as screen size, resolution). This way, the website will provide the appropriate layout and presentation no matter what device the user uses to access the website.

6.Can you explain what specificity is in CSS and how it affects the cascade?

In CSS, specificity is a system that determines which style rules apply to an element. When multiple style rules can apply to the same HTML element, the browser needs a way to decide which rule to use. This is what specificity does.

How is specificity calculated?
Specificity is calculated by considering the number of selectors of different types within a selector. Specifically, specificity can be thought of as a four-part score (usually expressed as four numbers):
Inline styles: This section is scored 1 if the style is inline, 0 otherwise.
Number of ID selectors: The total number of ID selectors contained in the selector.
Number of class selectors, attribute selectors, and pseudo-class selectors: This includes selectors like .class, [type="text"], and :hover.
Number of type selectors and pseudo-element selectors: This includes selectors like div, p, and ::before.

Compare specificity
When comparing the specificity of two selectors, you compare the values of each part from left to right.

("Cascading" describes the process of styling decisions. Cascading rules determine which attributes and values will ultimately be applied when multiple rules can be applied to an element.)