Web前端工程师面试题（含详细实战答案）

Web前端工程师面试题（含详细实战答案）说明：全套题目为一线互联网公司高频面试原题，答案贴合日常开发、口语化无模板感，适合初级、中级前端面试背诵、复盘，覆盖基础、核心、工程化、实战场景。一、HTML核心面试题1.说说HTML5新增的常用特性，项目中用过哪些？参考答案：日常开发里用得最多的是语义化标签、表单新特性、本地存储、媒体标签这几块。语义化标签：header、nav、main、section、footer、aside。相比以前全部用div，语义化标签能让代码结构更清晰，浏览器和爬虫能识别页面模块，对SEO和无障碍访问很友好。表单新特性：新增input类型tel、email、number、date，还有required、placeholder、autofocus这些属性，不用写JS就能实现基础表单校验，开发更高效。本地存储：localStorage、sessionStorage，替代传统cookie存储本地数据，容量更大、操作更简单，项目里常用来存用户临时配置、登录状态、本地缓存数据。其他常用：video、audio媒体标签，不用插件就能播放音视频；canvas用来做简单的绘图、数据可视化、海报生成。2.行内元素、块级元素、行内块元素的区别？参考答案：块级元素：独占一行，默认宽度100%父级宽度，可以设置宽高、内外边距。常见的有div、p、h1-h6、ul、li。行内元素：不独占一行，横向排列，宽高由内容决定，无法设置宽高、上下边距，只能设置左右内外边距。常见的有span、a、em、i。行内块元素：结合两者优点，横向排列、不独占一行，同时可以自由设置宽高、内外边距。常见的有img、input、button，开发中也经常用display:inline-block手动转换。3.什么是DOM回流和重绘？参考答案：浏览器渲染页面时，会先计算元素布局（回流），再绘制样式（重绘）。回流（重排）：当元素的布局属性变了，比如宽高、边距、位置、字体大小，浏览器需要重新计算整个页面的布局结构，开销很大。重绘：只是元素样式改变，不影响布局，比如颜色、背景、透明度，浏览器只重新绘制对应元素，开销比回流小很多。实战优化：开发中尽量避免频繁操作DOM样式，统一修改class代替逐条修改样式；批量DOM操作先脱离文档流，修改完再渲染，减少回流次数。二、CSS核心面试题1.CSS选择器优先级顺序？权重怎么计算？参考答案：优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式权重计算规则（不会进位）：1.!important：权重最高，直接覆盖所有样式（开发尽量少用，难以维护）2.行内样式：10003.ID选择器：1004.类、伪类、属性选择器：105.标签、伪元素选择器：1优先级对比只看权重数值，权重高的直接生效，不存在10个类选择器抵一个ID的情况，不会进位。2.垂直居中的常用方法，分别适用什么场景？参考答案：项目中最常用三种，适配不同场景：1.Flex居中（最常用，推荐）父元素设置display:flex;justify-content:center;align-items:center;优点：代码简洁、适配所有场景、自适应，移动端和后台系统基本都用这个。2.绝对定位+transform父相子绝，子元素top:50%;left:50%;transform:translate(-50%,-50%);优点：不用固定宽高，适配未知尺寸元素，适合弹窗、浮层居中。3.绝对定位+margin负值需要子元素固定宽高，top/left设50%，margin-top、margin-left设为宽高一半的负值。缺点：依赖固定尺寸，现在用得比较少，老项目多见。3.BFC是什么？怎么触发？有什么作用？参考答案：BFC是块级格式化上下文，相当于一个独立的渲染区域，区域内的元素布局不会影响外部元素，外部也不会影响内部。常用触发方式：1.根元素html2.overflow不为visible（auto、hidden、scroll）3.display:flex、inline-block、grid4.position:absolute、fixed实战作用：1.解决浮动元素父级高度塌陷问题（最常用）2.解决相邻元素margin重叠问题3.实现自适应两栏、三栏布局4.Flex和Grid的区别？项目中怎么选择？参考答案：Flex是一维布局，只能控制横向或纵向一个方向的布局；Grid是二维布局，可以同时控制行和列。使用场景：1.常规横向列表、导航、居中、等分布局，优先用Flex，简单灵活、兼容性好2.规整的网格布局、卡片矩阵、多行多列不规则排版，用Grid更高效，代码更少三、JavaScript核心面试题（重点）1.说说var、let、const的区别？参考答案：1.作用域不同：var是函数作用域，let、const是块级作用域（{}内部生效），块级作用域解决了var变量穿透的问题。2.变量提升不同：var存在变量提升，声明前调用会输出undefined；let、const有暂时性死区，声明前调用直接报错。3.重复声明：var允许重复声明；let、const不允许重复声明同一变量。4.赋值规则：var、let可以修改值；const声明常量，必须初始化，且不能重新赋值（引用类型可以修改内部属性）。开发规范：现在项目基本不用var，常量用const，变量用let。2.原型和原型链是什么？通俗解释参考答案：JS里每个函数都有一个prototype（原型对象），每个实例对象都有一个__proto__指向构造函数的prototype。原型的作用：存放公共方法和属性，实现复用，节省内存。比如数组的push、map方法，都是存在Atotype上，所有数组实例都能调用。原型链：对象的__proto__层层向上查找，直到null，这条查找链条就是原型链。访问对象属性/方法时，先在自身找，找不到就去原型找，再找不到就去原型的原型，最终到Ototype，再找不到返回undefined。3.闭包是什么？优缺点和实战场景参考答案：通俗定义：函数嵌套函数，内层函数访问外层函数的变量，外层函数执行结束后，内层函数依然能保留外层变量的作用域，这就是闭包。实战场景：1.封装私有变量，避免全局变量污染2.定时器、回调函数中保留变量状态3.防抖、节流函数的底层实现4.Reacthooks保存状态的原理也是闭包优点：保护私有变量、延长变量生命周期、保留上下文状态。缺点：变量常驻内存，容易造成内存占用过高，使用不当会内存泄漏，用完需要手动置空销毁。4.同步、异步的区别？宏任务和微任务执行顺序参考答案：同步：代码从上到下依次执行，上一行没执行完，下一行等着，适合即时执行的逻辑。异步：不会阻塞主线程，耗时任务（请求、定时器）放入后台执行，主线程继续往下走，适合耗时操作，避免页面卡顿。宏任务、微任务：JS异步分为宏微任务，执行顺序固定：1.先执行所有同步代码2.清空所有微任务（Promise.then、async/await、queueMicrotask）3.执行一个宏任务（setTimeout、setInterval、ajax、DOM事件）4.重复以上流程简单记：同步优先，微任务先于宏任务。5.Promise是什么？解决了什么问题？三种状态参考答案：Promise是ES6处理异步的方案，主要是为了解决传统回调地狱的问题，让异步代码扁平化、更好维护。三种状态（不可逆）：1.pending等待中：初始状态2.fulfilled成功：执行resolve，状态固定，触发then3.rejected失败：执行reject，状态固定，触发catch核心优势：支持链式调用，避免多层回调嵌套；可以统一捕获错误；支持Promise.all、Promise.race批量处理异步请求。6.async/await的原理参考答案：async/await是Promise的语法糖，本质还是Promise，只是把异步代码改成了同步写法，可读性极高。async修饰的函数，返回值一定是Promise对象；await只能在async函数内部使用，作用是阻塞代码，等待Promise执行完成，拿到结果后再继续往下执行。项目中所有接口请求基本都用async/await，配合try/catch捕获异常，比原生Promise更简洁。7.深浅拷贝的区别？手写实现思路参考答案：浅拷贝：只拷贝对象第一层属性，复杂引用类型（对象、数组）只拷贝地址，修改新对象会影响原对象。常用方法：Object.assign、扩展运算符、slice。深拷贝：递归拷贝所有层级属性，新旧对象完全独立，修改互不影响。实战用法：简单场景用JSON.parse(JSON.stringify())，缺点是无法拷贝函数、undefined、正则；复杂场景手写递归深拷贝，或用Lodash的cloneDeep。四、浏览器与网络面试题1.浏览器从输入网址到页面展示，全过程参考答案：面试常用精简流程，真实落地：1.DNS解析：把域名转换成服务器IP地址2.TCP三次握手：建立客户端和服务器可靠连接3.发送HTTP请求：客户端携带请求头、参数发送请求4.服务器处理并返回响应：后台处理逻辑，返回HTML、CSS、JS、图片等资源5.浏览器解析渲染：解析HTML生成DOM树、解析CSS生成CSSOM树，合成渲染树，布局、绘制页面6.JS执行：加载并执行JS代码，实现页面交互7.TCP四次挥手：断开连接2.HTTP1.1、HTTP2、HTTP3的区别参考答案：HTTP1.1：默认长连接，支持管道传输，但存在队头阻塞，同一个域名下最多同时6个请求并发，请求多了会排队。HTTP2：解决队头阻塞，支持多路复用，一个连接可以并行传输多个请求；支持头部压缩、二进制传输、服务器推送，加载速度更快。HTTP3：基于QUIC协议，不用TCP，用UDP，连接建立更快，没有握手延迟，弱网环境体验更好，目前大部分网站已适配。3.缓存机制（强缓存、协商缓存）参考答案：前端缓存核心分为强缓存和协商缓存，优先走强缓存，失效再走协商缓存。强缓存：Cache-Control、Expires，浏览器直接读取本地缓存，不发请求，状态码200(frommemorycache/diskcache)，性能最高。协商缓存：强缓存失效后，浏览器携带标识向服务器校验资源是否更新。标识对应：Last-Modified/If-Modified-Since、ETag/If-None-Match。资源未更新返回304，使用本地缓存；更新则返回200和新资源。4.跨域是什么？常用解决方案参考答案：浏览器同源策略限制，协议、域名、端口任意一个不同，就是跨域，目的是防止恶意网站窃取数据。常用解决方案（项目真实用法）：1.开发环境代理：Vue/React项目配置vite/webpackproxy代理，本地解决跨域（最常用）2.后端CORS：服务器设置响应头，允许指定域名跨域（生产环境主流方案）3.Nginx反向代理：线上通过Nginx转发请求，统一域名端口4.JSONP：只能处理get请求，兼容性好，现在基本不用五、Vue/React框架面试题（通用高频）1.虚拟DOM是什么？优势是什么？参考答案：虚拟DOM就是用JS对象模拟真实DOM结构，是对真实DOM的一层抽象描述。核心优势：1.真实DOM操作开销极大，虚拟DOM先在内存中对比差异（diff算法），只更新变化的DOM，减少DOM操作次数，提升性能2.跨平台，虚拟DOM可以渲染到浏览器、小程序、移动端，实现多端统一3.代码可维护性更高，框架接管DOM操作，开发者只需要关注数据变化2.说说Vue响应式原理/React状态更新原理Vue2响应式：基于Object.defineProperty劫持对象的get/set，数据读取时收集依赖，数据修改时触发更新；数组重写了七个变异方法实现监听。缺点是无法监听对象新增、删除属性，数组下标修改。Vue3响应式：基于ES6Proxy代理整个对象，支持监听新增、删除、数组下标修改，功能更全面，性能更好。React状态更新：通过setState/useState修改状态，触发组件重新渲染，通过虚拟DOMdiff对比更新视图，是数据驱动视图。3.组件通信的常用方式参考答案：1.父子组件：props/组件事件、emit2.祖孙多层级：provide/inject、透传属性3.兄弟/跨组件：全局状态管理（Vuex/Pinia、Redux）、事件总线4.简单跨组件：本地存储临时传值（少量场景）六、前端工程化面试题1.Webpack/Vite的区别？为什么现在多用Vite？参考答案：Webpack：基于打包编译，启动时会把所有文件打包编译一遍，项目越大启动越慢，热更新速度也会变慢，兼容性极好，适合大型传统项目。Vite：基于ESModule原生模块，开发环境不用打包，按需加载，启动速度极快；热更新只更新当前修改的文件，速度几乎无感。缺点是部分老插件不兼容，新项目基本全用Vite。2.前端性能优化的常用手段（面试必问）参考答案：整理项目落地的全套优化方案：1.资源优化图片压缩、webp格式、懒加载；JS/CSS压缩、去重、按需引入；使用CDN加载静态资源。2.打包优化路由懒加载、组件按需引入；分包打包，分离第三方依赖；去除无用代码、tree-shaking。3.渲染优化避免频繁DOM操作、减少回流重绘；长列表虚拟滚动；开启浏览器缓存。4.网络优化接口缓存、减少重复请求；并发请求合并；使用HTTP2/HTTPS。七、高频手写代码题（带完整答案）1.手写防抖函数场景：搜索框输入、窗口resize，频繁触发事件，延迟执行，只执行最后一次javascript

functiondebounce(fn,delay=300){

lettimer=null

returnfunction(...args){

if(timer)clearTimeout(timer)

timer=setTimeout(()=>{

fn.apply(this,args)

timer=null

},delay)

}

}2.手写节流函数场景：滚动监听、点击按钮防重复提交，固定时间只执行一次javascript

functionthrottle(fn,delay=300){

letflag=true

returnfunction(...args){

if(!flag)return

flag=false

setTimeout(()=>{

fn.apply(this,args)

flag=true

},delay)

}

}3.手写简单深拷贝javascript

functiondeepClone(obj){

//处理基础类型、null、undefined

if(obj===null||typeofobj!=='object')returnobj

//处理数组和对象

constnewObj=Array.isArray(obj)?[]:{}

for