Web前端开发工程师高频面试题及详细答案（真实面试版）

Web前端开发工程师高频面试题及详细答案（真实面试版）一、HTML核心面试题1.说说HTML5新增的特性，日常项目常用哪些？参考答案：HTML5主要新增了语义化标签、多媒体能力、表单新特性、本地存储、画布绘图等功能，我日常开发用得最多的是语义化标签和表单属性。1）语义化标签：header、nav、main、section、article、footer。最大作用是结构清晰、利于SEO、方便移动端适配和代码维护，替代了以前全用div堆砌的写法。2）多媒体标签：audio、video，项目中做视频播放、音频播报不用再依赖第三方插件，原生就能实现基础播放、暂停、进度控制。3）表单新增属性：placeholder、required、readonly、disabled、autofocus，还有email、tel、number等新input类型，能快速实现基础表单校验，减少JS代码。4）本地存储：localStorage、sessionStorage，用来缓存用户配置、登录状态、页面临时数据，比cookie存储容量大、使用更方便。5）其他：canvas绘图、svg矢量图、拖拽API，做数据可视化、拖拽排序场景会用到。2.行内元素、块级元素、行内块元素的区别？参考答案：这三类元素核心区别在换行规则、宽高设置、内外边距，日常布局经常用到。1）块级元素：div、p、h1-h6、ul、li独占一行，默认宽度100%父级宽度，可以设置宽、高、margin、padding，常用于页面结构布局。2）行内元素：span、a、em、i不独占一行，同行排列，不能设置宽高，上下margin无效、上下padding视觉生效但不占位，只适合包裹文字、修饰内容。3）行内块元素：img、input、button结合两者优点，同行排列，同时可以设置宽高、内外边距，是布局中最灵活的一类元素。3.什么是语义化HTML？为什么要用？参考答案：语义化就是让标签自带含义，写代码的时候就能看出这部分结构是导航、是头部还是底部，而不是清一色的div。核心好处三点：1）代码可读性高：团队协作时，新人一眼能看懂页面结构，不用逐行看样式和JS；2）利于SEO：搜索引擎爬虫能精准识别页面模块，提升网页收录和排名；3）适配无障碍设备：屏幕阅读器可以识别语义标签，帮助视障用户浏览网页。二、CSS核心面试题1.CSS选择器优先级规则？如何计算？参考答案：优先级从高到低固定顺序：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式日常计算不用记复杂权重，记住简单规则即可：1）权重分级：行内(1000)、ID(100)、类/伪类(10)、标签(1)2）权重累加不进位：多个类选择器叠加，优先级也不会超过一个ID选择器；3）优先级相同时，后写的样式覆盖先写的；4）!important优先级最高，项目中尽量少用，会打乱样式层级，难以维护。2.盒子模型有几种？区别是什么？参考答案：标准盒子模型（content-box）和IE怪异盒子模型（border-box），核心区别是宽高的计算范围。1）标准盒模型box-sizing:content-box设置的width/height只对应内容区，元素实际宽度=width+padding+border+margin。日常布局容易出现尺寸超出预期的问题。2）怪异盒模型box-sizing:border-box设置的width/height是元素整体尺寸，内容区宽度会自动缩减，实际宽度=设定的width。现在所有项目都会全局设置border-box，布局更可控，不用手动计算尺寸。3.浮动的原理、问题及清除浮动的方法参考答案：浮动最初是用来实现文字环绕图片，后来被用来做横向布局，现在基本被flex、grid替代。浮动特性：元素脱离标准文档流，向左/向右停靠，同级浮动元素同行排列。浮动带来的问题：父元素高度塌陷、子元素浮动后父级高度为0，后续标准流元素会顶上来，布局错乱。常用清除浮动方法（项目实用）：1）伪类清除（最常用）：给父元素加.clearfix伪类，无副作用、兼容性好；2）父元素设置overflow:hidden；简单快捷，适合普通布局；3）额外空div加clear:both；冗余代码多，基本不推荐。4.Flex常用属性及居中方案参考答案：Flex是现在主流的一维布局方案，兼容性极好，适配移动端和PC端。容器常用属性：display:flex（开启弹性布局）、flex-direction（主轴方向）、justify-content（主轴对齐）、align-items（侧轴对齐）、flex-wrap（是否换行）。子项常用属性：flex、flex-grow、flex-shrink、align-self。万能居中（最常用）：父元素设置：display:flex;justify-content:center;align-items:center;一行代码搞定水平垂直居中，比定位、浮动居中更简单稳定。5.定位的几种方式及区别参考答案：position五个属性：static、relative、absolute、fixed、sticky。1）static：默认值，标准文档流，top/left等定位属性无效；2）relative：相对自身原位置定位，不脱离文档流，原位置保留，常用于给子绝对定位做父级参照；3）absolute：相对最近的非static父级定位，脱离文档流，原位置不保留，用于弹窗、图标悬浮；4）fixed：相对浏览器视口定位，脱离文档流，页面滚动位置不变，用于顶部导航、回到顶部、悬浮按钮；5）sticky：粘性定位，滚动到阈值时固定，常用于列表吸顶、表格表头固定。三、JavaScript基础高频题1.var、let、const的区别参考答案：核心区别在作用域、变量提升、重复声明、是否可修改四个点，现在项目完全弃用var，统一用let/const。1）作用域：var是函数作用域，let/const是块级作用域（{}内有效），解决了var全局污染的问题；2）变量提升：var存在变量提升，声明前调用返回undefined；let/const有暂时性死区，声明前调用直接报错；3）重复声明：var允许重复声明；let/const不允许重复声明；4）赋值修改：let可修改可重新赋值；const声明后不能重新赋值，但引用类型（对象、数组）内部属性可以修改。最佳实践：默认用const，需要修改变量再用let。2.数据类型有哪些？如何判断数据类型？参考答案：JS一共8种数据类型：基本类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt引用类型（1种）：Object（包含数组、函数、普通对象、正则等）常用判断方法（项目实用）：1）typeof：适合判断基本类型（除了null），typeofnull会返回object（历史bug），无法区分数组和对象；2）Array.isArray()：专门判断数组，最准确；3）Ototype.toString.call()：万能精准判断，能区分所有数据类型，包括null、数组、正则、日期；4）instanceof：判断引用类型的原型关系，适合判断自定义对象、实例。3.原型和原型链的理解参考答案：原型是JS实现继承和共享方法的核心，所有函数都有prototype（显式原型），所有对象都有__proto__（隐式原型）。1）每个构造函数的prototype是原型对象，存放所有实例共享的方法和属性，避免重复创建，节省内存；2）实例对象的__proto__指向构造函数的prototype；3）原型链：当访问对象的属性/方法时，先在自身查找，找不到就顺着__proto__往上找，直到Ototype，终点是null，这条查找链路就是原型链。项目中常用：封装公共方法挂载到原型上，实现全局复用。4.作用域、作用域链、闭包的理解及闭包应用场景参考答案：1）作用域：变量的可访问范围，分为全局作用域、函数作用域、块级作用域；2）作用域链：内层作用域可以访问外层作用域的变量，外层不能访问内层，变量查找从内到外逐级查找；3）闭包：内层函数引用外层函数的变量，外层函数执行结束后，变量不被销毁，这个内层函数就是闭包。闭包核心作用：保留变量、私有化变量、延长变量生命周期。实际应用场景：防抖节流、定时器封装、私有变量、循环绑定事件存索引、柯里化。注意缺点：滥用闭包会导致内存占用过高，造成内存泄漏，不用时需要手动置空。5.同步、异步、宏任务、微任务及事件循环机制参考答案：JS是单线程语言，同一时间只能做一件事，为了不阻塞页面，引入同步异步和事件循环。1）同步代码：逐行执行，执行完再执行下一行，阻塞代码；2）异步代码：耗时任务放入后台执行，不阻塞主线程，执行完成后进入任务队列；任务队列分为宏任务和微任务：宏任务：script整体代码、setTimeout、setInterval、AJAX、DOM事件；微任务：Promise.then/catch/finally、async/await、queueMicrotask；事件循环执行顺序（必考）：先执行所有同步代码→清空所有微任务→执行一个宏任务→再清空微任务，循环往复。6.async/await和Promise的理解参考答案：Promise是解决异步回调地狱的方案，async/await是Promise的语法糖，让异步代码像同步代码一样直观。Promise三种状态：pending（进行中）、fulfilled（成功）、rejected（失败），状态一旦改变不可逆。常用方法：then、catch、finally、Promise.all、Promise.race，适合处理多个异步请求。async/await特点：1）async修饰函数，返回值一定是Promise；2）await只能在async函数内使用，会阻塞代码，等待Promise执行完成；3）异常需要用try/catch捕获，避免程序报错终止。项目中所有异步请求基本都用async/await写法，代码可读性远优于原生Promise链式调用。7.防抖和节流的原理及使用场景参考答案：防抖节流都是用来限制高频触发事件的执行次数，优化页面性能，减少浏览器压力。1）防抖：触发事件后，延迟一段时间执行，如果期间再次触发，重新计时。多次触发，只执行最后一次。场景：输入框搜索、窗口resize、鼠标移入移出。2）节流：固定时间内只执行一次，不管触发多少次。固定频率执行。场景：滚动加载、页面拖拽、按钮高频点击、鼠标移动。四、ES6+高频面试题1.箭头函数和普通函数的区别参考答案：1）this指向不同：普通函数this指向调用者；箭头函数没有自己的this，继承外层作用域的this，彻底解决this指向混乱问题；2）不能作为构造函数：箭头函数不能new，没有原型；3）没有arguments：箭头函数没有arguments对象，需要用剩余参数...args代替；4）不能绑定this：call、apply、bind无法改变箭头函数的this指向。日常开发：普通函数适合方法定义、构造函数；箭头函数适合回调、异步函数。2.解构赋值、扩展运算符的用法参考答案：解构赋值快速从数组、对象中取值，简化代码，项目中高频使用。对象解构：可以按需取值、设置默认值、重命名，适配后端返回数据；数组解构：快速交换变量、快速取值。扩展运算符...作用：1）数组浅拷贝、数组合并；2）对象合并、对象浅拷贝；3）函数剩余参数、展开参数列表。3.Set、Map的作用和场景参考答案：Set和Map是ES6新增的数据结构，弥补数组和对象的不足。1）Set：无序、不重复的集合，核心作用数组去重，支持交集、差集运算；场景：列表去重、筛选唯一数据。2）Map：键值对集合，键可以是任意类型（对象、数组、函数），普通对象键只能是字符串/Symbol；场景：复杂数据映射、状态存储、高频数据查询。五、浏览器与网络基础1.从输入网址到页面渲染完成的全过程参考答案：1）DNS解析：域名解析为服务器IP地址；2）TCP三次握手：建立可靠连接；3）发送HTTP请求：携带请求头、参数、cookie等信息；4）服务器处理请求：后端接口处理逻辑，返回HTTP响应报文；5）浏览器接收响应：解析HTML、CSS、JS资源；6）构建DOM树、CSSOM树，生成渲染树；7）布局（回流）、绘制（重绘）、合成图层；8）页面展示，TCP四次挥手断开连接。2.回流和重绘的区别？如何优化？参考答案：1）重绘：元素样式改变（颜色、背景），不改变尺寸和位置，浏览器重新绘制页面，开销较小；2）回流（重布局）：元素宽高、位置、布局改变，浏览器需要重新计算整个页面布局，开销极大；回流一定会触发重绘，重绘不会触发回流。优化方案：1）批量修改样式，不要逐行修改；2）使用class统一控制样式，减少内联样式修改；3）频繁操作DOM先隐藏，修改完成再显示；4）使用transform、opacity实现动画，只会触发合成，不会回流重绘。3.Cookie、localStorage、sessionStorage区别参考答案：1）存储大小：Cookie4KB左右，Storage5MB左右；2）有效期：Cookie可设置过期时间，默认会话结束失效；localStorage永久存储，手动清除才失效；sessionStorage页面关闭立即失效；3）请求携带：Cookie每次HTTP请求都会自动携带，用于身份校验；Storage不会参与请求；4）使用场景：Cookie存登录态、token；localStorage存长期配置、缓存数据；sessionStorage存临时页面数据。六、前端性能优化（面试高频必问）1.你项目中做过哪些前端性能优化？参考答案：我日常项目从加载、渲染、代码、网络、用户体验五个维度做优化，都是落地可验证的方案：1）资源加载优化：图片懒加载、图片压缩、使用webp格式；静态资源CDN加速；打包开启gzip压缩；