2026年前端开发工程师笔试真题（含详细答案解析）

2026年前端开发工程师笔试真题（含详细答案解析）考试时长：120分钟满分：100分适用岗位：初级/中级前端开发工程师考试说明：本试卷分为选择题、填空题、简答题、编程题四个部分，所有题目独立作答，答案书写规范、步骤完整可酌情给分一、单项选择题（共15题，每题2分，共30分）1.以下不属于HTML5新增语义化标签的是（）A.headerB.footerC.divD.article2.CSS中，以下选择器优先级最高的是（）A.类选择器B.ID选择器C.标签选择器D.通配符选择器3.关于CSS盒模型，下列说法正确的是（）A.standard盒模型宽度包含padding和borderB.border-box盒模型元素宽度=content+padding+borderC.border-box盒模型宽度包含padding和borderD.margin会改变元素自身实际占用宽度4.以下关于flex布局属性描述错误的是（）A.justify-content控制主轴对齐方式B.align-items控制交叉轴对齐方式C.flex-grow控制元素缩放比例D.flex-direction默认值为column5.JavaScript中，以下变量声明会产生全局变量的是（）A.leta=1B.consta=1C.a=1D.vara=16.以下不属于JS基本数据类型的是（）A.StringB.NumberC.ArrayD.Undefined7.关于this指向，普通函数独立调用时，浏览器环境下this的值是（）A.undefinedB.windowC.nullD.函数自身8.以下方法不会改变原数组的是（）A.spliceB.pushC.mapD.reverse9.Promise对象的三种状态不包含以下哪种（）A.pendingB.resolveC.fulfilledD.rejected10.关于async/await，下列说法正确的是（）A.await可以脱离async函数单独使用B.async函数默认返回Promise对象C.await无法捕获异步错误D.async函数会阻塞主线程11.浏览器同源策略中，不属于同源限制的是（）A.协议不同B.域名不同C.端口不同D.页面参数不同12.Vue3中，以下哪个API用于创建响应式基本数据类型（）A.reactiveB.refC.toRefD.computed13.以下不属于HTTP请求方法的是（）A.GETB.POSTC.SENDD.PUT14.HTTP状态码403代表的含义是（）A.资源不存在B.服务器错误C.禁止访问D.请求超时15.关于跨域解决方案，以下说法错误的是（）A.CORS需要服务端配置B.jsonp仅支持GET请求C.代理跨域可解决所有跨域问题D.websocket存在跨域限制二、填空题（共10空，每空2分，共20分）1.CSS实现垂直居中的常用两种方式：________、________。2.JS中判断数组类型的精准方法是________。3.原型链的顶端是________，其__proto__属性值为________。4.防抖的核心是________，节流的核心是________。5.Vue2的双向绑定原理是________，Vue3采用________实现响应式。6.前端缓存分为________和________两大类。三、简答题（共4题，每题6分，共24分）1.简述var、let、const三者的区别。2.简述浏览器从输入URL到页面渲染完成的完整流程。3.说说Vue中computed和watch的区别及各自适用场景。4.简述前端常见的性能优化方案（至少说出6种）。四、编程题（共2题，每题13分，共26分）1.手写实现JavaScript防抖函数，要求支持立即执行、延迟时间可配置。2.手写数组去重方法，实现对包含基本数据类型的数组彻底去重，兼容ES5及以上环境。参考答案及详细解析一、单项选择题答案及解析1.答案：C解析：div是HTML传统通用块级标签，无语义性；header、footer、article均为HTML5新增语义化标签，用于规范页面结构。2.答案：B解析：CSS选择器优先级权重：ID选择器(100)>类选择器(10)>标签选择器(1)>通配符选择器(0)。3.答案：C解析：标准盒模型（content-box）：元素宽度仅为content宽度，padding、border会撑开元素；怪异盒模型（border-box）：设置的宽度包含content、padding、border，margin不占用元素自身宽度，仅占用外部间距。4.答案：D解析：flex-direction默认值为row（水平主轴），column为垂直主轴，其余选项描述均正确。5.答案：C解析：未使用任何关键字声明的变量为隐式全局变量；let、const存在块级作用域，var存在函数作用域，均不会随意挂载全局。6.答案：C解析：JS基本数据类型：String、Number、Boolean、Undefined、Null、Symbol、BigInt；Array属于引用数据类型。7.答案：B解析：浏览器环境中，普通函数独立调用（无绑定、无对象调用），this默认指向window；严格模式下this为undefined。8.答案：C解析：splice、push、reverse均会直接修改原数组；map遍历数组并返回新数组，不改变原数组。9.答案：B解析：Promise三种状态：pending（等待中）、fulfilled（成功）、rejected（失败），resolve是触发成功状态的方法，不是状态。10.答案：B解析：async函数执行后默认返回Promise实例；await必须在async函数内使用，可通过try/catch捕获异步错误，async/await是微任务，不会阻塞主线程。11.答案：D解析：同源策略判定标准：协议、域名、端口三者必须完全一致，页面参数不影响同源判定。12.答案：B解析：ref用于定义基本数据类型、简单引用类型的响应式数据；reactive用于定义复杂对象、数组的响应式数据。13.答案：C解析：常用HTTP请求方法：GET、POST、PUT、DELETE、HEAD、OPTIONS，无SEND方法。14.答案：C解析：403Forbidden：服务器拒绝请求、禁止访问；404为资源不存在，500为服务器内部错误，408为请求超时。15.答案：D解析：websocket本身支持跨域通信，无同源限制；jsonp仅支持GET请求，CORS、本地代理是主流跨域方案。二、填空题答案及解析1.flex居中、绝对定位居中（答案：flex布局、position+transform，合理即可）解析：前端主流垂直水平居中方案：flex弹性布局、绝对定位+transform偏移、table布局等。2.Array.isArray()解析：typeof无法精准判断数组类型，Array.isArray()是ES5提供的专属数组判断方法，精准可靠。3.Ototype、null解析：所有引用类型的原型链最终指向Ototype，Ototype的__proto__为null，是原型链终点。4.延迟执行、限时执行解析：防抖：高频触发事件，停止触发后延迟一段时间执行，只执行最后一次；节流：高频触发事件，固定时间段内只执行一次。5.Object.defineProperty、Proxy解析：Vue2基于Object.defineProperty劫持属性实现双向绑定，无法监听新增、删除属性和数组下标变化；Vue3基于Proxy代理整个对象，解决了Vue2的响应式缺陷。6.强缓存、协商缓存解析：前端HTTP缓存分为强缓存（Cache-Control、Expires）和协商缓存（Last-Modified、ETag）。三、简答题答案及解析1.var、let、const三者的区别（1）作用域不同：var属于函数作用域，存在变量提升；let、const属于块级作用域，仅在{}包裹的代码块内生效，有效解决变量污染问题。（2）变量提升不同：var声明的变量存在变量提升，可先使用后声明；let、const存在暂时性死区，声明前无法使用。（3）重复声明：var允许重复声明变量；let、const禁止同一作用域内重复声明。（4）赋值规则：var、let可多次赋值；const声明常量，一旦赋值不可修改（引用类型可修改内部属性）。（得分点：作用域、变量提升、重复声明、赋值规则，每点1.5分）2.输入URL到页面渲染完成的完整流程（1）DNS解析：将域名解析为对应的服务器IP地址，完成域名与IP的映射；（2）TCP连接：通过三次握手与服务器建立可靠的TCP传输连接；（3）HTTP请求：浏览器向服务器发送HTTP请求报文，请求对应页面资源；（4）服务器响应：服务器处理请求，返回HTTP响应报文及页面HTML、CSS、JS等资源；（5）页面解析渲染：浏览器解析HTML生成DOM树、解析CSS生成CSSOM树，结合两者生成渲染树，完成布局、绘制、合成；（6）资源加载与执行：加载并执行JS代码，完成页面交互逻辑绑定，最终页面完整展示。（得分点：DNS解析、TCP连接、HTTP请求响应、渲染树生成、页面绘制、JS执行，每点1分）3.computed和watch的区别及适用场景区别：（1）缓存特性：computed具备缓存机制，依赖值不变时，多次调用不会重复计算；watch无缓存，数据变化即触发执行。（2）数据处理：computed用于数据计算、派生新数据，有返回值；watch用于监听数据变化、执行异步或复杂逻辑，无返回值。（3）触发时机：computed页面加载时默认执行一次；watch默认数据变化才触发，可配置立即执行。适用场景：computed：简单数据计算、多数据联动派生新值（如价格合计、文本格式化）；watch：异步请求、复杂业务逻辑、数据变化后的额外操作（如监听路由变化、表单校验）。（得分点：缓存、功能、触发时机、适用场景，每点1.5分）4.前端常见性能优化方案（1）资源优化：压缩JS、CSS、图片资源，使用webp、svg等轻量化图片格式，开启图片懒加载；（2）缓存优化：利用HTTP强缓存、协商缓存，本地缓存localStorage、sessionStorage存储静态数据；（3）代码优化：减少DOM操作，批量处理DOM更新，避免频繁回流重绘；使用防抖节流优化高频事件；（4）工程化优化：路由懒加载、组件按需引入，打包拆分代码、去除冗余代码，开启gzip压缩；（5）渲染优化：开启硬件加速，避免多层嵌套布局，减少无效渲染；（6）网络优化：减少HTTP请求次数，合并静态资源，使用CDN加速静态资源访问。（得分点：任意6种即可满分，表述合理酌情给分）四、编程题答案及解析1.可配置立即执行的防抖函数（13分）解题思路：定义定时器保存标识，每次触发事件清除旧定时器；配置immediate参数控制是否立即执行，执行后延迟时间段内不再重复触发。javascript

//防抖函数封装

functiondebounce(fn,delay,immediate=false){

lettimer=null;

returnfunction(...args){

//每次触发清除之前的定时器

if(timer)clearTimeout(timer);

//立即执行场景：无定时器且开启立即执行

if(immediate&&!timer){

fn.apply(this,args);

}

//延迟执行

timer=setTimeout(()=>{

//非立即执行则触发函数

if(!immediate){

fn.apply(this,args);

}

timer=null;

},delay);

}

}

//使用示例

consttestFn=()=>console.log('防抖执行');

//延迟500ms执行

window.addEventListener('resize',debounce(testFn,500));

//立即执行版本

window.addEventListener('scroll',debounce(testFn,500,true));评分标准：定时器核心逻辑（5分）、立即执行配置（4分）、this指向与参数传递处理（2分）、代码可运行（2分）2.兼容ES5的数组彻底去重方法（13分）解题思路：ES5无Set数据结构，通过遍历数组+对象键值唯一性实现去重，兼容所有基本数据类型，解决NaN、undefined等特殊值去重问题。javascript

//数组去重方法（ES5兼容）

functionuniqueArr(arr){

//校验入参是否为数组

if(!Array.isArray(arr)){