58道高频前端面试题及详细答案（实战接地气版）

58道高频前端面试题及详细答案（实战接地气版）一、HTML基础（1-8题）1、HTML5新增哪些常用标签？HTML5主要新增了语义化标签、媒体标签、表单标签，日常开发常用的有：语义化：header、footer、nav、aside、section、article、main媒体类：video、audio、canvas表单类：input新增date、time、number、email、tel等类型，还有datalist、progress语义化标签最大的作用是提升代码可读性、利于SEO、方便屏幕阅读器识别，替代了大量无意义的div布局。2、说说HTML语义化的理解简单说就是用合适的标签做合适的事，不用全部用div、span堆砌页面。好处：代码结构清晰，自己和同事维护更方便；搜索引擎可以精准识别页面模块，优化SEO；适配无障碍访问设备；移动端、多设备兼容性更好。3、行内元素、块级元素、行内块元素的区别块级元素：独占一行，可设置宽高、内外边距，默认宽度100%，比如div、p、h1-h6、ul、li行内元素：同行显示，不能设置宽高、上下边距，只能自适应内容宽度，比如span、a、em、i行内块元素：同行显示，同时支持设置宽高、内外边距，兼具两者优点，比如img、input、button4、img标签alt和title属性的区别alt：图片加载失败时显示的替代文本，同时用于无障碍识别，是必填属性，对SEO友好。title：鼠标悬浮在图片上时显示的提示文字，纯展示作用，不影响加载和SEO。5、HTML单标签有哪些？常见单标签：br、hr、img、input、meta、link、area、col。单标签无需闭合，浏览器可直接识别渲染。6、doctype的作用是什么？doctype是文档声明，用来告诉浏览器当前页面使用的HTML版本，让浏览器以标准模式渲染页面。如果不写doctype，浏览器会进入怪异模式，导致部分样式、布局出现兼容性错乱问题。7、iframe的优缺点优点：可以嵌入独立页面、视频、文档，实现页面内容复用，隔离内外页面的样式和JS环境。缺点：会增加页面加载请求、拖慢页面性能；不利于SEO；存在安全风险（点击劫持）；移动端适配差。日常开发尽量少用。8、表单提交默认行为怎么阻止？两种常用方式：1、表单提交事件中使用event.preventDefault()；2、提交按钮绑定点击事件，手动拦截默认提交。主要用于自定义表单校验、异步提交场景。二、CSS基础（9-20题）9、CSS选择器优先级规则优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式优先级不可叠加，同级样式后写覆盖前写，开发中尽量不用!important，避免样式难以维护。10、盒模型的组成，标准盒模型和IE盒模型区别盒模型由：内容区content、内边距padding、边框border、外边距margin四部分组成。标准盒模型（content-box）：元素实际宽度=width+padding+border+margin，width仅代表内容宽度。IE怪异盒模型（border-box）：元素实际宽度=width+margin，width包含content、padding、border。开发中统一设置border-box更方便布局。11、垂直居中的常用方法1、flex布局：父元素设置display:flex;justify-content:center;align-items:center;最简单常用，适配所有场景。2、定位居中：父相对定位，子绝对定位，top/left设为50%，transform:translate(-50%,-50%);自适应宽高。3、固定宽高元素：绝对定位+top/left/bottom/right=0，margin:auto;。12、flex常用属性及作用父容器属性：display:flex（开启弹性布局）、flex-direction（主轴方向）、justify-content（主轴对齐）、align-items（侧轴对齐）、flex-wrap（是否换行）。子元素属性：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基础宽度）、align-self（单独设置自身对齐方式）。13、BFC是什么？触发条件和作用BFC即块级格式化上下文，是浏览器独立的渲染区域，区域内元素布局不会影响外部元素。触发条件：浮动元素、绝对定位元素、overflow不为visible、display为inline-block/flex/grid等。作用：解决margin塌陷、margin重叠、浮动高度塌陷问题，实现元素布局隔离。14、margin塌陷问题及解决办法问题：父子块级元素、相邻兄弟块级元素，上下margin会合并成最大值，导致间距错乱。解决：给父元素开启BFC、设置padding/border、使用flex布局、统一单边间距。15、CSS浮动的优缺点，浮动塌陷怎么解决优点：早期实现横向布局、图文环绕效果。缺点：脱离标准文档流，导致父元素高度塌陷，影响后续布局。清浮动方案：父元素overflow:hidden；伪元素清浮动；父元素高度固定（不推荐）。现在基本用flex/grid替代浮动布局。16、position定位属性区别static：默认值，标准文档流，无定位效果。relative：相对自身原位置定位，不脱离文档流，保留占位。absolute：相对最近的非static父级定位，脱离文档流，不占位。fixed：相对浏览器窗口定位，固定不动，脱离文档流，常用于悬浮按钮、顶部导航。sticky：粘性定位，滚动时在relative和fixed之间切换，常用于表头吸顶。17、CSS3新特性有哪些圆角border-radius、阴影box-shadow、透明度opacity、变形transform、过渡transition、动画animation、flex布局、grid布局、媒体查询、calc计算属性等。18、重排和重绘的区别，如何优化重绘：元素样式改变（颜色、透明度），不改变布局，浏览器重新绘制像素，开销较小。重排（回流）：元素宽高、位置、布局改变，浏览器重新计算页面布局，开销极大，会触发连带重绘。优化：集中修改样式、使用class批量改样式、开启GPU加速、避免频繁获取DOM布局属性、脱离文档流修改元素样式。19、如何实现1px细线适配移动端移动端高清屏会将1px渲染成多倍像素，导致线条变粗。常用方案：伪元素+transform缩放，根据设备像素比缩放0.5px，实现真实1px线条。20、vw、vh、rem、em的区别em：相对父元素字体大小，层级嵌套容易混乱。rem：相对根标签html字体大小，适配统一，移动端主流适配方案。vw/vh：相对视口宽高，1vw=视口1%宽度，无需JS适配，纯CSS适配。三、JavaScript基础（21-40题）21、var、let、const的区别var：函数级作用域，存在变量提升，可重复声明，默认挂载window。let：块级作用域，有暂时性死区，不可重复声明，无挂载，可修改变量值。const：块级作用域，声明后不可修改（引用类型可改内部属性），必须初始化，常用于定义常量。22、变量提升和暂时性死区变量提升：JS执行前会先扫描代码，将var声明、函数声明提升到作用域顶部，赋值不提升。暂时性死区：let/const声明的变量，在声明前无法访问，否则报错，从代码块开始到变量声明结束的区间就是死区。23、JS数据类型有哪些基本数据类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt引用数据类型：Object（包含数组、对象、函数、正则等）基本类型存在栈内存，引用类型栈存地址、堆存数据。24、null和undefined的区别undefined：变量已声明未赋值、对象不存在的属性、函数无返回值，代表未定义。null：手动赋值的空值，代表空对象，主动清空数据时使用。25、==和===的区别==：宽松相等，会自动转换数据类型后比较值。===：严格相等，先比较类型，类型不同直接false，类型相同再比值，开发统一使用===。26、原型和原型链的理解每个函数都有prototype原型对象，每个实例都有__proto__属性，指向构造函数的原型。原型链：实例__proto__指向原型，原型__proto__指向父原型，层层向上直到Ototype，最终指向null，形成链式结构。作用：实现属性和方法的复用、继承。27、this指向问题总结普通函数调用：this指向window（浏览器）/global（node）。对象方法调用：this指向调用的对象。构造函数调用：this指向new创建的实例对象。箭头函数：没有自己的this，继承外层作用域的this，且无法修改。call/apply/bind：手动修改this指向。28、call、apply、bind的区别共同点：都可以修改函数this指向。call：参数逐个传递，立即执行函数。apply：参数以数组形式传递，立即执行函数。bind：参数逐个传递，返回新函数，不会立即执行，可延迟调用。29、闭包的概念、作用、优缺点闭包：内层函数访问外层函数的变量，外层函数执行结束后，变量不被销毁，这个内层函数就是闭包。作用：保存私有变量、实现变量常驻内存、避免全局变量污染、实现模块化。缺点：变量长期占用内存，容易造成内存泄漏，需要手动置空销毁。30、深浅拷贝的区别及实现方式浅拷贝：只拷贝第一层属性，深层引用类型共用同一内存，修改新对象深层数据会影响原对象。Object.assign、扩展运算符、数组slice都是浅拷贝。深拷贝：完全拷贝所有层级数据，新旧对象完全独立，互不影响。简单场景用JSON.parse(JSON.stringify())，复杂场景用递归手写深拷贝或lodash工具。注意：JSON方法无法拷贝函数、undefined、Symbol、正则。31、数组常用方法增删改查：push、pop、unshift、shift、splice、slice遍历迭代：forEach、map、filter、find、findIndex、some、every、reduce其他：sort排序、reverse反转、join拼接、includes判断存在区分：map/filter返回新数组，forEach无返回，reduce可累加计算。32、JS遍历for、forin、forof的区别for：基础循环，可遍历数组，支持break/continue，性能最好。forin：遍历对象可枚举属性，也可遍历数组（遍历下标），不推荐遍历数组，会遍历原型属性。forof：遍历可迭代对象（数组、字符串、Map、Set），遍历值而非下标，支持break/continue。33、Promise的理解及常用方法Promise是解决异步回调地狱的方案，有三种状态：pending等待、fulfilled成功、rejected失败，状态一旦改变不可逆。常用方法：then成功回调、catch失败回调、finally无论成败都会执行、all全部成功才成功、race谁先完成取谁结果、allSettled全部执行完毕返回结果。34、async/await的作用ES7语法，基于Promise封装，以同步写法执行异步代码，极大简化异步逻辑，代码更简洁易读。规则：async修饰函数，返回Promise；await只能在async函数内使用，等待异步执行完成。错误需要try/catch捕获。35、宏任务和微任务的区别，事件循环机制JS是单线程，通过事件循环处理异步任务。任务分为宏任务和微任务。宏任务：script整体代码、setTimeout、setInterval、AJAX、DOM事件。微任务：Promise.then/catch/finally、async/await、queueMicrotask。执行顺序：同步代码>所有微任务>一个宏任务>再清空所有微任务，循环往复。36、new关键字做了什么1、创建一个空的实例对象；2、将实例的__proto__指向构造函数的prototype；3、改变构造函数this指向为当前实例；4、执行构造函数代码，挂载属性方法；5、如果无返回对象，自动返回当前实例。37、防抖和节流的区别及应用场景防抖：触发事件后延迟执行，期间再次触发会重置计时，只执行最后一次。场景：搜索框输入、窗口resize。节流：固定时间内只执行一次，匀速触发。场景：滚动加载、鼠标移动、按钮频繁点击。38、Symbol的作用ES6新增唯一值类型，每次创建的Symbol值都不相等，可用于定义对象唯一键名，防止属性名冲突、保护私有属性。39、数组去重的常用方法1、ES6Set去重：[...newSet(arr)]，最简单，无法去重引用类型；2、双重循环去重；3、利用indexOf/includes遍历去重；4、对象键值对去重。40、内存泄漏的常见场景未清理的定时器、未解绑的DOM事件、闭包常驻内存、全局变量过多、废弃DOM节点未清空、循环引用未释放。解决：手动清除定时器、解绑事件、置空无用变量、避免滥用闭包。四、浏览器与网络（41-48题）41、浏览器渲染页面的流程1、解析HTML生成DOM树；2、解析CSS生成CSSOM样式树；3、结合两者生成渲染树；4、布局（重排）计算元素位置宽高；5、绘制（重绘）页面像素；6、合成图层展示页面。42、从输入网址到页面展示完整流程1、DNS域名解析，获取服务器IP；2、TCP三次握手建立连接；3、发送HTTP请求；4、服务器处理请求并返回响应数据；5、浏览器解析资源、渲染页面；6、TCP四次挥手断开连接。43、HTTP和HTTPS区别HTTP：超文本传输协议，明文传输，端口80，无加密、不安全、速度快。HTTPS：HTTP+SSL/TLS加密，密文传输，端口443，安全防劫持、防篡改，需要证书，有轻微性能损耗。44、HTTP1.0、1.1、2.0区别HTTP1.0：短连接，每次请求都要新建连接，效率低。HTTP1.1：默认长连接，支持管线化、缓存优化，是目前主流版本。HTTP2.0：二进制传输、多路复用（一个连接多请求）、头部压缩、服务器推送，大幅提升传输效率。45、GET和POST区别1、参数：GET参数拼接在地址栏，POST放在请求体；2、缓存：GET可缓存，POST默认不缓存；3、长度：GET有地址栏长度限制，POST无限制；4、安全性：GET参数暴露，安全性低，POST相对安全；5、用途：GET用于查询数据，POST用于提交数据。46、Cookie、localStorage、sessionStorage区别Cookie：容量小（4k），跟随请求自动发送服务器，可设置过期时间，会话级/持久化都支持。localStorage：永久本地存储（手动清空才失效），容量大（5M+），不跟随请求。sessionStorage：会话级存储，关闭页面/浏览器自动清空，仅当前页面有效。47、HTTP缓存机制分为强缓存和协商缓存。强缓存：Cache-Control、Expires，命中直接读本地缓存，不请求服务器。协商缓存：ETag/If-None-Match、Last-Modified/If-Modified-Since，强缓存失效后，携带标识请求服务器，资源未更新返回304，更新则返回新资源。48、跨域问题及解决方案跨域原因：浏览器同源策略，协议、域名、端口任一不同即跨域，限制前端读写跨域资源。常用解决方案：1、后端CORS跨域配置（主流）；2、本地代理（vue/react项目dev代理）；3、JSONP（仅支持GET）；4、nginx反向代理。五、Vue核心（49-56题）49、Vue双向绑定原理Vue2核心：数据劫持+发布订阅模式，通过Object.defineProperty劫持data数据的getter/setter，数据修改触发setter，通知订阅者更新视图，视图修改同步更新数据。Vue3改用Proxy代理整个对象，支持数组、新增属性劫持，解决了Vue2的响应式缺陷。50、Vue生命周期及常用钩子生命周期是组件从创建、挂载、更新、销毁的完整过程。常用钩子：created（组件创建完成，可请求接口）、mounted（DOM挂载完成，可操作DOM）、updated（数据更新完成）、beforeDestroy（销毁前，清除定时器/事件）。51、computed和watch的区别computed：计算属性，依赖缓存，依赖值不变不重新计算，适合复杂数据计算，支持读写。watch：监听属性，数据变化就执行，无缓存，适合异步操作、数据监听回调。52、Vue组件传值方式1、父子传值：父传子props，子传父$emit；2、多层嵌套：provide/inject；3、全局传值：Vuex/Pinia；4、兄弟组件：事件总线、状态管理；5、$parent/$refs直接获取实例。53、v-for和v-if优先级问题同一节点v-for优先级高于v-if，会先循环再判