Web前端开发工程师真实面试题及答案（无套路、接地气版）

Web前端开发工程师真实面试题及答案（无套路、接地气版）一、HTML基础面试题1.HTML5新增的常用标签有哪些？你日常用过哪些？参考答案：日常开发高频用的语义化标签：header、nav、main、section、article、aside、footer，主要用来替代以前全部用div的写法，让页面结构更清晰，利于SEO和浏览器解析。另外还有功能性标签：video、audio、canvas、input新增类型（date、number、tel）。语义化最大的好处：不用看class名，就能看懂页面结构，适配读屏设备，代码维护性更高。2.行内元素、块级元素、行内块元素的区别？参考答案：块级元素：独占一行，宽高、内外边距都能设置，比如div、p、h1、ul。行内元素：不独占一行，并排显示，不能设置宽高、上下边距，只能设置左右内外边距，比如span、a、em。行内块元素：兼具两者特点，并排显示，同时可以设置宽高和所有边距，比如img、input、button。3.说说你对HTML语义化的理解参考答案：简单说就是用正确的标签做正确的事。不用清一色div堆砌，根据内容功能选择对应标签。好处三点：一是页面结构清晰，代码可读性强；二是对SEO友好，搜索引擎能识别页面模块；三是兼容无障碍设备，方便残障人士使用读屏软件浏览页面。二、CSS核心面试题1.CSS选择器优先级排序？参考答案：优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式日常开发尽量少用!important，会打乱样式层级，后期很难维护，覆盖样式优先用更高优先级选择器。2.盒子模型是什么？标准盒和怪异盒的区别？参考答案：盒子模型就是元素的占位结构，由内容content、内边距padding、边框border、外边距margin四部分组成。标准盒模型（box-sizing:content-box）：元素设置的宽高只对应content，padding和border会撑大盒子，实际占位=宽高+padding+border。怪异盒模型（box-sizing:border-box）：设置的宽高是整个盒子的总尺寸，padding和border不会撑大盒子，内容区会自动缩小。现在项目基本全部用border-box，布局更可控。3.水平垂直居中的常用方法（实战常用）参考答案：1.Flex居中（最常用）：父元素设置display:flex;justify-content:center;align-items:center;简单兼容好，适配所有场景。2.定位居中：父相对定位，子绝对定位，top/left:50%，transform:translate(-50%,-50%);适合需要定位层级的场景。3.固定宽高元素：绝对定位+上下左右0+margin:auto;仅限宽高固定的情况。4.说说BFC是什么？触发条件和作用参考答案：BFC就是块级格式化上下文，可以理解为一个独立的渲染区域，区域内部的元素不会影响外部布局。常用触发条件：浮动元素、绝对定位元素、overflow不为visible、display为inline-block/flex等。实际作用：清除浮动、解决上下margin塌陷、阻止元素被浮动元素覆盖。5.浮动的问题以及清除浮动的方式参考答案：浮动问题：子元素浮动后脱离文档流，父元素高度塌陷，后续布局会错乱。清除浮动常用方法：1.父元素设置overflow:hidden;最简单，日常开发用最多；2.伪元素清除浮动（万能清除法），适合公共样式封装；3.额外空div加clear:both;冗余代码多，基本不用。三、JavaScript基础核心面试题1.var、let、const的区别参考答案：var：函数级作用域，存在变量提升，可重复声明，值可修改，容易污染全局变量，现在基本不用。let：块级作用域，有暂时性死区，不能重复声明，值可修改，适合定义变量。const：块级作用域，不能重复声明，声明后不能重新赋值（引用类型可改内部属性），日常优先用const，不变的变量全部用它。2.什么是暂时性死区？参考答案：let/const声明的变量，在代码块中，从代码块开始到变量声明之前的区域，就是暂时性死区。这个区域内不能提前使用变量，会直接报错，不像var只会undefined，有效避免了变量提升带来的bug。3.数据类型有哪些？区别是什么？参考答案：基本数据类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt，值存储在栈内存，赋值是拷贝原值，互不影响。引用数据类型：Object、Array、Function，值存在堆内存，变量存储的是地址，赋值是拷贝地址，修改一个会影响另一个。4.深拷贝和浅拷贝的区别？手写简单深拷贝参考答案：浅拷贝：只拷贝第一层属性，复杂引用类型还是共用一个地址，改新对象会影响原对象。Object.assign、扩展运算符都是浅拷贝。深拷贝：递归拷贝所有层级属性，新旧对象完全独立，互不影响。简单实用深拷贝：JSON.parse(JSON.stringify(obj))，缺点是无法拷贝函数、undefined、正则等。复杂场景用递归手写或lodash的cloneDeep。5.原型和原型链的理解参考答案：每个函数都有prototype（原型对象），每个实例对象都有__proto__，指向构造函数的prototype。原型链就是对象查找属性和方法的机制：自身没有就去__proto__找，层层向上，直到Ototype，最后是null，形成的链条就是原型链。核心作用：实现属性和方法的复用，节省内存。6.this指向问题（最常考）参考答案：this指向调用时的环境，和定义位置无关：1.普通函数调用：this指向window（浏览器）/global（node）；2.对象方法调用：this指向调用的对象；3.构造函数调用：this指向new出来的实例；4.箭头函数：没有自己的this，继承外层作用域的this，且无法修改；5.call/apply/bind：手动修改this指向。7.闭包是什么？优缺点和使用场景参考答案：闭包就是内层函数访问外层函数的变量，且外层函数执行结束后，变量不被销毁的现象。优点：可以保存私有变量、延长变量生命周期、实现数据私有化。缺点：变量常驻内存，容易造成内存泄漏。场景：防抖节流、封装私有方法、定时器回调、模块化开发。8.防抖和节流的区别和实战用法参考答案：防抖：触发事件后，延迟n秒执行，如果期间再次触发，重新计时，只执行最后一次。场景：搜索框输入、窗口resize。节流：固定时间内只执行一次，稀释执行频率，不管触发多少次，间隔时间到才执行。场景：滚动监听、鼠标移动、按钮频繁点击。四、ES6+高频面试题1.箭头函数和普通函数的区别参考答案：1.箭头函数没有this，继承外层this；普通函数this由调用方式决定；2.没有arguments，可用剩余参数替代；3.不能作为构造函数，不能new；4.没有原型对象；5.代码更简洁，适合回调场景，不适合对象方法、定时器this指向场景。2.Promise是什么？三种状态参考答案：Promise是解决异步回调地狱的方案，用来处理异步操作，让异步代码扁平化、更易读。三种状态：pending（进行中）、fulfilled（成功）、rejected（失败）。状态一旦改变就不可逆，只能从进行中变成功或失败。常用方法：then、catch、finally、all、race、allSettled。3.async/await的理解参考答案：async/await是Promise的语法糖，让异步代码写的像同步代码一样，可读性极强，是现在主流异步写法。async修饰函数，返回Promise；await只能在async函数内使用，会阻塞代码，等待Promise执行完成。异常处理必须用try/catch捕获。4.解构赋值、扩展运算符的常用场景参考答案：解构：快速提取对象、数组中的值，简化代码，日常接口返回数据解构取值最常用。扩展运算符：数组合并、对象合并、浅拷贝、函数传参，替代apply，代码更简洁。五、浏览器与网络面试题1.浏览器渲染页面的流程参考答案：1.解析HTML生成DOM树；2.解析CSS生成CSSOM样式树；3.结合DOM和CSSOM生成渲染树；4.布局（Layout）：计算元素位置和大小；5.绘制（Paint）：像素填充页面；6.合成（Composite）：分层展示页面。2.重排和重绘的区别？如何优化参考答案：重绘：元素样式改变（颜色、背景），不改变布局，只重新绘制，开销小。重排（回流）：元素宽高、位置、布局改变，浏览器重新计算整个页面布局，开销极大。重排一定会触发重绘，重绘不会触发重排。优化：集中修改样式、使用文档碎片、频繁操作DOM脱离文档流、用transform/opacity实现动画（只触发合成，不重排重绘）。3.HTTP1.1、HTTP2、HTTP3的区别参考答案：HTTP1.1：默认长连接，但是队头阻塞，一个请求卡住，后续请求都等待，同一域名并发数有限。HTTP2：二进制传输、多路复用（一个连接处理多个请求，解决队头阻塞）、头部压缩、服务器推送，大幅提升传输效率。HTTP3：基于QUIC协议，UDP传输，彻底解决队头阻塞，连接更快，弱网环境体验更好。4.跨域问题怎么解决？参考答案：跨域是浏览器同源策略限制，协议、域名、端口任一不同就跨域。常用解决方案：1.后端配置CORS（最主流，线上必备）；2.开发环境配置代理（vue/react项目dev代理）；3.Nginx反向代理；4.JSONP（只支持get请求，老旧项目用，现在基本不用）。5.浏览器缓存机制参考答案：分为强缓存和协商缓存，优先走强缓存。强缓存：Cache-Control、Expires，命中直接读本地缓存，不发请求，状态码200(frommemorycache/diskcache)。协商缓存：强缓存失效后，携带标识（Last-Modified/ETag）请求服务端，资源未更新返回304，更新则返回新资源。六、Vue核心面试题（Vue2/Vue3通用高频）1.Vue的双向绑定原理参考答案：Vue2：基于Object.defineProperty()劫持数据的getter/setter，数据变化更新视图，视图输入变化更新数据。缺点是无法监听新增、删除属性，数组部分方法需要重写劫持。Vue3：基于ES6Proxy代理整个对象，支持监听新增、删除属性、数组变化，监听范围更广，性能更好。2.Vue生命周期常用钩子和场景参考答案：beforeCreate：实例刚创建，无data和methods，基本不用；created：数据初始化完成，常用于此发初始请求、初始化数据；beforeMount：挂载前，可操作DOM但未渲染；mounted：DOM挂载完成，操作DOM、初始化定时器、监听事件；updated：数据更新后DOM更新完成；unmounted：组件销毁，清除定时器、解绑事件，防止内存泄漏。3.computed和watch的区别参考答案：computed：计算属性，有缓存，依赖值不变就不重新计算，适合简单数据计算、多对一，同步执行。watch：监听属性，无缓存，数据变化就触发，适合复杂逻辑、异步操作、一对多监听。4.Vue组件通信方式参考答案：父子通信：父传子props，子传父$emit；兄弟/跨级：Vue2用EventBus、Vuex；Vue3用mitt、pinia；祖孙跨级：provide/inject；全局状态：Vuex/Pinia（项目全局数据、登录态、菜单等）。5.Vue虚拟DOM和diff算法参考答案：虚拟DOM是真实DOM的JS对象快照，操作JS对象比操作真实DOM开销小，提升性能。diff算法：数据更新后，对比新旧虚拟DOM，只更新差异部分，不重新渲染整个页面。核心是同层比较，不跨层级，通过key精准识别节点，提升对比效率。七、工程化与实战面试题1.Webpack的核心概念参考答案：核心四要素：入口（entry）、输出（output）、模块加载器（loader）、插件（plugin）。loader：处理非JS文件，比如css-loader、babel-loader、file-loader；plugin：打包全过程的功能增强，比如html-webpack-plugin、压缩插件。2.前端性能优化你做过哪些？参考答案：1.资源优化：图片压缩、懒加载、雪碧图、使用webp格式；2.代码优化：防抖节流、减少DOM操作、避免无效重排重绘；3.打包优化：路由懒加载、组件按需引入、打包压缩、去除冗余代码；4.缓存优化：合理配置浏览器缓存、接口缓存；5.网络优化：使用CDN、开启gzip压缩、减少http请求次数。3.怎么处理前端内存泄漏？参考答案：常见场景：全局变量过多、定时器未清除、事件监听未解绑、闭包常驻内存、DOM引用未释放。解决方式：组件销毁时清除定时器、解绑事件、清空全局临时变量、避免无用闭包、手动释放DOM引用。八、手写代码高频面试题（最简实战版）1.手写防抖函数参考答案：javascript

functiondebounce(fn,delay){

lettimer=null;

returnfunction(...args){

if(timer)clearTimeout(timer);

timer=setTimeout(()=>{

fn.apply(this,args);

},delay)

}

}2.手写节流函数参考答案：javascript

functionthrottle(fn,interval){

letflag=true;

returnfunction(...args){

if(!flag)return;

flag=false;

setTimeout(()=>{

fn.apply(this,args);

flag=true;

},inter