初级前端面试题（含详细接地气答案）

初级前端面试题（含详细接地气答案）一、HTML基础（高频5题）1.说说你对HTML5语义化标签的理解，常用的有哪些？参考答案：语义化简单说就是标签见名知意，不用看代码内容，光看标签就能知道这部分是干嘛的。以前写页面基本全用div，浏览器和搜索引擎分不清哪是头部、哪是侧边栏、哪是正文，语义化标签就是为了解决这个问题。常用语义化标签：header：页面/模块头部nav：导航栏main：页面主体内容（唯一）section：内容区块，用来划分页面模块article：独立完整的内容，比如文章、帖子aside：侧边栏、附属内容footer：页面/模块底部好处：代码结构清晰、方便团队维护、对SEO友好、适配屏幕阅读器，利于无障碍访问。2.div和span的区别？参考答案：核心区别就是块级元素和行内元素的区别：div是块级元素：独占一行，默认宽高可以设置，用来搭建页面大的结构模块span是行内元素：不独占行，同行可以放多个，默认宽高无效，只用来包裹文字、小范围样式调整日常开发口诀：大结构用div，文字微调用span。3.行内元素、块级元素、行内块元素的区别？参考答案：块级元素：独占一行，宽高、内外边距都能设置，默认宽度100%父级宽度。常见：div、p、h1-h6、ul、li行内元素：同行排列，不独占行，宽高、上下边距无效，只能改左右边距。常见：span、a、i、em行内块元素：结合两者优点，同行排列，同时可以设置宽高、内外边距。常见：img、input、button4.a标签的target属性常用值有哪些？参考答案：_self：默认值，在当前页面跳转_blank：新标签页打开链接，日常开发最常用_parent：在父级窗口打开_top：在顶级窗口打开，多用于跳出iframe嵌套5.图片alt和title属性的区别？参考答案：alt：图片加载失败时显示的替代文字，也是搜索引擎抓取图片的依据，必写，提升SEO和无障碍体验title：鼠标悬浮在图片上时显示的提示文字，可选写，纯提升用户体验二、CSS核心基础（高频8题）1.CSS选择器优先级顺序？权重怎么算？参考答案：优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式权重计算（日常开发够用，不用记复杂规则）：!important：无穷大（尽量不用，会打乱样式层级，难维护）行内样式：1000ID选择器：100类、伪类、属性选择器：10标签、伪元素选择器：1权重高的样式覆盖权重低的，同级权重后面写的覆盖前面的。2.盒模型是什么？标准盒模型和怪异盒模型的区别？参考答案：所有HTML元素都可以看成一个盒子，由内容content、内边距padding、边框border、外边距margin四部分组成，这就是盒模型。两者核心区别：宽度计算方式不同标准盒模型（content-box）：元素实际宽度=width+padding+border，width只代表内容区宽度怪异盒模型（border-box）：元素实际宽度=设置的width，padding和border会向内压缩内容区，不会撑大盒子现在项目基本全局设置box-sizing:border-box，不用手动算宽高，开发更方便。3.怎么实现水平居中、垂直居中？（常用最简方案）参考答案：现在开发优先用flex，简单兼容好，不用写老式复杂代码。万能居中方案（父盒子设置）：PlainText

display:flex;

justify-content:center;/*水平居中*/

