前端基础面试题及答案一、HTML1. HTML5 新增了哪些特性语义化标签headerfooternavsectionarticleaside新表单类型emailnumberdaterangesearch等多媒体标签audiovideoCanvas / SVG 绘图本地存储localStoragesessionStorageWebSocket、地理定位、拖拽 API2.src和href的区别src引入资源并替换当前元素如imgscript会暂停页面解析href建立文档与资源的关联如alink不会暂停解析3. 行内元素和块级元素的区别块级元素行内元素是否独占一行是否宽高设置可以不可以常见标签div、p、h1-h6span、a、img二、CSS4. CSS 盒模型是什么标准盒模型box-sizing: content-boxwidth只包含内容区实际宽度 width padding border怪异盒模型 / IE 盒模型box-sizing: border-boxwidth包含内容 padding border实际宽度 width怪异盒模型因早期 IE 浏览器的非标准实现而得名现在通过box-sizing: border-box主动使用实际开发中反而更常用因为更直观好控制尺寸。5. BFC 是什么如何触发BFC块级格式化上下文是一个独立的渲染区域内部元素不影响外部。触发条件overflow不为visibledisplay: flex / inline-block / tableposition: absolute / fixedfloat不为none作用清除浮动、防止 margin 重叠6. 垂直居中的几种方式/* 方式一flex */.parent{display:flex;align-items:center;justify-content:center;}/* 方式二absolute transform */.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}/* 方式三absolute margin auto */.child{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:100px;height:100px;}7. CSS 选择器优先级从高到低!important 行内样式 ID 类/伪类/属性 标签 *用数字表示0, 1, 0, 0(ID) 0, 0, 1, 0(class) 0, 0, 0, 1(tag)8. flex 布局常用属性/* 容器属性 */display:flex;flex-direction:row | column;/* 主轴方向 */justify-content:center | space-between;/* 主轴对齐 */align-items:center | flex-start;/* 交叉轴对齐 */flex-wrap:wrap;/* 是否换行 *//* 子项属性 */flex:1;/* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */align-self:...;/* 单独设置交叉轴对齐 */order:1;/* 排列顺序 */三、JavaScript9.var/let/const的区别varletconst作用域函数作用域块级作用域块级作用域变量提升有值为 undefined有暂时性死区有暂时性死区重复声明允许不允许不允许可重新赋值是是否10. 什么是闭包函数内部可以访问外部函数变量即使外部函数已执行完毕。functioncounter(){letcount0;returnfunction(){returncount;};}constaddcounter();add();// 1add();// 2应用场景防抖节流、模块化、数据私有化11.和的区别严格相等类型和值都要相同宽松相等会进行类型转换常见陷阱0false// truefalse// truenullundefined// truenullundefined// false12. 事件循环Event LoopJavaScript 是单线程的通过事件循环处理异步执行同步代码调用栈执行所有微任务Promise.then、MutationObserver执行一个宏任务setTimeout、setInterval、I/O重复 2-3console.log(1);setTimeout(()console.log(2),0);Promise.resolve().then(()console.log(3));console.log(4);// 输出1 4 3 213. 深拷贝和浅拷贝浅拷贝只拷贝第一层引用类型仍共享内存Object.assign、扩展运算符深拷贝完整复制所有层级// 简单深拷贝不能处理函数、循环引用constdeepJSON.parse(JSON.stringify(obj));// 手写深拷贝functiondeepClone(obj){if(objnull||typeofobj!object)returnobj;if(Array.isArray(obj))returnobj.map(deepClone);returnObject.fromEntries(Object.entries(obj).map(([k,v])[k,deepClone(v)]));}14. 防抖和节流防抖debounce一段时间内只执行最后一次搜索框输入functiondebounce(fn,delay){lettimernull;returnfunction(...args){clearTimeout(timer);timersetTimeout(()fn.apply(this,args),delay);};}节流throttle一段时间内只执行第一次滚动事件functionthrottle(fn,interval){letlast0;returnfunction(...args){constnowDate.now();if(now-lastinterval){lastnow;fn.apply(this,args);}};}15. Promise 的三种状态pending初始状态fulfilled成功rejected失败状态只能从 pending → fulfilled 或 pending → rejected不可逆。constpnewPromise((resolve,reject){// 异步操作resolve(success);// 或 reject(error)});p.then(resconsole.log(res)).catch(errconsole.log(err)).finally(()console.log(done));四、浏览器/网络16. 从输入 URL 到页面展示经历了什么DNS 解析域名 → IP 地址建立 TCP 连接三次握手发送 HTTP 请求服务器返回响应浏览器解析 HTML构建 DOM 树解析 CSS构建 CSSOM 树合并为 Render Tree布局Layout→ 绘制Paint→ 合成Composite17. HTTP 缓存机制强缓存不请求服务器Cache-Control: max-age3600Expires: 过期时间协商缓存询问服务器是否更新Last-Modified/If-Modified-SinceETag/If-None-Match更精准优先使用未修改返回 304修改返回 200 新资源18. 跨域是什么如何解决同源策略协议 域名 端口 完全相同才算同源。解决方案CORS服务端设置Access-Control-Allow-Origin最常用代理开发环境 webpack devServer proxy 转发JSONP只支持 GET利用 script 标签不受同源限制postMessage跨 iframe 通信19. localStorage / sessionStorage / Cookie 区别CookielocalStoragesessionStorage大小4KB5MB5MB过期时间可设置永久关闭标签页清除随请求发送是否否作用域可跨标签页同源共享当前标签页20. XSS 和 CSRF 攻击XSS跨站脚本攻击注入恶意脚本防御对输入输出转义、Content-Security-PolicyCSRF跨站请求伪造伪造用户请求防御Token 验证、检查 Referer、SameSite Cookie五、Vue 基础21. v-if 和 v-show 区别v-if条件为假时不渲染 DOM适合切换不频繁的场景v-show始终渲染用display:none控制显隐适合频繁切换22. computed 和 watch 区别computedwatch有无返回值有无是否缓存是依赖不变不重新计算否适用场景依赖数据计算出新值监听数据变化执行副作用23. Vue 生命周期beforeCreate→created→beforeMount→mounted→beforeUpdate→updated→beforeDestroy→destroyed请求数据created或mountedDOM 操作mounted清理定时器beforeDestroy24. Vue2 响应式原理使用Object.defineProperty劫持对象属性的 getter/settergetter 时收集依赖Watchersetter 时通知依赖更新局限无法检测数组下标修改、对象新增/删除属性需用$setVue3 改用Proxy解决了上述问题。25. Vue 组件通信方式父 → 子props子 → 父$emit跨层级provide/inject兄弟组件EventBus 或 Vuex/Pinia全局状态Vuex / Pinia共 25 题涵盖 HTML / CSS / JavaScript / 浏览器网络 / Vue 基础