Web前端真实职场面试题（无模板、贴合企业实战）

Web前端真实职场面试题（无模板、贴合企业实战）整套面试题适配初级-中级前端岗位，均为一线企业高频提问，去除书面化套话，贴合真实面试口语，涵盖基础核心、样式布局、JS核心、浏览器网络、工程化、场景实战、手写代码七大模块，附带详细参考答案。一、HTML基础面试题1、HTML5新增了哪些常用语义化标签？实际项目中你怎么用？参考答案：常用语义化标签：header、nav、main、section、article、aside、footer。项目使用规范：页面头部用header，导航栏用nav，主体内容包裹在main里；独立的内容模块用section，完整可复用的内容卡片用article；侧边栏、辅助信息用aside；页面底部版权、备案信息用footer。优势：提升代码可读性，方便团队协作，同时利于搜索引擎抓取页面结构，优化SEO。2、行内元素、块级元素、行内块元素的区别？各自有哪些常用标签？参考答案：块级元素：独占一行，宽高、内外边距均可设置，默认宽度100%父级宽度。常见：div、p、h1-h6、ul、li、section。行内元素：不独占一行，并排显示，宽高无法手动设置，仅水平方向内外边距生效。常见：span、a、em、i、b。行内块元素：兼具两者特点，并排显示，可设置宽高、内外边距。常见：img、input、button。3、img标签的alt和title属性有什么区别？参考答案：alt：图片加载失败时的替代文本，主要用于无障碍适配、SEO优化，是必填属性。title：鼠标悬浮在图片上时展示的提示文字，仅做交互提示，非必填。二、CSS核心面试题1、CSS选择器优先级规则是什么？如何计算？参考答案：优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式。计算规则：不存在进制叠加，只比较权重等级。比如多个类选择器，权重也低于一个ID选择器；开发中尽量不用!important，避免样式层级混乱、难以维护。2、浮动的作用、塌陷问题怎么产生？有哪些清除浮动的方法？参考答案：浮动作用：让块级元素横向并排排列，早期用于页面布局。塌陷原因：父元素没有设置高度，子元素设置浮动后脱离标准文档流，父元素无法被撑开，导致高度塌陷。常用清除浮动方法：1、父级设置overflow:hidden；简单高效，适合大多数场景；2、伪元素清除浮动：给父元素添加clearfix类，通过::after伪元素设置clear:both，兼容性最好，项目最常用；3、额外新增空标签，设置clear:both，代码冗余，不推荐使用。3、Flex布局常用属性，怎么实现水平垂直居中？参考答案：父容器常用属性：display:flex、justify-content（水平对齐）、align-items（单行垂直对齐）、flex-wrap（是否换行）、gap（间距）。子元素常用属性：flex、align-self、justify-self。水平垂直居中（最常用）：父元素设置display:flex;justify-content:center;align-items:center;。4、BFC是什么？触发条件和实际用途？参考答案：BFC即块级格式化上下文，是页面独立的渲染区域，内部元素不会影响外部布局。触发条件：元素设置overflow非visible、浮动、绝对定位、display:inline-block、flex布局等。实际用途：清除浮动塌陷、解决上下margin重叠问题、实现自适应两栏/三栏布局。三、JavaScript核心面试题1、var、let、const的区别？参考答案：var：函数级作用域，存在变量提升，可重复声明、可修改，未初始化值为undefined。let：块级作用域，存在暂时性死区，不可重复声明，可修改变量值。const：块级作用域，不可重复声明，声明后必须初始化，基础类型不可修改，引用类型可修改内部属性。开发规范：优先使用const，变量需要修改时用let，禁止使用var。2、JS数据类型有哪些？如何判断数据类型？参考答案：基础类型（7种）：string、number、boolean、null、undefined、symbol、bigint。引用类型：object（包含数组、对象、函数、正则等）。判断方式：typeof：可判断基础类型（null除外，typeofnull返回object），函数返回function，其余引用类型返回object；Array.isArray()：专门判断数组；Ototype.toString.call()：精准判断所有数据类型，项目通用。3、闭包是什么？优缺点和使用场景？参考答案：闭包：内层函数访问外层函数的变量，且外层函数执行结束后，变量依然被保留的现象。简单说：函数嵌套，内层引用外层变量，形成闭包。优点：保留私有变量、实现函数柯里化、防抖节流封装。缺点：变量常驻内存，容易造成内存堆积，滥用会导致页面性能变差。使用场景：防抖、节流、定时器封装、私有变量隔离、模块化开发。4、原型和原型链的理解？参考答案：每个函数都有prototype（显式原型），每个实例对象都有__proto__（隐式原型），实例的__proto__指向构造函数的prototype。原型链：对象查找属性/方法时，先在自身查找，找不到就顺着__proto__向上查找，直到找到Ototype，终点为null，这条查找链路就是原型链。作用：实现方法和属性的复用，减少内存占用，实现继承。5、防抖和节流的区别？项目中怎么用？参考答案：防抖：频繁触发事件，只在触发停止后延迟一段时间执行一次。适用场景：搜索框输入联想、窗口resize、表单输入校验。节流：频繁触发事件，固定时间间隔只执行一次。适用场景：滚动加载、页面拖拽、按钮频繁点击、鼠标移动监听。四、浏览器与网络面试题1、从输入网址到页面渲染完成，全过程讲一下？参考答案：1、DNS解析：将域名解析为服务器IP地址；2、建立TCP连接：三次握手建立可靠连接；3、发送HTTP请求，服务器接收并处理请求，返回响应数据；4、关闭TCP连接（四次挥手）；5、浏览器解析HTML生成DOM树，解析CSS生成CSSOM树；6、DOM树+CSSOM树生成渲染树；7、布局（Layout）计算元素位置大小，绘制（Paint）页面像素；8、合成图层，展示页面。2、HTTP1.0、1.1、2.0的区别？参考答案：HTTP1.0：短连接，每次请求都要新建TCP连接，请求完成立即断开，效率低。HTTP1.1：默认长连接，支持管线化请求，新增缓存策略（强缓存、协商缓存），解决部分跨域问题，但依然存在队头阻塞。HTTP2.0：二进制传输、多路复用（一个连接并发多个请求，解决队头阻塞）、头部压缩、支持服务器主动推送资源，大幅提升传输效率。3、浏览器缓存机制？强缓存和协商缓存区别？参考答案：浏览器缓存分为强缓存和协商缓存，优先级：强缓存>协商缓存。强缓存：无需请求服务器，直接读取本地缓存，返回200状态码。对应响应头：Cache-Control、Expires。协商缓存：强缓存失效后，携带缓存标识请求服务器，服务器对比资源是否更新。未更新返回304，使用本地缓存；更新则返回200和新资源。对应标识：Last-Modified/If-Modified-Since、ETag/If-None-Match。4、什么是回流和重绘？如何优化？参考答案：重绘：元素样式改变（颜色、透明度），不影响布局，浏览器重新绘制像素，开销较小。回流（重排）：元素宽高、位置、字体大小等布局属性改变，浏览器重新计算页面布局，开销极大，会触发连带回流。优化方案：1、批量修改样式，避免逐行修改DOM样式；2、使用文档碎片批量插入DOM节点；3、频繁操作的元素脱离文档流（绝对定位）；4、优先使用transform、opacity实现动画，仅触发重绘不触发回流。五、前端工程化&框架基础（Vue为例）1、Vue2和Vue3的核心区别？参考答案：1、响应式原理：Vue2基于Object.defineProperty，无法监听新增、删除属性和数组下标修改；Vue3基于Proxy，完美解决上述问题；2、语法：Vue2选项式API，代码碎片化；Vue3组合式API，逻辑集中，适合大型项目；3、打包体积：Vue3移除冗余代码，支持Tree-shaking，体积更小；4、生命周期：Vue3部分生命周期更名，新增setup入口函数；5、性能：Vue3优化diff算法，提升渲染和更新性能。2、Vue双向绑定原理？参考答案：核心是数据劫持+发布订阅模式。通过劫持数据的getter/setter，数据变化时触发更新，通知视图渲染；视图输入变化时，同步更新数据，实现数据和视图双向同步。3、Vue组件通信方式有哪些？参考答案：父子通信：父传子props，子传父$emit、defineProps/defineEmits（Vue3）；兄弟/跨级通信：provide/inject、全局状态管理（Pinia/Vuex）、事件总线；全局通信：Pinia/Vuex，适合中大型项目状态统一管理。4、webpack常用功能和核心配置？参考答案：核心作用：模块打包、代码编译、资源压缩、工程化构建。四大核心概念：入口（entry）、输出（output）、模块（module，配置loader解析css、图片、ES6语法）、插件（plugins，实现压缩、html生成、环境变量配置）。常用优化：代码分割、懒加载、资源压缩、缓存优化、Tree-shaking。六、场景实战面试题1、页面加载白屏时间过长，你会怎么排查优化？参考答案：排查步骤：通过浏览器Performance、Network面板查看资源加载耗时、渲染耗时，定位瓶颈。优化方案：1、静态资源压缩、图片懒加载、使用webp格式图片；2、路由懒加载、组件按需引入，减少首屏打包体积；3、开启浏览器缓存、CDN加速静态资源；4、减少首屏冗余请求，接口做合并处理；5、开启骨架屏、l