web开发面试题及答案

web开发面试题及答案Q：请解释JavaScript中事件循环（EventLoop）的运行机制，说明宏任务（MacroTask）和微任务（MicroTask）的区别，并举例说明常见的任务类型。A：事件循环是JavaScript处理异步代码的核心机制，负责协调执行栈、任务队列（宏任务队列和微任务队列）之间的交互。其运行流程大致为：执行栈中的同步代码执行完毕后，会依次检查微任务队列，清空所有微任务；随后检查宏任务队列，取出一个宏任务执行，执行过程中可能产生新的微任务或宏任务，重复此流程。宏任务和微任务的核心区别在于执行时机：微任务会在当前宏任务执行完毕、渲染之前立即执行，而宏任务需要等待当前所有微任务执行完成后才会被处理。常见的宏任务包括：script整体代码（首次执行时）、setTimeout/setInterval、I/O操作（如AJAX响应）、UI渲染事件；微任务包括：Promise.then()/catch()/finally()、MutationObserver（DOM变化监听）、process.nextTick（Node.js特有）。例如，以下代码的执行顺序为：1.输出同步代码中的"start"；2.执行setTimeout（宏任务），将回调加入宏任务队列；3.执行Promise.resolve().then()（微任务），将回调加入微任务队列；4.同步代码执行完毕，检查微任务队列，执行then回调，输出"microtask"；5.进入下一轮事件循环，执行宏任务队列中的setTimeout回调，输出"macrotask"。最终输出顺序：start→microtask→macrotask。Q：React中useEffect的依赖数组有什么作用？如果依赖数组为空或包含函数会发生什么？如何避免因依赖数组错误导致的闭包陷阱？A：useEffect的依赖数组用于控制副作用函数的执行时机。React通过比较依赖数组中变量的引用或值是否变化，决定是否重新执行副作用函数。若依赖数组为空（[]），副作用仅在组件挂载时执行一次（类似class组件的componentDidMount）；若依赖数组包含变量（如[count]），则当count变化时重新执行；若省略依赖数组（即不传递），副作用会在每次组件渲染后执行（类似componentDidUpdate）。若依赖数组包含函数（如自定义的handleClick），需注意函数是在组件作用域内定义的，每次渲染时函数引用会变化（除非使用useCallback包裹），可能导致副作用频繁重新执行。例如，未用useCallback的函数作为依赖时，每次渲染都会提供新的函数引用，触发useEffect重新执行。闭包陷阱通常发生在副作用函数中使用了旧状态的情况。例如，在setTimeout中访问state变量，若未将state加入依赖数组，setTimeout回调会捕获渲染时的旧state值。解决方法是：将依赖项正确加入依赖数组，或使用函数式更新（如setState(prev=>prev+1)）确保获取最新状态；若副作用需要访问最新状态但不想触发重执行，可使用useRef存储可变值，通过ref.current获取最新值。Q：如何实现一个支持无限滚动（InfiniteScroll）的列表组件？需要考虑哪些性能优化点？A：实现无限滚动的核心是检测用户是否滚动到列表底部，触发数据加载。步骤如下：1.监听滚动事件（或使用IntersectionObserverAPI），检测列表容器或“加载更多”占位元素是否进入视口；2.当检测到滚动到底部时，触发数据请求（需添加防抖，避免频繁请求）；3.加载新数据后，将数据合并到现有列表状态中，触发组件重新渲染；4.添加加载状态（如“加载中...”）和加载完成/无更多数据的提示。性能优化点：虚拟滚动（VirtualScrolling）：仅渲染视口内的可见项，超出视口的项用占位div填充，减少DOM节点数量（可使用react-virtualized或react-window库）；滚动事件防抖：使用lodash的debounce或自定义防抖函数，减少滚动事件处理频率；数据缓存：对已加载的数据进行缓存，避免重复请求；渐进式渲染：新数据加载后，通过key的稳定化（如使用唯一id）减少不必要的重渲染；IntersectionObserver替代滚动监听：避免直接监听scroll事件导致的性能问题，ObserverAPI由浏览器优化，更高效。Q：MySQL中索引的作用是什么？解释聚集索引（ClusteredIndex）和非聚集索引（SecondaryIndex）的区别，并说明何时选择覆盖索引（CoveringIndex）。A：索引通过建立数据的快速查找结构（如B+树），减少查询时的全表扫描，提升查询效率。但索引会增加写操作（插入、更新、删除）的开销，需权衡使用。聚集索引决定了表中数据的物理存储顺序，一张表只能有一个聚集索引（通常是主键）。聚集索引的叶子节点存储了该行的全部数据。非聚集索引（辅助索引）的叶子节点存储的是索引列的值和对应的聚集索引键（主键值），通过主键值回表查询完整数据。覆盖索引指查询所需的所有列都包含在索引中，无需回表。例如，若查询为SELECTname,ageFROMuserWHEREid=1，且存在索引(id,name,age)，则该索引即为覆盖索引，查询时直接从索引中获取数据，避免回表。选择覆盖索引的场景包括：高频查询的字段组合、减少回表带来的I/O消耗（尤其是大表）、优化COUNT()等聚合查询（通过覆盖索引快速统计）。Q：Node.js中如何处理未捕获的异常（UncaughtException）和未处理的Promise拒绝（UnhandledRejection）？两者的处理方式有何不同？A：未捕获的异常通常指同步代码中抛出但未被try/catch捕获的错误，会导致进程崩溃。可通过监听process对象的'uncaughtException'事件进行捕获：```javascriptprocess.on('uncaughtException',(err)=>{console.error('UncaughtException:',err);//执行必要的清理操作（如关闭数据库连接）后退出进程process.exit(1);});```注意：该事件监听应在代码最顶层注册，且不建议在事件处理中继续执行后续业务逻辑（因进程可能处于不稳定状态）。未处理的Promise拒绝指异步Promise中reject但未被catch处理的错误，可能导致内存泄漏或不可预测的行为。可通过监听'unhandledRejection'事件处理：```javascriptprocess.on('unhandledRejection',(reason,promise)=>{console.error('UnhandledRejectionat:',promise,'reason:',reason);//可选择记录日志，或针对特定promise进行处理});```与'uncaughtException'不同，'unhandledRejection'不会直接导致进程崩溃，但Node.js在v15+版本中若未处理会触发警告，多次未处理可能导致进程退出。两者的核心区别：同步异常会直接中断当前执行流程，必须通过监听事件避免进程崩溃；而Promise拒绝是异步的，可在事件中记录并处理，允许程序继续运行（但需及时修复未catch的Promise）。Q：HTTP缓存策略中，强缓存（Cache-Control）和协商缓存（Last-Modified/ETag）的工作流程是怎样的？如何结合使用两者提升缓存效率？A：强缓存通过Cache-Control头部控制，浏览器在请求资源时，若缓存未过期（根据max-age或s-maxage判断），直接使用本地缓存，无需向服务器发送请求。常见指令包括：max-age=3600（缓存1小时）、no-cache（需协商缓存验证）、no-store（禁用缓存）。协商缓存用于强缓存失效时（如缓存过期），浏览器发送请求到服务器，携带Last-Modified（资源最后修改时间）或ETag（资源哈希值）头部，服务器对比请求中的值：若一致（资源未修改），返回304NotModified，浏览器使用本地缓存；若不一致，返回200OK及新资源。结合使用时，建议设置合理的max-age（如1天）作为强缓存，同时添加ETag或Last-Modified头部。这样大部分情况下浏览器直接使用强缓存，减少请求；缓存过期后通过协商缓存验证，避免重复下载未修改的资源。例如，静态资源（如图片、JS、CSS）可设置较长的max-age，并通过文件名哈希（如app.abc123.js）实现版本控制，修改时文件名变化，强制加载新资源；动态资源（如用户数据）可设置较短的max-age或no-cache，依赖协商缓存保证数据新鲜度。Q：Vue3中组合式API（Composables）与选项式API（OptionsAPI）的主要区别是什么？使用组合式API有哪些优势？A：选项式API通过data、methods、computed、watch等选项组织代码，逻辑按类型（状态、方法、计算属性）拆分；组合式API基于setup函数和自定义组合函数（如useFetchData），将相关逻辑（如数据获取、加载状态、错误处理）封装在一起，按功能拆分。组合式API的优势：1.逻辑复用更灵活：通过组合函数（Composables）提取可复用逻辑，避免选项式API中mixin的命名冲突和逻辑来源不清晰问题；2.类型推导更友好：基于TS的组合式API能更准确地推导类型，提升代码可维护性；3.代码结构更清晰：相关联的逻辑（如数据获取和对应的加载状态）集中在一个组合函数中，减少跨选项查找代码的成本；4.更好的Tree-shaking支持：组合式API中未使用的逻辑可被打包工具（如Vite/Webpack）移除，减少包体积；5.适应复杂组件：选项式API在处理复杂组件时，逻辑分散在多个选项中（如data中的state、methods中的函数、watch中的监听），组合式API通过逻辑分组降低复杂度。Q：如何设计一个高并发场景下的用户登录接口？需要考虑哪些安全和性能问题？A：高并发登录接口的设计需从以下维度考虑：安全层面：身份验证：使用HTTPS防止中间人攻击，密码传输前前端进行哈希（如SHA-256）+盐值处理（避免明文传输）；防暴力破解：限制登录失败次数（如5分钟内失败5次锁定账号），使用图形验证码或滑动验证（如GoogleReCAPTCHA）；会话管理：使用JWT（需设置合理的exp过期时间）或Redis存储会话令牌（如UUID），避免JWT被劫持后的长期有效风险；CSRF防护：若使用Cookie存储令牌，需设置HttpOnly、SameSite=Strict属性；敏感信息脱敏：返回给前端的响应中不包含密码、密钥等敏感数据。性能层面：接口限流：使用Nginx或Redis实现IP级别的请求限流（如每分钟100次），防止恶意请求耗尽资源；异步处理：登录成功后的日志记录、用户状态更新等非核心操作，通过消息队列（如RabbitMQ/Kafka）异步处理；缓存优化：用户信息（如角色、权限）在登录后缓存到Redis（设置合理过期时间），减少数据库查询压力；数据库优化：用户表的用户名/手机号字段添加唯一索引，加速查询；分库分表（若用户量超1亿），按用户ID哈希分库；负载均衡：使用Nginx或K8s进行流量分发，避免单台服务器过载。Q：解释CSS中BFC（块格式化上下文）的概念，列举触发BFC的常见条件，并说明BFC在布局中的实际应用场景。A：BFC（BlockFormattingContext）是Web页面中块级盒子的布局环境，内部的块级元素按垂直方向排列，与外部区域互不影响。BFC的边界不会与浮动元素的margin重叠，可视为一个独立的容器。触发BFC的常见条件：根元素（html）；float值不为none（left/right）；overflow值不为visible（hidden/auto/scroll）；display为inline-block、table-cell、table-caption、flex、grid；position为absolute或fixed。BFC的实际应用：1.清除浮动：父元素触发BFC后，会包含内部的浮动子元素，解决父元素高度塌陷问题（如父元素设置overflow:hidden）；2.防止边距重叠：两个相邻的块级元素的margin会发生重叠，将其中一个元素放入BFC容器中，可避免margin合并；3.实现两栏/三栏布局：左侧元素浮动，右侧元素触发BFC（如设置overflow:hidden），右侧内容不会被浮动元素覆盖，而是围绕其布局；4.隔离内容：BFC内部的布局不会影响外部元素，可用于封装独立组件（如弹窗、卡片）的样式。Q：在Node.js中，如何实现一个中间件（Middleware）来记录HTTP请求的耗时、URL、状态码等信息？需要考虑哪些异常情况？A：中间件本质是一个函数，接收req、res、next三个参数，通过监听res的finish事件或close事件来记录日志。实现步骤如下：1.在中间件中记录请求开始时间（如process.hrtime()）；2.监听res的'finish'事件（请求正常结束时触发）或'close'事件（客户端断开连接时触发）；3.计算耗时（结束时间开始时间），获取req.url、req.method、res.statusCode等信息；4.将日志写入文件或发送到日志服务（如ELK）。示例代码：```javascriptfunctionlogMiddleware(req,res,next){conststartTime=process.hrtime();const{method,url}=req;res.on('finish',()=>{const[seconds,nanoseconds]=process.hrtime(startTime);constduration=seconds1000+nanoseconds/1e6;//转换为毫秒console.log(`[${newDate().toISOString()}]${method}${url}${res.statusCode}${duration.toFixed(2)}ms`);});res.on('close',()=>{if(!res.finished){console.log(`[${newDate().toISOString()}]${method}${url}Clientdisconnected`);}});next();}```需考虑的异常情况：客户端在请求过程中断开连接（触发'close'事件但未触发'finish'），需记录断开状态；中间件顺序问题：确保日志中间件在路由处理之前注册，否则可能无法捕获到正确的statusCode；错误处理：若后续中间件或路由抛出错误（如未处理的Promise拒绝），需在错误处理中间件中捕获并设置正确的statusCode（如500）；大流量下的性能：频繁的日志写入可能成为瓶颈，可使用异步写入（如fs.createWriteStream）或批量写入（如每100条日志批量提交）。Q：简述TCP三次握手和四次挥手的过程，说明TIME_WAIT状态的作用及常见优化方法。A：三次握手是TCP连接建立的过程：1.客户端发送SYN包（seq=x），进入SYN_SENT状态；2.服务器收到后发送SYN+ACK包（seq=y,ack=x+1），进入SYN_RCVD状态；3.客户端发送ACK包（seq=x+1,ack=y+1），服务器进入ESTABLISHED状态，连接建立。四次挥手是TCP连接关闭的过程：1.客户端发送FIN包（seq=u），进入FIN_WAIT_1状态；2.服务器发送ACK包（seq=v,ack=u+1），进入CLOSE_WAIT状态；3.服务器处理完剩余数据后发送FIN+ACK包（seq=w,ack=u+1），进入LAST_ACK状态；4.客户端发送ACK包（seq=u+1,ack=w+1），进入TIME_WAIT状态，等待2MSL（最大报文段生存时间）后关闭连接。TIME_WAIT状态的作用：确保最后一个ACK包能到达服务器（若丢失，服务器会重发FIN包，客户端可再次发送ACK）；避免旧连接的报文段被新连接接收（等待2MSL可让网络中所有旧报文段过期）。TIME_WAIT过多可能导致端口耗尽（客户端）或资源占用（服务器），优化方法：服务器端调整内核参数：增大net.ipv4.tcp_max_tw_buckets（TIME_WAIT数量限制），启用net.ipv4.tcp_tw_reuse（允许重用TIME_WAIT连接）；客户端使用长连接（HTTPKeep-Alive），减少频繁的连接建立/关闭；避免短时间内大量创建/关闭连接（如压测时控制并发量）。Q：在React中，如何实现组件的性能优化？请列举至少5种常见方法并说明原理。A：React组件性能优化可从减少重新渲染、优化渲染逻辑、降低计算复杂度等方面入手：1.使用React.memo包裹函数组件：默认浅比较props的前后值，若props未变化则跳过渲染。适用于纯组件（相同props输出相同UI），需注意props包含对象/数组时，可能因引用变化导致失效（可配合useMemo/useCallback优化）。2.shouldComponentUpdate（类组件）或useMemo/useCallback（函数组件）：类组件中通过shouldComponentUpdate返回false阻止更新；函数组件中useMemo缓存计算结果，useCallback缓存函数引用，避免子组件因父组件函数重新提供而不必要渲染。3.虚拟列表（VirtualizedList）：仅渲染视口内的可见项，通过计算滚动位置动态更新渲染项，减少DOM节点数量（如使用react-window库）。4.代码分割（CodeSplitting）：通过React.lazy和import()动态加载组件，结合Suspense设置加载占位符，减少首屏加载时间（如将非首屏组件延迟加载）。5.避免在渲染过程中执行高计算量操作：将复杂计算移至useMemo中缓存，或通过useEffect在依赖变化时计算，避免每次渲染都重新计算（如列表排序、数据过滤）。6.使用useRef替代useState存储非响应式数据：若数据仅用于DOM操作或内部状态（如定时器ID），无需触发重新渲染，使用useRef存储可减少不必要的渲染。Q：MySQL中事务的ACID特性分别指什么？如何通过隔离级别解决脏读、不可重复读、幻读问题？A：ACID是事务的四个基本特性：原子性（Atomicity）：事务中的操作要么全部完成，要么全部回滚；一致性（Consistency）：事务执行前后数据库状态保持一致（如转账后总金额不变）；隔离性（Isolation）：多个事务并发执行时，彼此互不干扰；持久性（Durability）：事务提交后，修改永久保存到数据库。隔离级别通过控制事务间的可见性来解决并发问题，MySQL默认隔离级别为可重复读（REPEATABLEREAD）：读未提交（READUNCOMMITTED）：允许事务读取其他事务未提交的修改，会导致脏读（读取到未提交的临时数据）；读已提交（READCOMMITTED）：仅读取已提交的数据，解决脏读，但可能出现不可重复读（同一事务内两次查询结果不同）；可重复读（REPEATABLEREAD）：同一事务内多次查询结果一致，解决不可重复读，但可能出现幻读（查询范围时，其他事务插入新数据导致结果集变化）；串行化（SERIALIZABLE）：事务串行执行，解决所有并发问题，但性能最差。MySQL通过MVCC（多版本并发控制）在可重复读级别下避免幻读：查询时读取事务开始时的历史版本，其他事务的插入操作不影响当前事务的查询结果。对于需要严格避免幻读的场景（如库存扣减），可使用SELECT...FORUPDATE加行锁或表锁。Q：如何解决前端跨域问题？请列举至少4种方案并说明适用场景。A：跨域是浏览器同源策略（协议、域名、端口相同）限制的结果，常见解决方案：1.CORS（跨域资源共享）：服务器端设置响应头Access-Control-Allow-Origin（允许的源）、Access-Control-Allow-Methods（允许的方法）、Access-Control-Allow-Headers（允许的请求头）。适用于前后端分离项目（如React/Vue调用Node.js/Java后端），需后端配合设置。2.JSONP（JSONwithPadding）：利用script标签无同源限制的特性，前端定义回调函数，后端返回包裹在函数调用中的JSON数据。仅支持GET请求，适用于兼容旧浏览器或简单数据获取场景（如获取第三方公开API数据）。3.Nginx反向代理：前端请求发送到同域的Nginx服务器，Nginx配置代理规则将请求转发到目标后端服务器。适用于生产环境，避免前端直接处理跨域，同时可利用Nginx的负载均衡、缓存等功能。4.WebSocket：WebSocket协议（ws/wss）不受同源策略限制，通过建立长连接实现双向通信。适用于实时通信场景（如聊天、监控），需后端支持WebSocket协议（如使用Socket.io）。5.postMessage（窗口间通信）：适用于同浏览器不同窗口（如主页面与iframe）之间的通信，通过window.postMessage发送数据，目标窗口监听message事件接收。6.服务端中间件代理：前端开发时使用Webpack-dev-server或Vite的代理配置（如vite.config.js中的proxy选项），将本地请求代理到后端服务器，解决开发环境跨域。Q：在Node.js中，如何正确使用async/await处理多个异步操作？对比Promise.all()、Promise.race()、Promise.allSettled()的适用场景。A：async/await通过将异步代码写成同步风格，提升可读性。处理多个异步操作时，需根据需求选择并行或串行执行：串行执行：依次执行每个异步操作，前一个完成后再执行下一个（适用于依赖前一个结果的场景）：```javascriptasyncfunctionserial(){constres1=awaitfetch('/api1');constres2=awaitfetch('/api2');//依赖res1的结果return[res1,res2];}```并行执行：同时启动所有异步操作，等待全部完成（适用于无依赖关系的场景）：```javascriptasyncfunctionparallel(){const[res1,res2]=awaitPromise.all([fetch('/api1'),fetch('/api2')]);return[res1,res2];}```Promise.all()、Promise.race()、Promise.allSettled()的区别：Promise.all()：等待所有Promise完成，若其中一个reject，立即抛出错误（适合需要所有结果的场景，如批量请求数据）；Promise.race()：返回第一个完成（resolve或reject）的Promise（适合超时控制，如设置请求超时：Promise.race([fetch(url),timeout(5000)])）；Promise.allSettled()：等待所有Promise完成（无论成功或失败），返回包含每个结果状态（{status:'fulfilled',value}或{status:'rejected',reason}）的数组（适合需要统计所有操作结果的场景，如批量上传文件，需知道哪些成功、哪些失败）。Q：CSS中Flex布局的常用属性有哪些？如何实现一个水平垂直居中的容器？A：Flex布局通过设置父容器为display:flex或display:inline-flex，子元素成为Flex项。常用属性分为容器属性和项属性：容器属性：flex-direction：决定主轴方向（row/row-reverse/column/column-reverse）；flex-wrap：控制换行（nowrap/wrap/wrap-reverse）；justify-content：主轴对齐方式（flex-start/flex-end/center/space-between/space-around）；align-items：交叉轴对齐方式（flex-start/flex-end/center/stretch/baseline）；align-content：多根轴线对齐方式（仅当flex-wrap=wrap时有意义）。项属性：flex：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基准长度）的简写（如flex:1等价于flex:110）；order：调整项的排列顺序（数值越小越靠前）；align-self：覆盖容器的align-items，单独设置交叉轴对齐方式。实现水平垂直居中的容器（子元素居中）：```css.container{display:flex;justify-content:center;/水平居中（主轴为row时）/align-items:center;/垂直居中（交叉轴为column时）/width:100%;height:100vh;/假设容器占满视口高度/}.container.child{/子元素内容/}```若主轴为column（垂直方向），则justify-content控制垂直对齐，align-items控制水平对齐。Q：简述JWT（JSONWebToken）的结构和工作流程，说明其与Session认证的区别及适用场景。A：JWT由三部分组成，用点（.）分隔：头部（Header）：包含令牌类型（如JWT）和算法（如HS256），Base64Url编码；有效载荷（Payload）：包含声明（如用户ID、过期时间exp），Base64Url编码（非加密，勿存放敏感信息）；签名（Signature）：使用头部指定的算法，对前两部分数据和密钥进行签名，防止数据篡改。工作流程：1.用户登录成功，服务器提供JWT并返回给客户端；2.客户端后续请求在请求头（如Authorization:Bearer<token>）中携带JWT；3.服务器验证JWT签名有效性，解析有效载荷获取用户信息；4.若JWT过期（exp超时）或签名无效，返回401Unauthorized。与Session认证的区别：存储位置：Session数据存储在服务器（如Redis），JWT存储在客户端（如localStorage/cookie）；无状态：JWT无需查询服务器存储的Session，服务器通过签名验证即可，适合分布式系统；安全性：JWT一旦泄露，可被冒用（需设置短过期时间，配合RefreshToken刷新）；Session需防止Session劫持（如使用HTTPS、设置HttpOnlyCookie）；扩展性：JWT可包含用户角色、权限等信息，减少服务器查询数据库次数；Session需每次查询服务器获取用户信息。适用场景：JWT适合前后端分离、分布式系统（如微服务）、移动应用（无Cookie支持）；Session适合传统Web应用（依赖Cookie）、需要频繁更新用户状态的场景（如购物车实时更新）。Q：如何优化Web应用的首屏加载时间？请从前端和后端两个角度列举具体措施。A：首屏加载时间（FCP）是用户体验的关键指标，优化需前后端协同：前端优化措施：资源压缩与合并：JS/CSS使用Terser/PostCSS压缩，图片使用WebP/AVIF格式（比JPEG小25%-50%），雪碧图合并小图标；代码分割与懒加载：使用React.lazy/Vue异步组件拆分非首屏代码，路由级分割（如将管理端路由单独打包）；预加载与预渲染：通过<linkrel="preload">预加载关键资源，<linkrel="prerender">预渲染重要页面；减少关键渲染路径（CRP）：内联首屏所需的CSS（避免外部CSS阻塞渲染），使用媒体查询将非首屏CSS标记为print（不阻塞渲染）；使用CDN加速：将静态资源（JS、CSS、图片）部署到CDN，利用边缘节点降低访问延迟；缓存策略：设置Cache-Control头部，对静态资源添加长缓存（如一年），通过文件名哈希实现版本更新。后端优化措施：服务端渲染（SSR）或静态站点提供（SSG）：SSR在服务器端提供HTML，直接返回首屏内容，减少客户端JS执行时间（如Next.js/Nuxt.js）；SSG预提供静态HTML（如Gatsby），适合内容固定的页面；接口优化：合并首屏所需的多个接口（如通过GraphQL一次性获取所有数据），减少HTTP请求次数；开启Gzip/Brotli压缩：服务器对返回的HTML/JS/CSS启用压缩（如Nginx设置gzipon），减少传输体积；数据库查询优化：首屏数据查询添加索引，使用缓存（如Redis）存储高频数据，避免慢查询阻塞接口响应；负载均衡与CDN回源优化：通过负载均衡器（如Nginx）分散流