顶尖前端面试常见问题及答案

顶尖前端面试常见问题及答案考试时间：______分钟总分：______分姓名：______一、单项选择题1.关于JavaScript闭包的描述，以下哪项是正确的？A.函数内部嵌套另一个函数B.内部函数引用了外部函数的变量C.外部函数无法访问内部函数D.内部函数的变量作用域限制在外部函数内2.在JavaScript的EventLoop机制中，以下关于微任务和宏任务的描述，哪项是正确的？A.宏任务的执行优先级高于微任务B.微任务队列在每次执行栈清空后都会立即执行C.宏任务队列中包含setTimeout和setIntervalD.微任务队列中包含Promise.then和process.nextTick3.在Vue3中，用于实现响应式系统的API是：A.Object.definePropertyB.definePropertyC.ProxyD.Reflect4.关于ReactFiber架构，以下描述哪项是正确的？A.Fiber将渲染任务拆分为小任务块B.Fiber完全消除了同步阻塞C.Fiber仅用于优化列表渲染性能D.Fiber是React16之前使用的架构5.浏览器从输入URL到页面展示的完整过程中，以下哪项不属于DNS解析阶段？A.域名解析为IP地址B.查询本地缓存C.TCP三次握手D.查询根域名服务器6.在Webpack构建流程中，Loader和Plugin的主要区别是：A.Loader负责转换特定类型的文件，Plugin负责执行范围更广的任务B.Loader运行在Node.js环境中，Plugin运行在构建流程中C.Loader处理JS文件，Plugin处理CSS文件D.Loader主要是同步执行，Plugin主要是异步执行7.关于虚拟DOM，以下描述哪项是错误的？A.虚拟DOM是真实DOM节点的轻量级JavaScript对象表示B.它可以减少不必要的DOM操作C.它解决了跨浏览器兼容性问题D.它总是比直接操作DOM更快8.在前端安全中，以下哪项属于跨站请求伪造（CSRF）的防御措施？A.设置HttpOnlyCookieB.输入过滤C.输出转义D.CSP策略9.以下哪项不是HTTP3.0引入QUIC协议的主要优势？A.基于UDP协议，减少了握手延迟B.多路复用，解决了队头阻塞问题C.加密层集成，减少了握手时的延迟D.传输层使用TCP协议，保证传输可靠性10.实现前端性能优化时，以下哪项策略不能直接减少首屏加载时间？A.资源压缩B.懒加载C.预加载D.阻塞渲染二、多项选择题11.以下哪些属于常见的XSS（跨站脚本攻击）类型？A.存储型XSSB.反射型XSSC.CSRFD.DOM型XSS12.关于HTTP/2协议，以下描述哪些是正确的？A.HTTP/2支持多路复用B.HTTP/2支持头部压缩C.HTTP/2使用明文传输D.HTTP/2将HTTP消息分解为消息帧13.在微前端架构中，通常具备以下哪些特征？A.技术栈无关B.独立部署C.主应用和子应用必须使用同一套框架D.沙箱隔离机制14.以下哪些属于首屏加载性能优化的手段？A.代码分割B.TreeShakingC.Gzip压缩D.使用CDN加速15.在JavaScript中，以下哪些方法可以创建对象？A.字面量方式B.构造函数C.Object.createD.JSON.parse三、简答题（请写出核心代码或关键步骤）16.请手写一个简单的防抖函数。17.请简述浏览器渲染过程（从URL输入到页面展示）。18.请简述Vue2和Vue3响应式原理的区别。19.请解释ReactFiber是如何解决长任务阻塞问题的。20.请列举至少三种前端性能优化的策略并简要说明。四、综合分析题21.假设你在开发一个大型电商网站，发现首屏加载速度很慢，请分析可能的原因，并给出具体的优化方案（至少包含网络层、资源层和代码层三个维度的解决方案）。22.在React应用中，你如何避免不必要的重渲染？请结合ReactFiber的调度机制或`React.memo`进行说明。试卷答案一、单项选择题1.B*解析：闭包是指有权访问另一个函数作用域中的变量的函数。选项A只是定义了嵌套函数，选项C和D描述的是闭包的副作用或误解，只有选项B正确描述了闭包的核心机制：内部函数引用了外部函数的变量。2.B、C*解析：微任务队列在每次执行栈清空后立即执行，优先级高于宏任务。`setTimeout`和`setInterval`属于宏任务。`process.nextTick`是Node.js环境特有的，虽然通常与微任务队列处理相关，但在标准浏览器JS事件循环中，微任务主要包含Promise.then、MutationObserver等，宏任务包含setTimeout/setInterval等。3.C*解析：Vue3使用ES6的`Proxy`API来实现响应式系统，相比Vue2的`Object.defineProperty`，它可以更高效地监听数组变化和对象的新增/删除属性。4.A*解析：ReactFiber是React16引入的新协调引擎，它将渲染任务拆分为小任务块，允许浏览器在主线程繁忙时暂停、恢复和放弃任务，从而解决了长任务阻塞UI渲染的问题。5.C*解析：DNS解析负责将域名转换为IP地址。TCP三次握手是建立TCP连接的过程，发生在HTTP请求之前，不属于DNS解析阶段。6.A*解析：Loader用于转换特定类型的文件（如将TS转为JS，将SCSS转为CSS），Plugin则是在构建流程的特定节点插入自定义逻辑（如HtmlWebpackPlugin）。7.D*解析：虚拟DOM本身是一个JS对象，创建和Diff算法都有一定的计算开销，并不总是比直接操作DOM更快。虚拟DOM的优势在于减少了不必要的DOM操作，提高了开发效率，但在某些极端情况下，原生JS操作DOM可能更快。8.A*解析：CSRF（跨站请求伪造）攻击利用了用户已登录的身份。设置`HttpOnly`Cookie可以防止JavaScript访问Cookie，从而防止攻击者通过XSS获取SessionID发起CSRF请求。9.D*解析：HTTP/3协议基于UDP协议实现（QUIC协议），而不是TCP。它利用UDP的多路复用特性解决了队头阻塞问题，并集成了TLS1.3加密。10.D*解析：阻塞渲染是指JS执行时间过长导致页面无法进行布局和绘制。虽然这会影响用户体验，但在“减少首屏加载时间”的优化策略中，阻塞渲染通常是被避免的问题，而不是一种优化手段。A、B、C都是直接减少资源加载时间和体积的策略。二、多项选择题11.A、B、D*解析：XSS（跨站脚本攻击）分为存储型、反射型和DOM型。CSRF（跨站请求伪造）是一种不同的攻击方式，不属于XSS。12.A、B、D*解析：HTTP/2支持ServerPush、头部压缩、多路复用和二进制分帧。HTTP/2是加密的（基于TLS），所以C错误。13.A、B、D*解析：微前端架构的核心特征包括技术栈无关、独立部署和沙箱隔离（如JS沙箱、样式隔离）。C是错误的，微前端通常允许主应用和子应用使用不同的框架。14.A、B、C、D*解析：这四项都是经典的前端性能优化手段。A（代码分割减少体积）、B（TreeShaking减少冗余代码）、C（Gzip压缩文本体积）、D（CDN加速资源下载）都能有效减少首屏加载时间。15.A、B、C、D*解析：创建对象的方法包括字面量（A）、构造函数（B）、Object.create（C）和JSON.parse（将JSON字符串转为对象，D）。三、简答题（请写出核心代码或关键步骤）16.答案：```javascriptfunctiondebounce(fn,delay){lettimer=null;returnfunction(){constcontext=this;constargs=arguments;if(timer)clearTimeout(timer);timer=setTimeout(()=>{fn.apply(context,args);},delay);};}```*解析思路：核心在于利用`setTimeout`和闭包保存计时器变量。当事件被触发时，先清除之前的定时器，确保只执行最后一次触发后的函数。17.答案：1.DNS解析：将域名解析为IP地址。2.TCP连接：浏览器与服务器建立TCP连接（三次握手）。3.发送HTTP请求：浏览器发送HTTP请求报文。4.服务器处理：服务器接收请求并返回响应数据。5.浏览器解析资源：*解析HTML，构建DOM树。*解析CSS，构建CSSOM树。6.渲染树构建：将DOM和CSSOM合并生成渲染树。7.布局：计算渲染树中节点的几何信息（位置和大小）。8.绘制：根据计算出的信息将节点绘制到屏幕上。9.合成：将不同层级的图层合并显示。*解析思路：考察对浏览器渲染流程的完整记忆，尤其是DOM和CSSOM的构建顺序以及布局和绘制的区别。18.答案：*Vue2：使用`Object.defineProperty`递归遍历数据对象进行劫持。缺点是无法监听数组索引和对象新增属性的变化，需要`Vue.set`；性能较差，因为需要递归。*Vue3：使用ES6的`Proxy`代理整个对象。优点是可以监听数组变化和对象新增/删除属性；性能更好，不需要递归遍历。*解析思路：对比两种实现方式的API、性能差异以及监听范围的局限性。19.答案：*ReactFiber将原本同步的渲染过程拆解为一个个小任务（微任务）。主线程在执行这些任务时，如果遇到耗时操作（如复杂计算），会主动让出控制权，转而去执行其他高优先级的任务（如用户交互）。当主线程再次空闲时，可以继续执行之前中断的任务，或者放弃低优先级的任务。这种机制使得渲染过程具有可中断性。*解析思路：重点在于“拆分任务”和“可中断性”，这是解决页面卡顿的核心思想。20.答案：1.资源压缩：使用Gzip或Brotli压缩JS、CSS、图片等资源，减少传输体积。2.懒加载：将非首屏资源（如长列表、图片）延迟加载，减少初始加载体积。3.预加载/预连接：使用`<linkrel="preload">`或DNS预解析，提前加载关键资源。4.代码分割：拆分打包体积过大的代码包，按需加载。5.CDN加速：将静态资源部署在CDN节点，利用就近访问减少网络延迟。*解析思路：列举至少3点，并简要说明原理即可。四、综合分析题21.答案：*网络层优化：*启用HTTP/2或HTTP/3，利用多路复用减少连接数，头部压缩减少传输量。*开启Gzip/Brotli压缩，减少文件体积。*使用CDN加速，将静态资源分发到离用户最近的节点。*资源层优化：*图片优化：使用WebP格式、懒加载、图片压缩。*字体优化：使用系统字体栈，减少字体文件请求。*代码层优化：*路由懒加载，按需加载页面组件。*Webpack/Vite构建优化，开启TreeShaking去除死代码，提取公共代码。*减少第三方库体积，选择按需引入的组件库。*解析思路：需要覆盖网络、资源、代码三个维度，体现出解决实际性能问题的系统性思维。22.答案：*使用React.memo：对函数组件进行包裹，进行浅比较props，只有props发生变化时才重新渲染。*使用useMemo/useCallback：缓