align-items:center;/*垂直居中*/块级元素水平居中（固定宽）：margin:0auto;4.浮动的作用、问题、清除浮动的方法？参考答案：浮动最初用来实现文字环绕图片，早期用来做页面横向布局，现在基本被flex、grid替代。浮动带来的问题：父元素高度塌陷（子元素浮动后脱离文档流，父盒子识别不到子元素高度，高度变为0）常用清除浮动方法（实用2种）：伪类清除（项目最常用）：给父类加clearfix伪类，代码复用性高父元素设置overflow:hidden;简单快捷，适合简单布局5.display:none和visibility:hidden的区别？参考答案：display:none：彻底隐藏，不占页面空间，不渲染，绑定的事件失效visibility:hidden：视觉隐藏，保留页面空间，位置还在，只是看不见，事件依然可以触发6.flex常用属性有哪些？分别干嘛用？参考答案：flex是弹性布局，适配移动端、自适应布局首选，分为容器属性和子项属性。父容器常用：display:flex：开启弹性布局flex-direction：主轴方向（行/列）justify-content：主轴对齐（水平为主）align-items：侧轴对齐（垂直为主）flex-wrap：是否自动换行子元素常用：flex:1：自动平分剩余空间，日常超级常用align-self：单独控制单个子元素对齐方式7.相对定位、绝对定位、固定定位的区别？参考答案：relative相对定位：相对于自身原来的位置偏移，不脱离文档流，原来的位置还占着，常用作父级定位参照absolute绝对定位：相对于最近的已定位父级偏移，脱离文档流，不占原有位置，父级没定位就相对于根节点fixed固定定位：相对于浏览器窗口定位，脱离文档流，页面滚动位置不变，常用于顶部导航、返回顶部按钮8.什么是BFC？简单说作用参考答案：BFC就是块级格式化上下文，可以理解为一个独立的渲染区域、独立的布局环境，区域内的元素不会影响外部布局。常用作用：清除浮动、解决margin塌陷、阻止元素被浮动元素覆盖。触发方式：overflow不为visible、开启flex布局、绝对定位等。三、JavaScript核心基础（必考12题）1.var、let、const的区别？参考答案：现在开发完全不用var，统一用let/const。var：函数级作用域，存在变量提升，可重复声明，容易出bug，淘汰let：块级作用域，不能重复声明，无变量提升（暂时性死区），用于可变变量const：块级作用域，声明后不能修改基本数据类型值，引用类型可以改内部属性，用于常量、声明对象数组开发规范：能用const就用const，需要修改再用let。2.JS基本数据类型有哪些？参考答案：一共8种，分为基本类型和引用类型基本数据类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt引用数据类型（1种）：Object（包含对象、数组、函数、正则等）3.null和undefined的区别？参考答案：undefined：未定义。变量声明未赋值、函数无返回值、对象不存在的属性，都是undefinednull：空对象。是手动赋值的空值，代表主动清空变量简单记：自动出现的空是undefined，手动设置的空是null。4.什么是变量提升？参考答案：JS代码执行前，浏览器会先扫描代码，把var变量声明、函数声明提升到当前作用域最顶部。var声明的变量提升后值为undefined，所以会出现「先使用后声明不报错，值为undefined」的情况，这也是var的最大坑点，let/const没有变量提升，更安全。5.深拷贝和浅拷贝的区别？怎么实现简单深拷贝？参考答案：针对对象、数组这类引用类型：浅拷贝：只拷贝一层，内层引用数据还是共用同一个地址，改新对象内层数据会影响原对象深拷贝：完全拷贝所有层级，新旧对象彻底独立，修改互不影响初级最简单深拷贝方法：JSON.parse(JSON.stringify(对象))缺点：不能拷贝函数、undefined、正则，日常普通数据对象完全够用。6.==和===的区别？参考答案：==：宽松相等，会自动隐式转换数据类型，只对比值是否相等===：严格相等，先对比类型，再对比值，类型不一样直接false开发规范：一律用===，避免隐式转换带来的诡异bug。7.数组常用方法有哪些？（区分改原数组和不改原数组）参考答案：改变原数组（慎用）：push、pop、shift、unshift、splice、sort、reverse不改变原数组（常用，推荐）：map、filter、forEach、find、some、every、reduce、slice、concat简单用途：map：遍历返回新数组，用于数据加工filter：过滤数组，筛选符合条件的数据forEach：单纯遍历，无返回值find：查找第一个符合条件的项8.箭头函数和普通函数的区别？参考答案：箭头函数没有自己的this，继承外层作用域的this，不会被call、apply、bind改变不能作为构造函数，不能new没有arguments对象代码更简洁，适合回调函数、数组遍历注意：事件回调、对象方法不建议用箭头函数，this会指向错误。9.this指向简单总结（初级够用）参考答案：普通函数调用：this指向window（浏览器）对象方法调用：this指向调用这个方法的对象构造函数new调用：this指向新创建的实例对象箭头函数：this指向外层作用域的this，自身不绑定this10.什么是闭包？闭包的作用和缺点？参考答案：闭包定义：内层函数访问外层函数的变量，并且内层函数被外部使用，就形成了闭包。作用：保留私有变量、延长变量生命周期、避免全局变量污染。缺点：变量常驻内存，容易造成内存占用过高，使用不当会内存泄漏。11.同步和异步的区别？常见异步场景？参考答案：同步：代码从上到下依次执行，上一行没走完，下一行等着，会阻塞代码异步：不会阻塞代码，耗时任务后台执行，主线程继续往下走，执行完再回调前端常见异步：定时器、AJAX请求、文件读写、DOM事件、Promise、async/await12.Promise三种状态和作用参考答案：Promise是为了解决回调地狱，让异步代码更规整、可读性更强。三种状态（状态一旦改变就不可逆）：pending：初始等待中fulfilled：成功状态，触发thenrejected：失败状态，触发catch四、综合基础面试题（实操类5题）1.页面加载过程简单说一下？参考答案：浏览器解析HTML，生成DOM树解析CSS，生成CSSOM样式树DOM树+CSSOM树结合，生成渲染树布局（计算元素位置宽高）绘制（把页面画出来）2.重排和重绘的区别？怎么优化？参考答案：重绘：元素样式改变（颜色、背景），不改变布局，只重新画页面，开销小重排（回流）：元素宽高、位置、布局改变，浏览器重新计算整页布局，开销极大简单优化：批量修改样式、脱离文档流修改、避免频繁获取DOM样式3.什么是跨域？怎么解决跨域？参考答案：浏览器同源策略限制，协议、域名、端口任意一个不同，就是跨域，阻止前端请求后台数据。常用解决方式：后端配置CORS跨域（项目最常用）开发环境配置代理（vue/react项目dev代理）JSONP（只支持get请求，老旧方案）4.说说你对