Web前端真实面试题库（中初级·高频真题版）

Web前端真实面试题库（中初级·高频真题版）说明：本套面试题精选互联网企业主流面试真题，贴合实际业务场景，涵盖HTML、CSS、JavaScript、框架、工程化、性能优化、浏览器原理、实战场景等核心模块，适配应届生、1-3年前端开发者面试备考，无套路理论空话。一、HTML基础面试题（高频基础）1、说说你对HTML5新增语义化标签的理解？常用的有哪些？语义化的好处是什么？2、div、span、p标签的区别？块级元素和行内元素的区别，以及行内块的特性？3、HTML中的data-*自定义属性有什么用途？实际项目中怎么使用？4、iframe的优缺点？项目中什么场景下会用到，有哪些安全隐患？5、DOCTYPE的作用是什么？不写DOCTYPE会出现什么问题？6、简述HTML表单常用标签、表单验证原生属性，以及表单提交的默认行为？7、pre、code标签的作用，以及使用场景？二、CSS面试题（核心必考）1、CSS选择器优先级排序，以及权重计算规则！important有什么弊端？2、盒模型有几种？标准盒模型和IE怪异盒模型的区别，如何切换盒模型？3、如何实现垂直水平居中？写出至少3种常用方案，并说明各自优缺点和适配场景4、浮动的作用、塌陷问题怎么产生？清除浮动的常用方式及优劣对比5、BFC是什么？触发BFC的条件，以及BFC在项目中的实际应用6、flex布局常用属性有哪些？justify-content和align-items的区别，如何实现自适应等分布局？7、grid布局相比flex布局的优势，适合什么场景使用？8、CSS3动画transition、transform、animation的区别，如何实现流畅的过渡动画？9、响应式布局的实现方式？媒体查询、rem、vw/vh的区别和适配场景10、移动端1px边框问题如何解决？原理是什么？11、CSS层叠上下文、层叠等级是什么？什么情况下会出现元素覆盖错乱？12、如何实现文字溢出省略、多行文字溢出隐藏？三、JavaScript核心面试题（重中之重）1、基础语法与数据类型1、JS基本数据类型和引用数据类型有哪些？两者存储方式的区别？2、undefined和null的区别？==和===的区别，什么情况下0==false成立？3、typeof、instanceof的使用场景和局限性？如何精准判断任意数据类型？4、变量提升、函数提升的规则？var、let、const的区别，为什么推荐使用let/const？2、作用域与闭包1、什么是全局作用域、函数作用域、块级作用域？2、闭包是什么？闭包的特性、应用场景，以及闭包带来的内存问题如何解决？3、作用域链的执行机制，变量查找规则？3、原型与原型链1、原型、显式原型、隐式原型的关系？2、原型链的查找机制？如何实现继承？列举常用继承方案及优缺点3、new关键字的执行过程？手写new方法4、异步与事件循环1、同步、异步的区别？为什么JS需要异步机制？2、宏任务和微任务有哪些？事件循环执行顺序，结合代码举例说明3、Promise的状态、常用方法（then/catch/finally/all/race）及使用场景4、async/await的原理，和Promise的区别？如何处理异步错误？5、回调地狱是什么？如何层层优化异步代码？5、常用API与高频考点1、数组常用方法：map、forEach、filter、reduce、find的区别？哪些会改变原数组？2、深浅拷贝的区别？手写浅拷贝、深拷贝（基础版+进阶版）3、防抖和节流是什么？应用场景（搜索框、滚动、按钮防抖），手写核心代码4、this指向问题？普通函数、箭头函数、定时器、对象调用中this的区别5、call、apply、bind的区别，手写这三个方法6、ES6+常用特性：解构赋值、扩展运算符、Set、Map的使用场景7、Set和Map的区别，如何实现数组去重？四、浏览器原理与网络面试题1、从输入网址到页面展示，完整的浏览器渲染流程？2、DNS解析过程是什么？3、HTTP1.0、HTTP1.1、HTTP2、HTTP3的区别？4、HTTPS和HTTP的区别？HTTPS加密流程？5、GET和POST的区别？从参数、缓存、安全性、请求体多角度说明6、浏览器缓存机制？强缓存、协商缓存的规则和优先级7、页面重排和重绘的区别？如何减少重排重绘优化页面性能？8、跨域是什么？浏览器同源策略？常用跨域解决方案（CORS、代理、JSONP）对比9、Cookie、localStorage、sessionStorage的区别？各自存储大小、生命周期、应用场景10、session和token的区别？登录态如何维护？五、Vue框架面试题（主流必考）1、Vue2和Vue3的核心区别？项目中为什么升级Vue3？2、Vue双向绑定原理？Vue2数据劫持的缺陷，Vue3Proxy的优势？3、Vue生命周期有哪些？每个生命周期的使用场景？4、组件通信的所有方式？父子、兄弟、跨层级通信方案对比5、computed和watch的区别？各自适用场景，computed缓存原理？6、v-for和v-if为什么不建议一起使用？如何优化？7、Vue虚拟DOM是什么？diff算法的执行流程？8、key的作用是什么？key用index有什么弊端？9、Vue路由守卫有哪些？全局、独享、组件内守卫的使用场景？10、路由懒加载的原理和作用？11、Vuex/Pinia的核心概念？项目中如何合理管理全局状态？12、setup语法糖的特点？ref和reactive的区别？六、前端工程化与工具面试题1、webpack的核心概念？entry、output、loader、plugin的作用区别2、webpack打包流程是什么？如何优化打包速度和打包体积？3、vite和webpack的区别？vite为什么启动更快？4、npm、yarn、pnpm的区别？pnpm的优势？5、Git常用命令？分支管理流程（开发、测试、上线分支规范）6、ESModule和CommonJS的区别？七、性能优化与实战场景题（面试加分项）1、页面加载速度慢，你会从哪些维度排查和优化？2、首屏优化的具体方案？白屏问题如何解决？3、图片优化的常用方式？懒加载、webp、雪碧图的使用场景4、接口请求过多、请求卡顿如何优化？5、移动端适配常见问题及解决方案？6、项目打包后代码体积过大，如何瘦身优化？八、手写代码真题（面试必写）1、手写防抖、节流函数2、手写深浅拷贝3、手写call、apply、bind4、手写Promise核心逻辑5、手写数组去重、扁平化数组