初级前端面试题及详细答案（真实面试版）

初级前端面试题及详细答案（真实面试版）一、HTML基础面试题1.说说HTML5新增的常用语义化标签，以及语义化的好处答案：常用语义化标签：header、nav、main、section、article、aside、footer、figure、figcaption。语义化的好处：代码结构清晰，可读性强，同事接手项目更容易看懂页面结构；利于搜索引擎优化，爬虫可以精准识别页面模块，区分导航、主体、侧边栏、页脚；适配屏幕阅读器，对残障用户更友好，提升页面可访问性；替代大量无意义的div，减少冗余代码。2.行内元素、块级元素、行内块元素的区别答案：块级元素：独占一行，宽高、内外边距都可以设置，默认宽度100%父级宽度。常见：div、p、h1-h6、ul、li。行内元素：不独占一行，横向排列，无法设置宽高、上下边距，只能设置左右内外边距。常见：span、a、em、i。行内块元素：兼具两者特点，横向排列，同时可以设置宽高、内外边距。常见：img、input、button。3.img标签的alt和title属性区别答案：alt：图片加载失败时显示的替代文本，主要用于无障碍适配和SEO，是img的必填属性。title：鼠标悬浮在图片上时显示的提示文字，纯交互体验属性，不影响加载和SEO。4.什么是同源策略？HTML5如何解决跨域问题答案：同源策略是浏览器的安全规则，协议、域名、端口三者全部相同才是同源，不同源的请求会被浏览器拦截。HTML5解决跨域常用方式：CORS跨域资源共享（后端配置响应头，前端直接正常请求）；JSONP，只能解决get请求跨域，兼容性好但不安全；postMessage解决不同窗口、iframe之间的跨域通信。二、CSS基础面试题1.CSS选择器优先级排序，以及权重规则答案：优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式。权重计算规则：行内样式：1000ID选择器：0100类、伪类、属性：0010标签、伪元素：0001权重数值大的优先生效，同级权重后面的样式会覆盖前面的。日常开发尽量不用!important，会导致样式难以维护。2.盒模型有几种？区别是什么？答案：分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型：元素设置的宽高仅为内容区宽高，padding、border会额外撑开元素，实际尺寸=width/height+padding+border。怪异盒模型：元素设置的宽高是整体尺寸，padding、border向内压缩内容区，不会撑开盒子，实际尺寸就是设置的width/height。开发中统一设置box-sizing:border-box，方便布局控尺寸。3.如何实现水平居中、垂直居中（常用方法）答案：水平居中：行内/行内块元素：父级设置text-align:center；块级元素：自身设置margin:0auto；flex布局：父级display:flex;justify-content:center。垂直居中：单行文本：line-height等于父级高度；flex布局（最常用）：父级display:flex;align-items:center；定位居中：父级相对定位，子级绝对定位，top:50%;left:50%;transform:translate(-50%,-50%)，适配宽高不固定元素。4.说说Flex布局常用属性答案：父容器属性：display:flex：开启弹性布局；flex-direction：主轴方向，row/column；justify-content：主轴对齐方式；align-items：交叉轴对齐方式；flex-wrap：是否自动换行。子元素属性：flex-grow：放大比例；flex-shrink：缩小比例；flex-basis：基准尺寸；align-self：单独设置自身对齐方式。5.清除浮动的方法和原理答案：浮动元素会脱离标准流，导致父级高度塌陷，需要清除浮动。常用方法：父级设置overflow:hidden；简单便捷，适合大部分场景；伪类清除浮动（企业常用）：给父类添加clearfix类，通过::after设置内容为空、块级、清除浮动，兼容性最好；额外空标签清除浮动：在浮动元素末尾加空div，设置clear:both，缺点是冗余标签多。6.CSS动画transition和animation的区别答案：transition：过渡动画，简单状态切换，需要触发条件（hover、点击、数据变化），只能实现从初始状态到结束状态的一次过渡，无关键帧。animation：关键帧动画，可自定义多段状态，支持循环播放、延迟、暂停，无需触发就能自动执行，适合复杂动画效果。三、JavaScript核心面试题（初级重点）1.var、let、const的区别答案：var：函数级作用域，存在变量提升，可重复声明，值可修改，全局声明会挂载到window；let：块级作用域，有变量提升但存在暂时性死区，不能重复声明，值可修改；const：块级作用域，有暂时性死区，不能重复声明，声明必须赋值，基本类型值不可改，引用类型可改内部属性。开发规范：优先用const，变量需要修改再用let，全程不用var。2.什么是变量提升？答案：JS代码执行前，浏览器会先扫描所有变量和函数声明，把声明提升到当前作用域最顶部，赋值留在原位置执行。var变量提升后初始值为undefined，let/const提升后进入暂时性死区，报错无法访问；函数声明整体提升，优先级高于变量提升。3.数据类型有哪些？如何判断数据类型答案：基本数据类型（7种）：string、number、boolean、null、undefined、symbol、bigint。引用数据类型：object（包含数组、对象、正则、日期等）、function。判断方式：typeof：适合判断基本类型，null、数组会识别为object，函数识别为function；Array.isArray()：精准判断数组；Ototype.toString.call()：精准判断所有数据类型，面试最标准写法。4.闭包是什么？优缺点和使用场景答案：闭包就是内层函数访问外层函数的变量，且外层函数执行结束后，变量不会被销毁，形成私有作用域。优点：可以保存私有变量、延长变量生命周期、避免全局变量污染。缺点：变量常驻内存，使用不当会造成内存堆积，容易引发内存泄漏。使用场景：防抖节流、封装私有方法、定时器回调、模块化开发。5.原型和原型链的理解答案：每个函数都有prototype原型对象，每个实例对象都有__proto__属性，指向构造函数的prototype。原型链就是对象查找属性和方法的机制：自身没有就往__proto__上找，层层向上查找，直到Ototype，最终为null，这条链式结构就是原型链。作用：实现方法和属性的复用，减少代码冗余，是JS实现继承的核心。6.异步JS理解？宏任务和微任务区别答案：JS是单线程，同步代码依次执行，异步代码不会阻塞主线程，等待同步代码执行完毕后再执行。宏任务：耗时较长的任务，整体执行优先级低。包含：script整体代码、setTimeout、setInterval、AJAX请求。微任务：优先级高于宏任务，当前宏任务执行完，立刻清空所有微任务。包含：Promise.then、async/await、queueMicrotask。执行顺序：同步代码>微任务>宏任务。7.Promise的理解和三种状态答案：Promise是解决异步回调地狱的方案，让异步代码更扁平化、可读性更高。三种状态：pending：初始等待状态；fulfilled：成功状态，触发then；rejected：失败状态，触发catch。状态一旦改变就不可逆，支持链式调用，常用方法：then、catch、finally、all、race。8.async/await的作用答案：是Promise的语法糖，让异步代码写法接近同步代码，大幅提升可读性。async修饰函数，返回值是Promise；await只能在async函数内使用，会阻塞当前代码，等待Promise执行完毕再继续执行后续代码。错误捕获需要配合try/catch使用。9.数组常用方法（分类记忆）答案：增删改查：push、pop、unshift、shift、splice、slice遍历迭代：forEach、map、filter、find、some、every、reduce其他：concat拼接、join转字符串、sort排序、reverse反转重点区分：map/filter返回新数组，不改变原数组；forEach无返回值；splice会修改原数组，slice不修改原数组。10.防抖和节流的区别及使用场景答案：防抖：频繁触发事件，只在最后一次触发后延迟执行一次。场景：搜索框输入联想、窗口resize、表单输入校验。节流：频繁触发事件，固定时间内只执行一次，稀释执行频率。场景：滚动监听、鼠标移动、按钮重复点击、页面加载进度监听。四、前端工程化与框架基础（Vue2/Vue3初级必问）1.Vue的双向绑定原理答案：Vue2核心：数据劫持+发布订阅模式，通过Object.defineProperty劫持数据的get/set，数据变化时通知视图更新，视图修改时同步更新数据。Vue3核心：使用Proxy代理整个对象，相比defineProperty可以监听数组变化、新增属性、删除属性，兼容性更好、功能更强。2.v-if和v-show的区别答案：v-if：动态创建和销毁DOM节点，切换开销大，初始渲染开销小。适合切换频率低、一次性显示隐藏的场景。v-show：通过CSSdisplay控制显示隐藏，DOM节点始终存在，切换开销小，初始渲染开销大。适合频繁切换显示隐藏的场景。3.Vue组件传值方式（初级常用）答案：父子传值：父传子props，子传父$emit；兄弟传值：事件总线（$bus）、pinia/vuex；跨层级：provide/inject、状态管理。4.说说Vue生命周期常用钩子答案：onBeforeMount/mounted：挂载前/挂载完成，mounted可操作DOM、发起接口请求；onBeforeUpdate/updated：数据更新前后；onBeforeUnmount/unmounted：销毁前/销毁完成，可清除定时器、解绑事件，防止内存泄漏。五、面试高频手写/实操简答题1.页面加载过程答案：DNS解析域名，获取服务器IP；建立TCP连接，发送HTTP请求；服务器返回HTML、CSS、JS资源；浏览器解析HTML生成DOM树，解析CSS生成CSSOM树；结合生成渲染树，进行布局、绘制、分层；加载执行JS，完成页面渲染和交互。2.如何优化页面加载速度答案：资源优化：图片压缩、使用webp格式、懒加载图片和路由；代码优化：压缩打