2025年高频前端基础面试题及答案

2025年高频前端基础面试题及答案HTML部分：Q：为什么要使用语义化HTML？常见的语义化标签有哪些？A：语义化HTML通过标签本身的含义传递内容结构，而非仅依赖样式。核心优势包括：提升可访问性（屏幕阅读器能正确解析）、优化SEO（搜索引擎更易理解内容层级）、增强代码可维护性（开发者快速识别内容模块）。常见语义化标签如：`<header>`：页面或区域的头部`<nav>`：导航链接集合`<main>`：页面主要内容（唯一）`<article>`：独立可复用的内容（如文章）`<section>`：文档中的主题性分组`<aside>`：侧边栏或补充内容`<footer>`：页面或区域的底部Q：meta标签有哪些常见用途？请列举3个以上实际开发中常用的meta标签及其作用。A：meta标签用于定义HTML文档的元信息，不直接显示内容但影响页面行为。常用类型：1.`<metacharset="UTF-8">`：声明文档字符编码，避免乱码（现代推荐UTF-8）。2.`<metaname="viewport"content="width=device-width,initial-scale=1.0">`：控制移动端视口缩放，确保页面适配手机屏幕（关键属性包括width、initial-scale、maximum-scale）。3.`<metahttp-equiv="Cache-Control"content="no-cache">`：通过HTTP头部控制缓存策略（部分浏览器已弃用，推荐用HTTP响应头）。4.`<metaname="description"content="页面描述">`：供搜索引擎抓取的页面摘要，影响SEO排名。5.`<metaname="robots"content="index,follow">`：指示搜索引擎是否索引页面及跟随链接（content可选值：noindex、nofollow）。CSS部分：Q：CSS盒模型有哪几种？如何通过属性切换？标准盒模型与IE盒模型的核心区别是什么？A：CSS盒模型分为标准盒模型（content-box）和替代盒模型（border-box），通过`box-sizing`属性切换（默认值为content-box）。标准盒模型：元素总宽度=content宽度+padding+border+margin，其中width/height仅指定content区域的尺寸。IE盒模型（border-box）：元素总宽度=width（包含content+padding+border）+margin，即设置的width/height直接控制内容+内边距+边框的总尺寸。实际开发中，为统一不同浏览器表现，常用`{box-sizing:border-box;}`重置盒模型。Q：什么是BFC（块格式化上下文）？触发BFC的条件有哪些？列举2个BFC的实际应用场景。A：BFC是CSS中块级元素的渲染区域，内部元素按文档流排列，与外部区域互不影响。触发条件包括：根元素（HTML）浮动元素（float不为none）绝对定位/固定定位（position为absolute或fixed）行内块元素（display:inline-block）弹性容器（display:flex/inline-flex）或网格容器（display:grid/inline-grid）overflow值不为visible（如hidden、auto、scroll）应用场景：1.解决浮动元素导致的父容器高度塌陷：父元素触发BFC后，会包含内部浮动子元素的高度。2.避免相邻块级元素的margin重叠：两个相邻的BFC元素不会发生margin合并（如将其中一个包裹在BFC容器中）。Q：flex布局中，flex:1的完整写法是什么？flex-shrink、flex-grow、flex-basis的默认值分别是什么？A：flex:1是`flex-grow:1;flex-shrink:1;flex-basis:0%`的简写。各属性默认值：flex-grow：0（不放大）flex-shrink：1（允许缩小）flex-basis：auto（基于内容自动分配空间）当容器空间足够时，flex-grow控制剩余空间的分配比例；空间不足时，flex-shrink控制元素收缩比例（收缩量=元素收缩系数×元素宽度/总收缩系数×总宽度）。flex-basis定义元素在分配空间前的初始大小，优先于width属性（除非flex-basis为auto且元素设置了width）。JavaScript部分：Q：如何理解原型链？请用代码说明构造函数、实例、原型对象之间的关系。A：原型链是JavaScript实现继承的核心机制。每个函数（构造函数）有一个`prototype`属性（原型对象），原型对象默认包含`constructor`属性指向构造函数。当通过`new`创建实例时，实例的`__proto__`（隐式原型）指向构造函数的`prototype`。若访问实例的属性/方法，会先查找自身，若不存在则通过`__proto__`递归查找原型链，直到`Ototype.__proto__`（值为null）为止。示例代码：```javascriptfunctionPerson(name){=name;}Ptotype.sayHi=function(){console.log(`Hi,I'm${}`);};constp=newPerson('Alice');console.log(p.__proto__===Ptotype);//trueconsole.log(Ptotype.constructor===Person);//trueconsole.log(Ptotype.__proto__===Ototype);//true（原型链向上）console.log(Ototype.__proto__);//null（原型链终点）```Q：闭包的定义是什么？它的形成条件和实际应用场景有哪些？可能带来什么问题？A：闭包是函数与其词法作用域的组合，允许函数访问其定义时所在的外层作用域变量，即使该函数在外部作用域执行。形成条件：1.函数嵌套（内部函数定义在外部函数中）；2.内部函数引用了外部函数的变量/参数。应用场景：模块化封装（避免变量污染全局作用域）；事件处理函数保留状态（如循环中绑定事件时保存当前索引）；函数柯里化（分步传递参数，延迟计算）；实现私有变量（如通过闭包模拟类的私有方法）。潜在问题：闭包会导致外部作用域的变量无法被垃圾回收，过度使用可能引发内存泄漏（需在不需要时手动解除引用）。Q：简述JavaScript事件循环（EventLoop）的执行机制，区分宏任务（MacroTask）和微任务（MicroTask）的常见类型，并给出一个具体的执行顺序示例。A：事件循环是JavaScript处理异步代码的核心机制，主要步骤：1.执行栈中的同步代码依次执行，将同步任务执行完毕；2.执行所有微任务队列中的任务（MicroTaskQueue）；3.更新渲染（仅浏览器环境，可能触发重排/重绘）；4.从宏任务队列（MacroTaskQueue）中取出一个任务执行，重复步骤2-4。宏任务类型：script（整体代码）、setTimeout、setInterval、setImmediate（Node.js）、I/O操作、UI事件；微任务类型：Promise.then()/catch()/finally()、MutationObserver（监听DOM变化）、process.nextTick（Node.js）。示例代码执行顺序：```javascriptconsole.log('1:同步代码');setTimeout(()=>{console.log('4:setTimeout（宏任务）');},0);Promise.resolve().then(()=>{console.log('3:Promise.then（微任务）');});console.log('2:同步代码');```输出顺序：1→2→3→4。Q：async/await的底层原理是什么？它与Promise的关系是什么？如何用Promise模拟async/await？A：async/await是Promise的语法糖，本质是基于Promise的异步流程控制。`async`函数返回一个Promise，函数内部通过`await`暂停执行，等待右侧Promise解决后继续。若`await`后不是Promise，会被包装为Promise.resolve()。与Promise的关系：async/await通过提供器（Generator）和Promise实现，将异步代码写成同步形式，提升可读性。模拟实现（简化版）：```javascriptfunctionasyncToGenerator(generatorFunc){returnfunction(){constgen=generatorFunc.apply(this,arguments);returnnewPromise((resolve,reject)=>{functionstep(key,arg){letresult;try{result=gen[key](arg);}catch(err){returnreject(err);}if(result.done){returnresolve(result.value);}returnPromise.resolve(result.value).then(val=>step('next',val),err=>step('throw',err));}step('next');});};}//使用示例constasyncFunc=asyncToGenerator(function(){consta=yieldPromise.resolve(1);constb=yieldPromise.resolve(a+2);returnb;});asyncFunc().then(res=>console.log(res));//输出3```浏览器与网络部分：Q：浏览器的渲染流程分为哪些步骤？哪些操作可能导致CSS阻塞渲染？如何优化？A：渲染流程核心步骤：1.解析HTML提供DOM树（DocumentObjectModel）；2.解析CSS提供CSSOM树（CSSObjectModel）；3.合并DOM和CSSOM提供渲染树（RenderTree，仅包含可见元素）；4.计算每个节点的布局（Layout，确定尺寸、位置）；5.绘制（Paint，填充颜色、阴影等视觉属性）；6.合成（Composite，将各层绘制结果合并为最终屏幕图像）。CSS阻塞渲染的情况：默认情况下，外部CSS文件会阻塞渲染（浏览器需等待CSSOM提供才能构建渲染树）。若CSS文件过大或加载缓慢，会延迟首次渲染时间。优化方法：压缩CSS文件（减小文件体积）；使用媒体查询（mediaquery）加载非关键CSS（如print、screenand(max-width:600px)），这类CSS不会阻塞渲染；内联关键CSS（首屏所需的CSS）到HTML中，减少外部请求；延迟加载非关键CSS（通过`rel="preload"`预加载，或动态添加link标签）。Q：什么是跨域？浏览器的同源策略如何定义？常见的跨域解决方案有哪些？各自的优缺点是什么？A：跨域是指浏览器限制脚本访问不同源（协议、域名、端口任意一个不同）的资源。同源策略是浏览器的安全基石，防止XSS、CSRF等攻击。常见解决方案及优缺点：1.CORS（跨域资源共享）：原理：服务器在响应头中添加`Access-Control-Allow-Origin`等字段，明确允许的源。优点：标准方案，支持GET/POST等所有HTTP方法，前端无需额外代码（只需后端配置）。缺点：需后端配合，旧浏览器（如IE8-9）需使用XDomainRequest兼容。2.JSONP（JSONwithPadding）：原理：利用`<script>`标签无同源限制的特性，后端返回包裹在回调函数中的JSON数据。优点：兼容性好（支持所有浏览器），实现简单。缺点：仅支持GET请求，存在XSS风险（需严格校验回调函数名），无法获取HTTP状态码。3.postMessage（跨窗口通信）：原理：通过`window.postMessage()`在不同窗口（如iframe、子窗口）间发送消息，接收方通过`message`事件监听。优点：支持跨域、跨窗口，可传递复杂数据（结构化克隆）。缺点：仅适用于窗口间通信，无法直接用于AJAX请求。4.反向代理（如Nginx）：原理：前端请求同源的代理服务器，由服务器转发请求到目标域名，响应后返回给前端。优点：前端无感知，无需修改代码，安全性高（服务器端控制）。缺点：增加服务器负载，需额外配置代理规则。框架基础（Vue/React）：Q：Vue3的响应式原理与Vue2有何不同？Vue3如何实现对数组和对象的响应式监听？A：Vue2使用`Object.defineProperty`监听对象属性，存在以下限制：无法检测对象属性的添加或删除（需手动调用`Vue.set`/`vm.$set`）；无法监听数组的大部分方法（仅重写了`push`/`pop`等7种方法）；深层对象需递归遍历才能监听（性能损耗）。Vue3改用`Proxy`代理整个对象，优势：直接监听对象/数组的所有操作（包括属性添加/删除、数组索引修改）；无需递归初始化（惰性代理，访问深层属性时才创建代理）；支持Map、Set等更多数据类型。具体实现：通过`newProxy(target,handler)`创建代理对象，`handler`中拦截`get`、`set`、`deleteProperty`等操作。当读取属性时（`get`），收集依赖（将当前活跃的副作用函数存入依赖集合）；当修改属性时（`set`），触发依赖（执行所有收集的副作用函数更新视图）。Q：React中useState的更新是同步还是异步的？在什么情况下会表现出同步？A：useState的更新在多数情况下是异步的（批量更新优化），这是为了提高性能（合并多次状态更新，减少重新渲染次数