Web前端面试试题及详细答案（真实职场版）

Web前端面试试题及详细答案（真实职场版）一、HTML基础面试题1、HTML5新增了哪些常用标签？语义化标签的优势是什么？参考答案：常用新增语义化标签：header、nav、main、section、article、aside、footer、figure、figcaption。新增功能性标签：video、audio、canvas、input新增类型（date、email、number）等。语义化标签优势：代码结构清晰，可读性强，团队协作维护更方便；有利于搜索引擎爬虫识别页面结构，提升SEO效果；适配屏幕阅读器，提升网站无障碍访问性；摒弃纯div布局，结构与样式分离更彻底。2、行内元素、块级元素、行内块元素的区别？参考答案：块级元素：独占一行，可设置宽高、内外边距，默认宽度100%父级宽度。常见：div、p、h1-h6、ul、li、section。行内元素：同行显示，不能设置宽高、上下边距，仅支持左右内外边距。常见：span、a、em、i、b。行内块元素：同行显示，同时支持设置宽高、内外边距。常见：img、input、button。3、DOCTYPE的作用是什么？不写会有什么问题？参考答案：DOCTYPE是文档类型声明，用来告诉浏览器当前页面使用的HTML版本，指导浏览器以标准模式解析渲染页面。如果不写DOCTYPE，浏览器会进入怪异模式（混杂模式），页面布局、样式解析会出现兼容性问题，比如盒模型计算异常、元素对齐错乱、图片默认边距等问题，导致页面在不同浏览器显示不一致。二、CSS核心面试题1、标准盒模型和怪异盒模型的区别？如何切换？参考答案：标准盒模型（content-box）：元素实际宽度=width+padding+border+margin。width仅代表内容区宽度，内边距和边框会撑开元素整体尺寸。怪异盒模型（border-box）：元素实际宽度=width+margin。width包含内容区、内边距、边框，设置的宽高为元素最终可视尺寸，不会被padding、border撑开。切换方式：通过box-sizing:border-box;开启怪异盒模型，日常开发中全局统一设置该属性，避免布局错乱。2、CSS定位方式有哪些？各自特点和使用场景？参考答案：static（默认静态定位）：正常文档流，无定位偏移，top/left等属性无效，页面普通元素默认状态。relative（相对定位）：相对于自身原始位置偏移，不脱离文档流，原有位置保留，常用作子绝对定位的父级容器。absolute（绝对定位）：脱离文档流，相对于最近的已定位父级（非static）偏移，无适配父级则相对于根元素，常用于弹窗、悬浮按钮。fixed（固定定位）：脱离文档流，相对于浏览器视口固定，页面滚动时位置不变，常用于顶部导航、底部悬浮栏、回到顶部按钮。sticky（粘性定位）：结合相对和固定定位，滚动到阈值前正常流动，达到阈值后固定，常用于列表吸顶、表格表头固定。3、Flex布局常用属性及实战用法参考答案：开启弹性布局：父元素设置display:flex;父容器常用属性：flex-direction：主轴方向（row横向、column纵向）；justify-content：主轴对齐（center居中、space-between两端对齐、space-around均分）；align-items：交叉轴对齐（center居中、stretch拉伸、top/bottom对齐）；flex-wrap：是否换行（wrap自动换行、nowrap不换行）。子元素常用属性：flex：缩放比例（flex:1自动均分剩余空间）；align-self：单独设置自身交叉轴对齐方式；order：调整元素排列顺序，数值越小越靠前。实战场景：自适应列表、居中布局、导航栏、等分卡片布局等，是目前最常用的布局方案。4、CSS垂直水平居中的常用方法参考答案：方法1：Flex居中（最常用）父元素设置：display:flex;justify-content:center;align-items:center;优点：代码简洁，适配不定宽高元素，兼容性好。方法2：绝对定位+transform子元素：position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);优点：不依赖父级布局，适配所有不定宽高元素。方法3：绝对定位+宽高固定计算子元素宽高固定时，top/left/right/bottom设为0，margin:auto；适合固定尺寸元素。5、BFC是什么？触发条件和作用参考答案：BFC即块级格式化上下文，是浏览器的一块独立渲染区域，区域内部元素的布局不会影响外部元素，外部也不会影响内部。常见触发条件：根元素html；元素设置浮动（非none）；overflow不为visible（auto、hidden、scroll）；display为flex、inline-block、table-cell；position为absolute、fixed。实际作用：解决浮动元素父级高度塌陷问题；解决上下元素margin重叠问题；实现自适应两栏、三栏布局。三、JavaScript基础面试题1、var、let、const的区别参考答案：var：函数级作用域，存在变量提升，可重复声明、可重新赋值，声明变量可挂载到window，容易造成变量污染，目前基本不再使用。let：块级作用域（{}内有效），存在暂时性死区，不可重复声明、可重新赋值，不挂载window，适合定义可变变量。const：块级作用域，不可重复声明、声明后不可修改地址，基础类型值不可变，引用类型（对象、数组）内部属性可修改，适合定义常量。暂时性死区：代码块内，变量声明前无法使用该变量，避免变量提升带来的混乱。2、JS数据类型有哪些？如何判断数据类型？参考答案：基本数据类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt。引用数据类型（1种）：Object（包含普通对象、数组、函数、正则等）。类型判断方法：typeof：适合判断基本类型（除null），null会返回object，数组/对象/正则均返回object；instanceof：判断引用类型，可区分数组、对象、函数，无法判断基本类型；Ototype.toString.call()：最精准，可判断所有数据类型，是项目中通用的精准判断方式。3、原型和原型链的理解参考答案：每个函数都有prototype（显式原型），每个实例对象都有__proto__（隐式原型），实例的__proto__指向构造函数的prototype。原型的作用：存放公共方法和属性，实现方法共享，节省内存，避免每个实例重复创建相同方法。原型链：当访问对象的属性或方法时，自身没有就会顺着__proto__向上查找，直到Ototype，终点为null，这条查找链路就是原型链。开发中常用于实现继承、封装公共工具方法。4、this指向问题总结参考答案：this的指向在调用时确定，和定义位置无关，核心规则：普通函数直接调用：this指向window（浏览器环境）；对象方法调用：this指向调用该方法的对象；构造函数调用：this指向new创建的实例对象；箭头函数：无自身this，继承外层作用域的this，且无法修改；apply/call/bind：可手动修改this指向。5、call、apply、bind的区别参考答案：三者作用一致：修改函数内部this指向。call：立即执行函数，参数逐个传递（fn.call(this,1,2,3)）；apply：立即执行函数，参数以数组形式传递（fn.apply(this,[1,2,3])）；bind：不会立即执行，返回一个修改this后的新函数，可后续调用，支持参数预设。实战场景：数组最值计算、继承实现、事件回调修改this指向。6、异步JS理解：宏任务和微任务、事件循环参考答案：JS是单线程语言，为避免阻塞代码，通过事件循环处理异步任务，任务分为宏任务和微任务。宏任务：script整体代码、setTimeout、setInterval、AJAX请求、UI渲染。微任务：Promise.then/catch/finally、async/await、queueMicrotask。执行顺序：先执行同步代码；清空所有微任务队列；执行一次宏任务；重复循环以上步骤，即事件循环机制。7、async/await和Promise的理解参考答案：Promise是异步编程解决方案，解决了传统回调地狱问题，三种状态：pending（进行中）、fulfilled（成功）、rejected（失败），状态一旦改变不可逆。async/await是Promise的语法糖，让异步代码写法同步化，代码更简洁易懂。核心特点：async修饰的函数，返回值一定是Promise对象；await只能在async函数内使用，会阻塞后续代码，等待Promise状态完成；异常捕获需要搭配try/catch使用。四、前端工程化&框架基础（Vue为主）1、Vue双向绑定原理参考答案：Vue2核心：数据劫持+发布订阅模式，通过Object.defineProperty()劫持数据的getter/setter。流程：初始化数据时，递归遍历data所有属性，劫持getter、setter；页面渲染时，触发数据getter，收集当前组件依赖（Watcher）；数据修改时，触发setter，通知订阅的Watcher更新视图，实现数据驱动视图。Vue3改用Proxy实现，可监听数组、新增属性、删除属性，解决了Vue2数据劫持的诸多缺陷。2、Vue生命周期及常用钩子参考答案：生命周期是组件从创建、挂载、更新到销毁的完整过程，常用核心钩子：created：组件创建完成，数据已初始化，DOM未生成，可发起接口请求、初始化数据；mounted：DOM挂载完成，页面渲染完毕，可操作DOM、初始化定时器、监听事件；updated：数据更新后DOM重新渲染完成；beforeUnmount：组件销毁前，清除定时器、解绑事件，防止内存泄漏；unmounted：组件销毁完成。3、Vue组件通信方式参考答案：父子通信：父传子props，子传父$emit；兄弟/跨级通信：Vue2事件总线（$bus）、Vuex/Pinia状态管理；深层跨级：provide/inject；简单跨组件：$attrs/$listeners。项目中复杂全局状态（用户信息、权限、主题）统一用Pinia/Vuex，简单父子传参用props和$emit。4、v-for和v-if为什么不建议一起使用？如何优化？参考答案：Vue解析优先级：v-for优先级高于v-if。如果一起使用，会先循环遍历所有元素，再判断条件隐藏部分元素，造成无效循环，浪费性能。优化方案：优先通过computed计算属性过滤数据，提前筛选出需要渲染的列表，再进行v-for循环；条件为页面级控制时，在外层标签使用v-if，内层使用v-for。5、Vuekey的作用参考答案：key是虚拟DOM的唯一标识，用于diff算法对比新旧节点。作用：精准识别节点，避免节点复用错误，提升diff更新效率，防止列表渲染错乱、表单数据错乱、动画异常等问题。注意：禁止使用index作为key，列表增删时index会变化，导致节点匹配错乱，推荐用后端返回的唯一id。五、浏览器&网络面试题1、浏览器输入URL到页面渲染完成的全过程参考答案：DNS解析：将域名解析为服务器IP地址；建立TCP连接：三次握手建立可靠连接；发送HTTP请求：浏览器向服务器请求资源；服务器响应：服务器返回HTML、CSS、JS等资源；关闭TCP连接：四次挥手释放连接；页面解析渲染：解析HTML生成DOM树、解析CSS生成CSSOM树，合成渲染树，布局、绘制、重排重绘；执行JS：解析执行JS代码，完成页面交互绑定。2、重排和重绘的区别？如何优化？参考答案：重排（回流）：元素布局、尺寸、位置发生变化，浏览器需要重新计算页面布局，开销极大。常见：修改宽高、边距、定位、新增删除DOM。重绘：元素样式（颜色、背景、透明度）变化，不改变布局，仅重新绘制像素，开销较小。优化方案：批量修改DOM，避免频繁操作；使用文档碎片、虚拟DOM减少真实DOM操作；频繁动画使用transform、opacity，不触发重排；避免逐行修改样式，统一修改class类名。3、HTTP和HTTPS区别？HTTPS原理参考答案：区别：HTTP明文传输，端口80，无加密、不安全、易被劫持篡改；HTTPS是HTTP+SSL/TLS加密传输，端口443，数据加密、安全、防劫持、防窃听。HTTPS加密原理：结合对称加密和非对称加密，握手阶段用非对称加密传递密钥，传输阶段用对称加密传输数据，兼顾安全性和传输效率。4、GET和POST请求区别参考答案：参数位置：GET参数拼接在URL地址栏，POST参数放在请求体；长度限制：GET有URL长度限制，传输数据量小；POST无长度限制，可传大量数据、文件；缓存性：GET可被浏览器缓存，POST默认不缓存；安全性：GET参数暴露在地址栏，安全性低；POST参数隐藏，相对安全；使用场景：查询数据用GET，提交、修改、上传数据用POST。六、实战手写代码面试题1、手写防抖函数题目场景：输入框搜索、窗口resize，防止频繁触发事件参考答案：javascript

//防抖：触发事件后，延迟n秒执行，期间再次触发重置计时

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,interval=300){

letflag=true;

returnfunction(...args){

if(!flag)return;

flag=false;

setTimeout(()=>{

fn.apply(this,args);

flag=true;

},int