web前端测试题及答案

web前端测试题及答案一、单项选择题（共20题，每题2分，总计40分）1.下列HTML语义化标签中，适合用于包裹独立可复用的完整内容块（如博客文章、用户评论、新闻条目）的是（）A.<section>B.<article>C.<div>D.<nav>参考答案：B解析：HTML语义化标签中，<article>标签代表独立的、可完整复用的内容单元，其内部内容脱离页面其他部分仍具备完整语义；<section>用于对页面中同一主题的内容进行分组，通常带有标题；<div>是无语义的通用块级容器；<nav>用于包裹导航链接集合。2.当CSS属性设置为box-sizing:border-box时，元素设定的width属性值包含的范围是（）A.仅内容区（content）宽度B.内容区+内边距（padding）宽度C.内容区+内边距+边框（border）宽度D.内容区+内边距+边框+外边距（margin）宽度参考答案：C解析：CSS包含两种盒模型：标准盒模型（content-box，W3C规范默认值）的width仅包含内容区宽度，padding、border会额外撑大元素尺寸；怪异盒模型（border-box，IE传统模型）的width包含内容区、padding、border的总宽度，元素实际尺寸不会因为padding和border的设置超出设定值；两种模型中margin都不计入元素自身的宽度计算。3.非严格模式下，执行以下代码的输出结果是（）console.log(a);vara=1;functiona(){}console.log(a);A.undefined1B.functiona(){}1C.undefinedfunctiona(){}D.抛出引用错误参考答案：B解析：JS执行分为词法分析和执行阶段，变量提升规则中函数声明的优先级高于var变量声明，同名的var变量声明不会覆盖已提升的函数声明；上述代码提升后等价于：functiona(){};vara;console.log(a);a=1;console.log(a)，因此第一次输出函数a，变量a被赋值为1后第二次输出1。4.下列CSS属性/取值中，无法触发块级格式化上下文（BFC）的是（）A.overflow:hiddenB.display:inline-blockC.position:relativeD.float:left参考答案：C解析：BFC是页面中独立的渲染区域，内部元素的布局不会影响外部元素，常见触发条件包括：根元素<html>、float属性值不为none、position为absolute/fixed、display为inline-block/table-cell/flex/grid/flow-root、overflow属性值不为visible；position:relative属于常规流定位，不会触发BFC。BFC可用于解决margin上下重叠、浮动元素高度塌陷、自适应两栏布局等问题。5.下列HTTP状态码中，表示资源永久重定向的是（）A.301B.302C.304D.403参考答案：A解析：301代表资源被永久转移到新地址，浏览器会缓存重定向结果；302代表临时重定向，浏览器不会缓存重定向规则；304代表协商缓存命中，资源未修改，可读取本地缓存；403代表服务器拒绝客户端的访问请求，通常由于权限不足导致。6.非严格模式下，独立调用普通函数functionfn(){console.log(this)}时，函数内部this的指向是（）A.undefinedB.全局对象windowC.函数的调用者D.函数自身参考答案：B解析：普通函数的this遵循绑定规则：默认绑定（独立调用时，非严格模式指向全局window，严格模式指向undefined）、隐式绑定（作为对象方法调用时指向调用对象）、显式绑定（通过call/apply/bind修改this指向）、new绑定（指向新创建的实例对象）；箭头函数无自身this，继承外层执行上下文的this。7.下列CSS选择器及规则中，优先级最高的是（）A.ID选择器+类选择器组合（#id.class）B.标签选择器+ID选择器组合（div#id）C.样式规则后标注!importantD.元素内联style属性设置的样式参考答案：C解析：CSS选择器优先级权重从高到低为：!important声明>内联样式（权重1000）>ID选择器（权重100）>类/属性/伪类选择器（权重10）>标签/伪元素选择器（权重1）；权重计算不进位，同权重下后定义的样式会覆盖先定义的样式。8.执行以下ES6解构赋值代码后，变量b的输出值是（）const{a:b=3}={a:undefined,b:5};console.log(b);A.undefinedB.3C.5D.语法报错参考答案：B解析：对象解构的语法规则为{匹配属性名:接收变量名=默认值}，上述代码中是匹配对象的a属性，将其值赋值给变量b，默认值仅在匹配到的属性值严格等于undefined时生效；右侧对象的b属性未被解构匹配，不会对变量b产生影响，因此b的值为默认值3。9.浏览器页面渲染流程中，需要在CSSOM树构建完成后才能执行的步骤是（）A.解析HTML生成DOM树B.结合DOM和CSSOM构建渲染树（RenderTree）C.执行同步加载的JS脚本D.发起HTML文档的网络请求参考答案：B解析：浏览器完整渲染流程为：发起请求获取HTML文档→解析HTML构建DOM树，遇到同步JS/CSS时暂停解析，优先下载构建CSSOM、执行JS代码→DOM和CSSOM都构建完成后，两者结合生成仅包含可见节点的渲染树→执行布局（回流）计算所有节点的几何位置和尺寸→执行绘制（重绘）将节点样式填充到像素图层→利用GPU将多个图层合成后显示到屏幕。10.下列JS数组方法中，调用后不会修改原数组的是（）A.pushB.spliceC.sortD.concat参考答案：D解析：数组方法中，会修改原数组的方法包括push/pop/shift/unshift/splice/sort/reverse/fill等；concat方法用于合并多个数组，返回全新的合并后数组，不会修改原数组；同类不修改原数组的方法还包括slice/map/filter/reduce/find/forEach等。11.下列关于CSS粘性定位position:sticky的描述，错误的是（）A.必须指定top/bottom/left/right中至少一个滚动阈值才能生效B.父元素不能设置overflow:hidden/auto等非visible的溢出属性C.父元素的高度不能小于sticky元素的高度D.粘性定位元素会完全脱离标准文档流参考答案：D解析：sticky粘性定位是相对定位和固定定位的结合：未达到滚动阈值时表现为relative相对定位，不脱离文档流，占据原有位置；达到滚动阈值后表现为fixed固定定位效果，始终停留在视口指定位置；其生效必须满足三个条件：设置明确的阈值、父元素无溢出裁剪、父元素高度大于sticky元素高度。12.下列代码在浏览器中执行的输出顺序是（）console.log(1);setTimeout(()=>console.log(2),0);Promise.resolve().then(()=>console.log(3));console.log(4);A.1234B.1432C.1423D.1342参考答案：B解析：JS事件循环机制中，同步代码优先在调用栈中执行，同步代码执行完成后优先清空微任务队列，再从宏任务队列中取出任务执行；上述代码中console.log(1)、console.log(4)为同步代码先执行，Promise.then属于微任务插队执行输出3，setTimeout回调属于宏任务最后执行输出2。13.下列浏览器存储API中，适合存储大量结构化数据、支持索引查询和事务操作的是（）A.localStorageB.sessionStorageC.IndexedDBD.Cookie参考答案：C解析：localStorage和sessionStorage为键值对存储，仅支持存储字符串类型数据，容量约5MB，sessionStorage为会话级存储，页面关闭后数据清除，localStorage为持久化存储；Cookie每次HTTP请求都会自动携带，容量约4KB，主要用于用户身份标识；IndexedDB是浏览器端的非关系型数据库，支持存储二进制、对象等结构化数据，容量可达数百MB到数GB，支持索引、事务、游标查询，适合存储大量离线数据。14.Flex布局中设置flex-direction:column时，align-items属性默认值及其控制的对齐方向是（）A.stretch水平方向B.flex-start垂直方向C.center交叉轴D.stretch主轴参考答案：A解析：Flex布局的主轴方向由flex-direction决定，flex-direction:column时主轴为垂直方向，交叉轴为水平方向；justify-content用于控制主轴方向的对齐，align-items用于控制交叉轴方向的对齐，默认值为stretch，即如果子元素未设置交叉轴方向的尺寸（此场景下为宽度），会拉伸占满父容器的交叉轴空间。15.JS原型链机制中，访问对象属性时沿着原型链向上查找的终点是（）A.Object构造函数B.FtotypeC.OtotypeD.null参考答案：D解析：每个对象都有__proto__属性指向其构造函数的prototype原型对象，构造函数的prototype本质也是对象，其__proto__最终指向Ototype，而Ototype.__proto__的值为null，是原型链的顶端，属性查找到此处若未找到则返回undefined。16.下列跨域解决方案中，需要目标服务器配合设置CORS响应头、支持所有HTTP请求方法的官方标准方案是（）A.JSONPB.CORS跨域资源共享C.postMessageD.正向代理服务器参考答案：B解析：JSONP利用script标签不受同源策略限制的原理实现跨域，仅支持GET请求；CORS是W3C官方标准跨域方案，通过服务器设置Access-Control-Allow-Origin等响应头实现跨域访问，支持所有HTTP方法；postMessage用于跨窗口（iframe、跨标签页）的消息通信，并非接口跨域方案；正向代理是通过服务端转发请求绕过浏览器同源限制，不需要目标服务器配合，通常用于开发环境。17.下列关于ES6箭头函数的描述，错误的是（）A.箭头函数没有自身this，继承外层执行上下文的this值B.箭头函数没有prototype属性，不能作为构造函数通过new调用C.箭头函数内部没有arguments对象，可通过rest参数获取实参列表D.箭头函数可以使用yield关键字作为生成器函数参考答案：D解析：箭头函数设计目的是简化短函数写法、修复普通函数this指向混乱的问题，其不具备自身this、arguments，没有prototype，无法通过new调用，也无法作为生成器函数使用yield关键字。18.当z-index值相同时，下列元素在页面层叠顺序中最靠近用户（显示在最上层）的是（）A.position非static的定位元素，按文档流顺序后出现的B.设置了float的浮动元素C.普通块级非定位元素D.普通行内非定位元素参考答案：A解析：CSS层叠上下文的堆叠顺序从下到上依次为：元素边框和背景<普通块级非定位元素<浮动元素<行内/行内块非定位元素<z-index为auto/0的定位元素<z-index为正值的定位元素；z-index相同时，后写入文档流的定位元素会覆盖之前的元素。19.下列前端性能优化手段中，无法有效缩短首屏可交互时间（TTI）的是（）A.基于路由进行代码分割，首屏仅加载当前路由所需的JS资源B.首屏关键CSS采用内联方式引入，减少关键路径的网络请求数C.通过linkprefetch预加载后续页面可能用到的路由资源D.对首屏体积超过100KB的图片采用WebP格式压缩参考答案：C解析：prefetch预加载是利用浏览器空闲时间低优先级加载未来可能用到的资源，不会抢占当前首屏资源的加载带宽和优先级，因此无法缩短当前页面的首屏TTI；其余选项均通过减少首屏资源体积、降低关键渲染路径阻塞来缩短首屏加载时间。20.下列关于虚拟DOM的描述，错误的是（）A.虚拟DOM是对真实DOM的JavaScript对象抽象，可减少直接操作真实DOM的性能开销B.虚拟DOM的Diff算法采用同层比较、key复用策略，将树比对的时间复杂度从O(n³)降低到O(n)C.虚拟DOM作为平台无关的抽象层，可实现跨端渲染（服务端、小程序、Native等）D.基于虚拟DOM的框架更新性能一定高于直接操作真实DOM参考答案：D解析：虚拟DOM的核心价值是降低复杂视图更新的心智负担，通过Diff计算最小更新量，避免开发者手动进行DOM优化，同时具备跨平台能力；在极简单的更新场景下（如修改单个文本内容），直接操作真实DOM的性能高于虚拟DOM的Diff+更新流程，因此虚拟DOM并非在所有场景下性能都更优。二、多项选择题（共10题，每题3分，总计30分，多选、少选、错选均不得分）1.下列属于HTML5新增的表单属性的有（）A.requiredB.placeholderC.patternD.multiple参考答案：ABCD解析：HTML5为表单新增了大量原生能力，包括required（必填校验）、placeholder（输入占位提示）、pattern（正则表达式校验）、multiple（支持多文件/多选项选择）、autofocus（自动聚焦）、autocomplete（自动补全）等，减少了表单校验和交互的JS代码量。2.下列CSS属性修改操作中，会触发浏览器回流（重排）的有（）A.修改元素的width宽度属性B.修改元素的color文本颜色属性C.滚动浏览器窗口到指定位置D.修改元素的transform位移属性参考答案：AC解析：回流是指元素的几何属性（尺寸、位置、显示隐藏）发生变化时，浏览器需要重新计算整个布局树的过程，开销较大；重绘是指元素外观变化但不影响布局时，仅重新绘制像素的过程，开销较小；transform、opacity等属性会触发GPU合成层更新，不会触发回流和重绘，性能更高。修改color仅触发重绘，修改transform仅触发合成。3.下列JS数据类型中，属于原始值类型的有（）A.StringB.SymbolC.BigIntD.Object参考答案：ABC解析：JS包含7种原始值类型：Number、String、Boolean、Null、Undefined、Symbol、BigInt，原始值存储在栈内存中，赋值时为值拷贝；Object为引用类型，包含Array、Function、Date、RegExp等子类型，引用值存储在堆内存中，赋值时为引用地址拷贝。4.下列关于HTTP/2协议特性的描述，正确的有（）A.采用二进制分帧层，将HTTP报文拆分为更小的二进制帧进行传输B.支持多路复用，同一域名下的多个请求可共用一个TCP连接，避免HTTP1.1的请求队头阻塞C.采用HPACK算法压缩请求/响应头部，减少头部冗余传输的体积D.支持服务器推送，服务器可主动向客户端推送页面所需的静态资源，减少请求等待时间参考答案：ABCD解析：HTTP/2针对HTTP1.1的队头阻塞、头部冗余、串行请求等问题做了优化，但由于其基于TCP协议实现，仍存在TCP层的队头阻塞问题，后续HTTP/3基于QUIC（UDP）协议进一步解决了该问题。5.下列关于JS闭包的描述，正确的有（）A.闭包是指函数可以访问其定义时所在词法作用域的变量，即使函数在该作用域之外执行B.闭包会持有被引用变量的内存引用，使用不当会导致变量无法被垃圾回收，造成内存泄漏C.闭包可用于实现私有变量、模块化封装、函数柯里化、防抖节流等常见场景D.循环中使用var声明变量绑定事件时，可通过IIFE创建闭包保存每轮循环的变量值，解决变量共享导致的索引错误问题参考答案：ABCD解析：闭包的本质是词法作用域的应用，JS中所有函数本质都是闭包，合理使用闭包可以实现逻辑封装，不当使用会增加内存开销。6.下列CSS单位中，属于相对长度单位的有（）A.pxB.remC.emD.vw参考答案：BCD解析：px为绝对长度单位，代表设备像素；em为相对单位，相对于当前元素的font-size计算；rem为相对单位，相对于根元素<html>的font-size计算，常用于移动端适配；vw为相对单位，1vw等于视口宽度的1%，同类相对单位还包括vh、vmin、vmax、%等。7.下列关于浏览器缓存机制的描述，正确的有（）A.强缓存命中时不会向服务器发送请求，直接从本地内存/磁盘读取资源，状态码显示200frommemorycache/fromdiskcacheB.强缓存的控制字段包括HTTP1.0的Expires和HTTP1.1的Cache-Control，两者同时存在时Cache-Control优先级更高C.强缓存过期后进入协商缓存阶段，浏览器向服务器发送校验请求，若资源未更新则返回304状态码，读取本地缓存D.协商缓存中ETag字段的优先级高于Last-Modified，ETag是文件内容的唯一标识，可解决文件修改时间精度不足、内容未变但修改时间更新的问题参考答案：ABCD解析：浏览器缓存的完整流程为：首次请求资源时服务器返回资源内容和缓存规则头，后续请求优先判断强缓存是否命中，命中则直接使用缓存，未命中则发送请求携带缓存标识到服务器校验协商缓存，协商缓存命中返回304，未命中则返回新的资源和缓存规则。8.下列JS异步任务中，属于宏任务的有（）A.setTimeout/setInterval的回调函数B.Promise.then/catch/finally的回调函数C.<script>标签整体代码的执行D.requestAnimationFrame的回调函数参考答案：ACD解析：JS异步任务分为宏任务和微任务，微任务包括Promise.then/catch/finally、MutationObserver、queueMicrotask、Node环境的process.nextTick；宏任务包括整体script代码、setTimeout/setInterval、setImmediate、requestAnimationFrame、I/O操作、UI渲染；事件循环每执行完一个宏任务，会清空当前所有微任务，再进行UI渲染，之后执行下一个宏任务。9.下列关于Web前端安全的描述，正确的有（）A.XSS跨站脚本攻击是指攻击者向页面注入恶意JS脚本，窃取用户Cookie、篡改页面内容，可通过输入内容转义、设置CookieHttpOnly属性、开启CSP内容安全策略防御B.CSRF跨站请求伪造是指攻击者诱导已登录用户访问恶意站点，冒用用户身份向目标站点发送请求，可通过校验Referer、添加CSRFToken、设置CookieSameSite属性防御C.SQL注入属于前端层面的安全问题，仅需前端做参数校验即可完全防御D.点击劫持是指攻击者通过iframe透明嵌套目标页面，诱导用户点击iframe内的敏感按钮，可通过设置X-Frame-Options响应头禁止页面被iframe嵌套防御参考答案：ABD解析：SQL注入是后端层面的安全问题，攻击者通过在输入参数中注入SQL语句篡改数据库查询逻辑，前端校验仅能提升用户体验，无法防御SQL注入，必须通过后端参数化查询、输入过滤等手段防御。10.下列关于前端工程化的描述，正确的有（）A.ESLint代码规范校验、Prettier代码格式化、Husky+Commitlint提交规范校验属于工程化中的代码质量保障范畴B.Webpack、Vite、Rollup等构建工具可实现ES6+/TS语法转译、资源打包、代码压缩、代码分割等能力C.前端工程化的核心目标是提升开发效率、降低维护成本、保障代码质量、优化线上性能D.TreeShaking摇树优化基于ESModule的静态结构分析，移除代码中未被引用的死代码，CommonJS模块由于支持动态导入，无法实现可靠的TreeShaking参考答案：ABCD解析：前端工程化覆盖模块化、组件化、规范化、自动化构建、CI/CD部署、性能监控等全流程，是中大型前端项目的必备基础能力。三、判断题（共10题，每题1分，总计10分，正确打√，错误打×）1.HTML中img标签的alt属性用于图片加载失败时显示替代文本，也是屏幕阅读器识别图片内容的核心依据；title属性用于鼠标悬停在图片上时显示提示文本。（√）解析：alt属性是图片无障碍访问的必备属性，必须准确描述图片内容，不能留空。2.CSS中给块级元素设置margin:0auto即可实现元素在父容器中的水平居中。（×）解析：margin:0auto仅能对设置了明确宽度、未脱离文档流的块级元素生效，行内元素、浮动元素、绝对定位元素无法通过该方式居中。3.JS中使用const声明的变量值完全不可修改。（×）解析：const仅保证变量指向的内存地址不可修改，对于引用类型（对象、数组），其内部属性和元素仍可修改，仅原始值类型的const变量值不可变。4.浏览器同源策略要求两个页面的协议、域名、端口三者完全一致才允许脚本进行资源读写，img、script、link标签的src属性不受同源策略限制。（√）解析：带src属性的标签仅能跨域加载资源，无法读取加载的内容内容，JSONP正是基于该特性实现的跨域请求。5.CSS伪元素::before和::after默认是行内元素，必须设置content属性才能正常渲染。（√）解析：content属性是伪元素生效的必要条件，可设置为空字符串，不设置content的伪元素不会被渲染到页面中。6.JS中typeofnull的返回值是"null"。（×）解析：typeofnull返回"object"是JS历史遗留的设计缺陷，判断null类型需要通过value===null的严格相等比较。7.给元素设置opacity:0后元素会完全隐藏，无法响应绑定的鼠标点击事件。（×）解析：opacity:0仅让元素视觉上透明，元素仍占据文档流位置，且可以正常响应交互事件；visibility:hidden隐藏的元素占据位置但不响应交互；display:none隐藏的元素不占据位置也不响应交互。8.ES6Promise对象的状态一旦从pending变为fulfilled或rejected，就不会再发生变化，支持链式调用解决回调地狱问题。（√）解析：Promise的状态具有不可逆性，一旦凝固就会保持最终的结果，后续添加的then回调仍能拿到最终结果。9.现代浏览器主流的垃圾回收算法是标记清除算法，从根对象（window/globalThis）出发遍历所有可达对象，清除未被标记的不可达对象，解决了早期引用计数算法的循环引用内存泄漏问题。（√）解析：标记清除算法是目前V8引擎的核心垃圾回收算法，在此基础上衍生了增量标记、分代回收、并行回收等优化手段提升回收性能。10.Vue3的CompositionAPI和ReactHooks都是函数式逻辑复用方案，两者的响应式原理和调用时机完全一致。（×）解析：Vue3CompositionAPI基于Proxy实现响应式，setup函数仅在组件初始化时执行一次，数据变化时仅执行关联的副作用；ReactHooks基于链表状态存储，每次组件渲染都会重新执行Hook函数，两者实现原理有本质区别。四、简答题（共4题，每题5分，总计20分）1.请简述从浏览器地址栏输入URL到页面完全加载的核心流程。参考答案：完整流程包含7个核心阶段：①URL解析：浏览器判断输入内容是搜索关键词还是合法URL，对URL进行编码构造请求报文；②DNS解析：依次查询浏览器DNS缓存、系统缓存、hosts文件、本地DNS服务器，若本地无记录则通过递归查询从根域名、顶级域名、权威域名服务器获取域名对应的IP地址；③建立连接：浏览器与服务器通过TCP三次握手建立可靠连接，如果是HTTPS协议还需要进行TLS握手，协商加密套件、验证服务器证书、交换会话密钥，建立加密传输通道；④发送请求：浏览器构造HTTP请求报文（请求行、请求头、请求体），通过连接发送到服务器；⑤服务器响应：服务器处理请求后返回HTTP响应报文，若状态码为301/302则进行重定向重新发起请求，若为304则读取本地缓存；⑥渲染页面：浏览器解析HTML构建DOM树，遇CSS/JS暂停解析，构建CSSOM、执行JS后结合DOM和CSSOM生成渲染树，依次执行回流（计算元素位置尺寸）、重绘（绘制像素图层）、合成（GPU合成图层显示到屏幕）；⑦事件触发：DOM构建完成后触发DOMContentLoaded事件，所有图片、样式、iframe等资源加载完成后触发load事件，后续响应用户交互和异步请求更新页面。2.请简述CSS实现元素水平垂直居中的至少5种常用方案及适用场景。参考答案：常见居中方案包括：①Flex布局：父元素设置display:flex;justify-content:center;align-items:center，子元素无需额外设置，适用于父子元素尺寸不固定的绝大多数场景，代码简洁兼容性好，是目前的主流方案；②Grid布局：父元素设置display:grid;place-items:center，代码更简洁，适用于现代浏览器的网格布局场景；③绝对定位+transform：父元素设置position:relative，子元素设置position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)，适用于子元素尺寸不固定、需要脱离文档流的场景；④绝对定位+margin:auto：父元素设置position:relative，子元素设置position:absolute;top:0;left:0;right:0;bottom:0;margin:auto，需子元素设置明确宽高，适用于固定尺寸子元素的脱流居中；⑤绝对定位+负margin：子元素设置top:50%;left:50%后通过负margin偏移自身宽高的一半，适用于兼容IE低版本、子元素尺寸固定的场景；⑥table-cell方案：父元素设置display:table-cell;vertical-align:middle;text-align:center，子元素设置display:inline-block，适用于兼容IE8及以下版本的场景；⑦行高方案：父元素设置text-align:center;line-height等于父元素高度，子元素设置display:inline-block;vertical-align:middle，适用于行内内容（文字、按钮）的居中场景。3.请简述JS事件委托（事件代理）的原理、优缺点及适用场景。参考答案：事件委托的核心原理是利用浏览器的事件冒泡机制，将子元素的事件监听统一绑定到父元素上，当子元素触发事件时，事件会冒泡到父元素触发监听回调，通过event.target判断实际触发事件的子元素，执行对应的处理逻辑。优点包括：减少事件监听函数的数量，节省内存开销，提升页面性能；可自动支持动态新增的子元素，无需重新绑定事件；减少事件解绑操作，降低内存泄漏风险。缺点包括：不支持不冒泡的事件（如focus、blur、mouseenter等）；事件冒泡路径上如果有元素调用stopPropagation会导致委托失效；父元素绑定过多委托事件时，频繁的target判断会增加响应开销。适用场景包括：列表、表格等包含大量相似子元素的交互场景；动态渲染的内容区域（如无限滚动列表、动态表单）；全局统一事件监听场景（如全局点击隐藏下拉菜单、全局埋点收集）。4.请简述前端常见的内存泄漏场景及对应解决方案。参考答案：内存泄漏是指不再需要使用的内存被错误引用持有，无法被垃圾回收机制释放，导致页面内存持续升高、卡顿甚至崩溃的问题，常见场景包括：①意外全局变量：非严格模式下未声明直接赋值的变量会挂载到window上无法回收，解决方案是启用严格模式，避免未声明变量，全局变量使用后手动置空；②未清理的定时器和事件监听：定时器、事件监听持有DOM或大对象引用时，即使DOM被移除也无法回收，解决方案是定时器不用时调用clearInterval/clearTimeout清除，DOM移除前手动解绑事件监听，组件卸载时清理全局监听；③闭包不当使用：闭包长期持有外层作用域的无用变量、DOM引用导致无法回收，解决方案是避免闭包持有不必要的大对象，使用后手动释放引用；④脱离DOM的引用：JS变量持有已移除DOM节点的引用导致DOM内存无法释放，解决方案是DOM移除后将对应的JS变量置空；⑤未取消的订阅和观察者：EventBus事件订阅、IntersectionObserver等实例在组件卸载时未取消订阅或断开连接，导致回调被长期持有，解决方案是组件卸载时调用off方法取消订阅、调用disconnect断开观察者；⑥线上环境console打印大对象：浏览器开发者工具会持有console打印的对象引用导致无法回收，解决方案是生产环境构建时移除所有console语句。五、编程实操题（共2题，每题10分，总计20分）1.实现通用防抖函数debounce，接收参数为待执行函数fn、延迟时间wait（默认300ms）、是否立即执行immediate（默认false），返回防抖后的函数，支持取消防抖、立即执行的功能。参考答案：func