Web前端高频面试题库（真实企业面试版）

Web前端高频面试题库（真实企业面试版）说明：本题库精选互联网大厂、中小厂前端真实面试高频题，覆盖初级、中级前端岗位，包含基础原理、实操、工程化、框架、性能优化、兼容性、场景题等核心模块，无冗余套话，贴合真实面试问答场景。一、HTML核心面试题基础问答题1.讲讲你对HTML语义化的理解，以及常用语义化标签有哪些？2.行内元素、块级元素、行内块元素的区别？各自有哪些典型标签？3.img标签的alt和title属性区别是什么？为什么alt属性必不可少？4.a标签的target属性有哪些值？_blank会有什么安全隐患，如何解决？5.什么是DOCTYPE？作用是什么？不写DOCTYPE会出现什么问题？6.HTML5新增的特性有哪些？列举常用新增标签和API7.表单标签中readonly和disabled的区别？8.说说H5本地存储的几种方式，区别和使用场景？9.什么是拖拽API？简单说明使用逻辑10.页面骨架屏的实现思路有哪些？场景实操题1.如何让一个div自适应屏幕宽高，同时保持固定宽高比？2.页面加载大量图片，如何通过HTML原生特性优化加载速度？3.实现一个简单的表单验证，原生HTML如何实现非空、长度校验？二、CSS核心面试题基础原理题1.CSS选择器优先级规则是什么？权重如何计算？2.详细说说标准盒模型和怪异盒模型的区别，如何切换？3.块级格式化上下文（BFC）是什么？触发条件和作用有哪些？4.清除浮动的方式有哪些？各自优缺点？5.position的常用属性值区别：static、relative、absolute、fixed、sticky6.display:none和visibility:hidden的区别？7.浮动的原理是什么？浮动会产生什么问题？8.CSS层叠上下文、层叠顺序是什么？z-index失效的原因有哪些？9.伪类和伪元素的区别？常用的伪类、伪元素有哪些？10.@import和link引入CSS的区别？布局高频题1.弹性布局Flex的常用属性，如何实现水平垂直居中？2.Grid布局的优势是什么？常用核心属性有哪些？3.多种CSS水平垂直居中的实现方式，对比优缺点4.如何实现两栏自适应布局、三栏自适应布局（中间自适应，左右固定）？5.响应式布局的实现方案有哪些？媒体查询的使用场景？进阶&性能题1.CSS动画transition和animation的区别？2.硬件加速是什么？如何开启？有什么利弊？3.CSS回流和重绘是什么？哪些操作会触发？如何优化？4.如何解决移动端1px边框问题？5.移动端适配方案：rem、vw/vh、flex布局各自的适用场景？三、JavaScript核心面试题（重中之重）基础语法&变量1.var、let、const的区别？各自的特性和使用场景？2.什么是变量提升？函数提升和变量提升的区别？3.暂时性死区是什么？4.JS的数据类型有哪些？如何判断数据类型？5.typeof、instanceof、Ototype.toString的区别？6.null和undefined的区别？7.0.1+0.2!==0.3的原因，如何解决浮点精度问题？原型&作用域&闭包1.讲讲你对原型、原型链的理解？2.构造函数、实例、原型三者的关系？3.什么是闭包？闭包的作用、优缺点、使用场景？4.作用域、作用域链是什么？5.全局作用域、函数作用域、块级作用域的区别？6.this的指向规则？不同场景下this分别指向什么？7.call、apply、bind的区别？手写实现这三个方法？异步JS&事件循环1.JS为什么是单线程？2.同步任务、异步任务的区别？宏任务和微任务有哪些？3.详细说说浏览器事件循环机制？4.Promise的状态、常用方法、优缺点？5.Promise.all、Promise.race、Promise.allSettled的区别和场景？6.async/await的原理是什么？和Promise的关系？7.如何解决回调地狱问题？8.定时器setTimeout为什么不准？数组&对象常用实操1.数组常用方法有哪些？哪些会改变原数组，哪些不会？2.map和forEach的区别？3.手写数组去重、扁平化、求和方法4.对象深拷贝和浅拷贝的区别？手写简易深拷贝？5.如何遍历对象的属性？进阶核心题1.什么是防抖和节流？区别和使用场景？手写实现？2.垃圾回收机制是什么？V8引擎的垃圾回收策略？3.什么是柯里化？函数柯里化的作用？4.模块化发展历程：IIFE、CommonJS、ES6Module区别？5.ES6常用新特性有哪些？重点说说解构、扩展运算符、Set/Map四、浏览器原理面试题1.从输入URL到页面渲染完成的完整流程？2.浏览器缓存机制？强缓存和协商缓存的区别？3.HTTP1.0、HTTP1.1、HTTP2、HTTP3的区别？4.HTTPS的加密流程？和HTTP的区别？5.跨域是什么？为什么会产生跨域？常用跨域解决方案？6.CORS跨域的简单请求和复杂请求区别？7.页面渲染流水线：解析HTML、CSS、生成DOM、CSSOM、渲染树、布局、绘制、合成8.前端常见安全问题：XSS、CSRF的原理和防御方式？9.cookie、sessionStorage、localStorage的区别？10.浏览器同源策略是什么？五、Vue框架高频面试题（Vue2+Vue3）Vue2核心1.Vue的双向绑定原理是什么？2.Object.defineProperty的缺点有哪些？3.Vue的生命周期有哪些？每个阶段的作用？4.父子组件生命周期执行顺序？5.computed和watch的区别和使用场景？6.v-if和v-for为什么不建议连用？优化方案？7.Vue组件通信方式有哪些？全部列举并说明适用场景？8.Vuex的核心概念？state、mutations、actions、getters区别？9.Vue路由守卫有哪些？全局、独享、组件内守卫的使用？10.路由懒加载的实现方式和作用？Vue3进阶1.Vue3相比Vue2的升级和优化点？2.Vue3双向绑定原理（Proxy）的优势？3.setup语法糖的特点？组合式API和选项式API的区别？4.ref和reactive的区别？为什么ref需要.value？5.Vue3常用组合式API：computed、watch、watchEffect区别？6.Pinia相比Vuex的优势？7.Vue3的生命周期钩子变化？8.如何解决Vue3响应式丢失问题？六、React高频面试题（可选）1.虚拟DOM的原理和优势？2.React组件类组件和函数组件的区别？3.Hooks的使用规则？常用Hooks使用场景？4.useState、useEffect、useRef、useMemo、useCallback作用？5.React的diff算法原理？6.受控组件和非受控组件区别？7.Redux的工作流程？七、前端工程化面试题1.Webpack的核心概念：入口、出口、loader、插件2.Webpack打包流程是什么？3.loader和plugin的区别？4.如何优化Webpack打包速度和打包体积？5.Vite相比Webpack的优势？原理是什么？6.什么是tree-shaking？生效条件？7.前端代码规范工具：ESLint、Prettier的作用和冲突解决？8.简述Git常用工作流和命令？八、性能优化高频面试题（必问）1.从页面加载、渲染、运行三个维度，说说前端性能优化方案？2.首屏加载速度慢如何排查和优化？3.图片优化的所有方案？4.代码层面的优化手段？5.如何做长列表优化？虚拟列表的实现原理？6.防抖节流在项目中的实际应用场景？7.分包、懒加载、预加载的区别和使用场景？九、手写代码面试题（实操必考）1.手写防抖、节流函数2.手写深拷贝3.手写call、apply、bind4.手写Promise、Promise.all5.手写数组去重、扁平化6.实现异步请求并发控制7.实现图片懒加载8.手写发布订阅模式9.手写柯里化函数10.