前端面试题手册
React 中 setState 是如何工作的？
setState 是 React 类组件中的一个方法，用于更新组件的状态，并触发组件的重新渲染。每当状态改变时，React 会重新执行 render 方法来确定是否需要更新 DOM。当你调用 setState 方法时，你实际上是在对 React 发起一个“请求”来更新组件状态。然而，这个更新并不是立即执行的。React 会将 setState 调用放入一个队列中，稍后异步地批量处理这些更新。这种更新策略有助于优化性能，因为它避免了不必要的重复渲染和DOM操作。下面是一个 setState 的工作流程的简单描述：调用 setState: 当组件的状态需要更新时，你会调用 setState，传入一个新的状态对象或者一个函数。如果传入的是函数，该函数会接收前一个状态作为参数，并返回一个新状态。合并状态: React 会将你传入的状态对象合并到当前状态中。这个合并是浅合并，意味着只合并第一层的属性，更深层次的对象则会被整个替换。组件重新渲染: 一旦状态被更新，React 会将新的状态和当前的属性作为输入，计算出新的组件树。虚拟 DOM 比较: React 使用虚拟 DOM 来优化性能，它会比较旧的组件树和新的组件树，来确定实际DOM需要哪些更新。更新 DOM: 最后，React 会根据需要更新的部分来更新实际的 DOM，这使得渲染过程更加高效。让我们来看一个具体的例子：class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } handleClick = () => { this.setState(prevState => { return { count: prevState.count + 1 }; }); } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={this.handleClick}> Click me </button> </div> ); }}在这个例子中，每当按钮被点击时，handleClick 方法会被调用，它又调用了 setState 来更新 count 状态。对 setState 的调用会导致 MyComponent 重新渲染，渲染方法中的 {this.state.count} 会显示新的计数值。
阅读 19·2024年6月24日 16:43
Webpack 有哪些优化手段
Webpack优化手段概览Webpack是一个现代JavaScript应用程序的静态模块打包器，它可以帮助开发者管理和打包他们的前端资源。以下是Webpack的一些常见优化手段：1. Tree ShakingTree Shaking是一个通过删除未使用代码来减少打包体积的过程。Webpack内置支持ES6模块的Tree Shaking，可以识别出未被引用的代码并在打包时排除它们。例子:在开发过程中，可能会引入一个库，比如Lodash，但只使用其中的几个函数。通过配置sideEffects属性为false，Webpack可以标记并移除那些未被使用的模块，减小最终的bundle体积。2. 代码分割 (Code Splitting)代码分割允许将代码分解为可按需加载的多个包，从而减少单个包的大小，提高加载速度。例子:使用import()语法实现动态导入，将特定功能模块分割成独立的chunk，只有当用户需要时才加载这些模块。3. 使用Externals当你使用一些CDN外部扩展或从外部引入库时，可以配置Webpack的externals选项，让Webpack知道这些依赖不应该打包进bundle。例子:例如，如果你的项目使用jQuery，可以从CDN引入而不是打包到bundle中，配置externals让Webpack忽略它。4. 优化解析配置resolve选项可以加快模块解析速度。例如，通过配置extensions减少文件尝试的后缀列表，设置alias提供路径别名减少查找路径的时间。例子:resolve: { extensions: ['.js', '.jsx'], alias: { Components: path.resolve(__dirname, 'src/components/') }}5. 使用缓存Webpack的cache选项可以启用持久化缓存，提高重建速度。例子:在webpack.config.js中启用cache选项，使得模块在第一次构建后将转换结果缓存起来，之后的构建会加快。6. 压缩代码利用插件如TerserPlugin压缩JavaScript代码，减少文件大小。例子:在optimization配置中使用TerserPlugin来开启代码压缩。7. 优化CSS使用如MiniCssExtractPlugin和cssnano等工具将CSS提取为单独的文件并压缩。例子:plugins: [ new MiniCssExtractPlugin({ filename: '[name].[contenthash].css', })],optimization: { minimizer: [ new CssMinimizerPlugin(), ],},8. 使用持久化缓存通过设置output.filename使用内容哈希，当文件内容未变化时，利用浏览器缓存机制避免重新下载。例子:output: { filename: '[name].[contenthash].js', path: path.resolve(__dirname, 'dist')}9. 使用高效的加载器和插件例如babel-loader的cacheDirectory选项，或者HappyPack插件来并行处理任务。例子:module: { rules: [ { test: /\.js$/, use: 'babel-loader?cacheDirectory=true', exclude: /node_modules/ } ]}10. 监控和分析使用webpack-bundle-analyzer等工具分析bundle大小，找到优化点。例子:通过安装并配置`webpack-bundle-analyzer
阅读 30·2024年6月24日 16:43
浏览器渲染页面的详细过程
当浏览器渲染页面时，会经历以下几个主要步骤：1. 处理HTML - 构建DOM树浏览器首先解析HTML文档以构建DOM（文档对象模型）树。DOM树是页面结构的表示，其中每个HTML标签都是树中的一个节点。例子：如果有一个简单的HTML文档如下：<!DOCTYPE html><html><head> <title>示例页面</title></head><body> <h1>你好，世界！</h1> <p>这是一个段落。</p></body></html>浏览器会创建一个DOM树，包含html、head、title、body、h1和p等节点。2. 处理CSS - 构建CSSOM树浏览器会解析CSS，包括外部的CSS文件和页面内部的样式。解析完成后，浏览器会创建CSSOM（CSS对象模型）树。CSSOM树反映了所有CSS规则以及它们的层叠和继承关系。例子：对于上述HTML，可能有一个CSS文件如下：body { font-family: Arial, sans-serif; }h1 { color: blue; }对应的CSSOM树会包含body和h1的样式规则。3. 结合DOM和CSSOM - 构建渲染树接下来，浏览器会结合DOM树和CSSOM树来创建渲染树。渲染树只包含需要显示的节点和它们的样式信息。这意味着例如<script>和<style>标签等不会被包含在渲染树中。4. 布局 - 计算每个节点的位置一旦渲染树构建完成，浏览器将进行布局（也被称为回流），计算出渲染树中每个节点的确切位置和大小。这个过程会考虑视口大小、元素的大小、元素之间的关系等因素。5. 绘制 - 像素化页面内容布局完成后，浏览器会进入绘制（或绘图）阶段，它会遍历渲染树，并使用UI后端层将每个节点绘制到屏幕上。这个过程涉及将样式信息转化为实际的像素。6. 合成 - 层的合成和显示某些复杂的视觉效果如3D变换或阴影，可能会使得元素被分到不同的层。浏览器会管理这些层，最后将它们合成到一起，显示在屏幕上。在整个渲染过程中，如果DOM或CSSOM被脚本更新，会触发重新布局（回流）和重绘，这可能会影响渲染性能。为了获得最佳性能，开发者应该尽量减少这些操作的频率和范围。以上就是浏览器渲染页面的详细过程。这个过程需要高效地处理和合作，才能尽快地将内容呈现给用户。
阅读 27·2024年6月24日 16:43
前端模块规范有哪些？模块如何异步加载？
前端模块规范在JavaScript中，模块规范主要有以下几种：CommonJS：CommonJS是Node.js采用的模块规范，它通过 require函数来同步加载依赖的其他模块，通过 module.exports或 exports对象来导出模块。例子： // math.js function add(a, b) { return a + b; } module.exports = { add }; // main.js const math = require('./math'); console.log(math.add(1, 2));AMD (Asynchronous Module Definition)：AMD是RequireJS实现的规范。它支持在浏览器环境中异步加载模块，使用 define函数定义模块，使用 require函数加载模块。例子： // 定义模块math.js define(function() { return { add: function(a, b) { return a + b; } }; }); // 加载模块 require(['math'], function(math) { console.log(math.add(1, 2)); });ES Modules (ESM)：ECMAScript 2015（也称为ES6）引入了官方的JavaScript模块标准，这是现代前端开发中推荐使用的模块化解决方案。它支持静态导入和导出，也可以配合特定的语法进行动态导入。例子： // math.js export function add(a, b) { return a + b; } // main.js import { add } from './math.js'; console.log(add(1, 2));UMD (Universal Module Definition)：UMD旨在提供一个跨平台的模块定义方式，使得一个模块可以同时在AMD和CommonJS环境中运行。例子： (function(root, factory) { if (typeof define === 'function' && define.amd) { // AMD环境 define([], factory); } else if (typeof exports === 'object') { // CommonJS环境 module.exports = factory(); } else { // 浏览器全局变量 root.myModule = factory(); } }(this, function() { return { add: function(a, b) { return a + b; } }; }));模块的异步加载使用AMD规范（如RequireJS）:AMD规范设计之初就考虑了模块的异步加载。通过 require函数，我们可以异步加载所需的模块。使用ES Modules的动态 import():ES6模块支持使用 import()函数来实现模块的动态导入，这使得我们可以在代码执行时按需加载模块。例子： // 假设我们有一个math.js模块 // 动态导入ES模块 import('./math.js').then(math => { console.log(math.add(1, 2)); }).catch(error => { console.log('Error loading the module:', error); });Webpack等构建工具的代码分割（Code Splitting）功能:现代前端构建工具像Webpack提供了代码分割功能，可以将应用程序分割成多个chunks，并在需要时异步加载。例子：在Webpack中，可以通过动态 import()语法来创建所谓的"分割点"（split point）。 // Webpack代码分割示例 import(/* webpackChunkName: "math" */ './math').then(math => { console.log(math.add(1, 2)); });
阅读 20·2024年6月24日 16:43
addEventListener 和 attachEvent 的区别是什么？
addEventListener 和 attachEvent 都是用于在 Web 开发中将事件监听器绑定到 DOM 元素上的方法，但它们之间存在一些关键差异：浏览器兼容性：addEventListener 是 DOM Level 2 Events 规范的一部分，它被所有现代浏览器（包括 IE9 及以上版本）支持。attachEvent 是微软为 IE8 及以下版本的浏览器提出的一个方法，不是标准的 DOM 事件处理方法。语法：addEventListener 采用以下语法： javascript element.addEventListener(event, function, useCapture); 其中 event 是事件名称（不带 on 前缀），function 是事件处理函数，而 useCapture 是一个布尔值，用于指定事件是在捕获阶段处理还是在冒泡阶段处理。attachEvent 采用不同的语法： javascript element.attachEvent(eventWithOn, function); 其中 eventWithOn 是带有 on 前缀的事件名称，function 是事件处理函数。事件流：addEventListener 允许你指定事件处理函数是在捕获阶段还是冒泡阶段被调用。attachEvent 只支持事件冒泡，不支持事件捕获。this 关键字：在 addEventListener 中绑定的事件处理函数里，this 指向绑定事件的元素。在 attachEvent 中绑定的事件处理函数里，this 指向全局对象 window，而不是绑定事件的元素。多个事件监听器：使用 addEventListener，你可以为同一个事件添加多个事件监听器，它们会按顺序执行。而 attachEvent 有可能会导致多个事件监听器的执行顺序不一致，而且同一个事件处理函数如果添加多次，也会被执行多次。移除事件监听器：addEventListener 配对的是 removeEventListener，可以用于移除事件监听器。attachEvent 配对的是 detachEvent，用于移除事件监听器，但需要确保传递给 detachEvent 的参数与 attachEvent 时的参数完全一致。由于 attachEvent 方法是一个非标准方法且仅在老版本的 IE 浏览器中可用，所以通常推荐使用 addEventListener，因为它是跨浏览器兼容的并遵循现代的 Web 标准。当需要支持老版本 IE 浏览器时，开发者可能需要编写额外的代码来兼容 attachEvent。
阅读 22·2024年6月24日 16:43
React setState 执行过程是同步的还是异步的？
React 的 setState 方法通常被视为异步的，这是因为 React 可以批量延迟更新来优化性能。当你调用 setState 时，React 会将传递的对象或函数排入更新队列，而不是立即更新组件状态。之后，React 将在其生命周期方法中以批处理的方式来决定何时实际更新状态和重新渲染组件。这种行为通常在事件处理、生命周期方法或任何由 React 控制的异步代码中表现得最为明显。例如：handleClick = () => { this.setState({ count: this.state.count + 1 }); console.log(this.state.count); // 这里可能不会立即反映更新后的状态 // ...其他逻辑}在上述代码中，console.log 执行时可能会打印出更新前的状态值，因为 setState 的调用并没有立即更新 this.state。然而，当 setState 被用在某些异步的上下文中，比如 setTimeout 或者原生事件处理时，它的表现就可能是“同步”的，因为 React 的批处理机制没有在这些场景中介入：setTimeout(() => { this.setState({ count: this.state.count + 1 }); console.log(this.state.count); // 这里将会立即反映更新后的状态}, 0);这里因为 setTimeout 跳出了 React 的控制，所以更新不再是批处理的，setState 将会同步地更新状态并重新渲染组件。为了以一种可预测的方式处理 setState 可能的异步行为，最佳实践是使用它的回调函数：this.setState((prevState) => { return { count: prevState.count + 1 };}, () => { console.log(this.state.count); // 这里将会在状态更新后执行});使用回调函数作为 setState 的第二个参数，可以确保在状态更新和组件重渲染之后执行特定的逻辑。这也解释了为什么在很多场合我们需要考虑到 setState 的异步特性。
阅读 43·2024年6月24日 16:43
WebSocket和HTTP协议有什么区别？
WebSocket 和 HTTP 都是网络协议，它们在 Web 应用中承担着数据交换的角色，但是它们在设计上有着根本的差别，满足不同的应用场景。HTTP 协议HTTP（HyperText Transfer Protocol）是一种无状态的请求/响应协议，通常用于客户端和服务器之间的传统网页数据传输。它在 1991 年被发明，用来在互联网上传输超文本（HTML 文档），并随着时间进化到现在的 HTTP/1.1 和 HTTP/2 版本。特点：无状态: 每次请求之间相互独立，服务器不保存之前的请求信息。请求/响应模式: 客户端发送请求，服务器响应该请求，完成一次交互。短连接: 传统的 HTTP/1.1 协议在每次请求完成后都会关闭连接（虽然现在有持久连接的选项Connection: keep-alive）。不双向: 客户端发起请求，服务器响应，服务器不能主动向客户端发送消息。例子：一个典型的 HTTP 交互场景是，用户在浏览器中点击一个链接，浏览器发送一个 HTTP GET 请求到服务器，服务器处理请求并返回一个 HTML 页面，浏览器接收并显示给用户。WebSocket 协议WebSocket 是一个相对较新的协议，它在 2011 年成为国际标准。WebSocket 协议旨在通过单个长期连接提供全双工通信渠道，以支持实时和双向交互。特点：全双工: 客户端和服务器都可以随时向对方发送消息，无需等待响应。长连接: 一旦客户端和服务器之间的 WebSocket 连接打开，它将保持打开状态，直到任何一方显式关闭。低延迟: 数据包头部信息少，减少了发送消息的开销，适合需要快速通信的场景。例子：在一个实时聊天应用中，服务器可以在接收到一条新消息时立即将其推送给所有连接的客户端，而客户端也可以随时发送消息给服务器。所有这些通信都是在同一个 WebSocket 连接上完成的，并且可以非常迅速地进行。总结总得来说，WebSocket 通常用于需要服务器和客户端进行实时、双向和交互式通信的应用（如在线游戏、实时聊天室和协作工具），而 HTTP 更适合于传统的请求/响应模式的应用，比如网页浏览等。WebSocket 与 HTTP 的主要区别在于其持久的连接和低延迟的通信能力。虽然它们可以在相同的端口上运行（WebSocket 常常在 HTTP 的基础上握手建立连接，然后升级到 WebSocket 协议），但它们的设计目标和优化点大相径庭。
阅读 61·2024年6月24日 16:43
Bootstrap 网格系统的工作原理是什么
Bootstrap 网格系统基于一个响应式的12列布局，它允许开发者快速地创建复杂的布局。这个系统使用一系列容器（containers）、行（rows）和列（columns）来布局和对齐内容。以下是它的工作原理的具体步骤：1. 容器（Containers）Bootstrap 网格系统首先需要一个容器（.container 或者 .container-fluid）来包裹网站内容。.container 类提供一个固定宽度且居中的容器，宽度取决于浏览器窗口的大小。.container-fluid 类提供一个全宽的容器，占据100%的视口（viewport）宽度。2. 行（Rows）在容器内，你需要使用行（.row）来创建一组横向的列。行作为列的直接父元素，用于创建列之间的水平组。行通过负边距来抵消列的内边距（padding），这样就可以保证内容贴近容器的边缘。3. 列（Columns）行内部，你可以添加多个列（.col-大小）来创建你的布局。列通过内边距（padding）来创建列内容之间的间隔。列的大小可以通过添加不同的类来指定，例如 .col-1 到 .col-12，表示占据1/12到全部（12/12）的容器宽度。Bootstrap 也支持响应式布局，可以通过添加如 .col-md-大小 的类来指定在不同尺寸的屏幕下列的表现。例如.col-md-6会在中等尺寸的屏幕（如平板电脑）上占据半个容器的宽度。4. 响应式断点（Responsive Breakpoints）Bootstrap 网格系统使用一系列的响应式断点，来适配不同尺寸的屏幕，这些断点包括以下几种：Extra small (xs) - <576pxSmall (sm) - ≥576pxMedium (md) - ≥768pxLarge (lg) - ≥992pxExtra large (xl) - ≥1200pxXXL (xxl) - ≥1400px开发者可以根据需要添加特定的类来定义元素在不同断点下的表现。例子：假设你想创建一个三列的布局，在中等尺寸屏幕以上都是三列并排显示，在手机屏幕上则堆叠显示，你可以这样做：<div class="container"> <div class="row"> <div class="col-md-4">Column 1</div> <div class="col-md-4">Column 2</div> <div class="col-md-4">Column 3</div> </div></div>在这个例子中，每个 .col-md-4 类的列占据4个网格单位，因此在中等尺寸的屏幕或更大尺寸上，三列将平分容器宽度。在小于768px宽的屏幕上，由于没有指定sm或xs类，列会自动堆叠，每列占据整行宽度。通过合理使用 Bootstrap 网格系统，你可以创建出既灵活又响应式的布局，以适应不同设备和屏幕尺寸。
阅读 25·2024年6月24日 16:43
React 中 JSX 是什么？
JSX是React框架中使用的一种语法扩展，它允许我们在JavaScript代码中编写看起来像HTML的结构。JSX提供了一种更为直观和声明式的方式来创建React元素树，并且让代码的结构清晰易懂。这种语法对于开发者来说非常直观，因为它使得编写UI组件时可以像编写HTML标签一样自然。以下是一个简单的JSX示例：const myElement = <h1>Hello, world!</h1>;这行代码定义了一个React元素，它将会被渲染为一个<h1>标签，包含文本"Hello, world!"。使用JSX的好处包括：可读性: JSX由于类似于HTML结构，使得组件的结构更加直观和易于理解。表现力: 它能够很好地表达UI组件的层次结构和属性。工具支持: 现代前端工具链（如Babel）支持JSX，并且可以将其编译为浏览器可以理解的JavaScript代码。值得注意的是，JSX并不是必须的；React也可以不使用JSX来创建元素。但是，大多数React开发者都倾向于使用JSX，因为它提供了一种更加方便快捷的开发方式。下面是一个不使用JSX的React元素创建示例，与上面的JSX示例作用相同：const myElement = React.createElement('h1', null, 'Hello, world!');可以看到，不使用JSX时，代码会更加冗长和不易读，这也是为什么JSX在React开发中变得如此流行。
阅读 22·2024年6月24日 16:43
说说em/px/rem/vh/vw区别
pxpx 是一个固定的像素单位，不依赖于父级元素的字体大小。例如，如果你设置一个元素的字体大小为14px，不论其父级元素的字体大小是多少，这个元素的字体大小都将是14px。emem 是一个相对单位，代表其父级元素的字体大小。例如，如果父级元素的字体大小是16px，那么1em = 16px，2em=32px，以此类推。remrem 也是一个相对单位，但与em不同的是，它是相对于根元素（html）的字体大小，而不是父元素。这意味着如果你的HTML元素的字体大小是20px，那么1rem将等于20px，不论这个元素在DOM树中的位置。vwvw 与vh类似，但它是相对于视窗宽度的单位。1vw等于视窗宽度的1%。总的来说，em和rem都是相对单位，可以提供更好的可伸缩性和响应能力。px则是固定单位，简单直接。vh和vw是依赖于视窗大小的相对单位，非常适合于创建响应式设计。vhvh 是一个相对于视窗高度的单位。1vh等于视窗高度的1%。例如，如果视窗高度是800px，那么1vh就等于8px。这种单位在创建全占满视窗的块级元素时非常方便，无论设备或浏览器窗口大小如何改变，元素总能占满整个视窗。
阅读 31·2024年6月24日 16:43