北京地区Web前端开发面试真题及详细答案（实战版）

北京地区Web前端开发面试真题及详细答案（实战版）本套试题适配北京中小厂、互联网大厂前端初/中级岗位面试，考题均为线下、线上高频真题，贴合实际业务场景，答案精简落地，无空泛理论，适配求职备考、面试复盘使用。一、基础选择题（共10题，含答案解析）1.以下关于HTML语义化标签的说法，正确的是（）A.div、span属于语义化标签B.article用于定义页面侧边栏内容C.section用于页面区块划分，适合主题性内容分组D.nav只能放置页面顶部导航答案：C解析：div、span是无语义通用标签；article代表独立完整的内容主体，并非侧边栏；aside为侧边栏标签；nav可用于页面任意位置的导航区域，不局限于顶部。section专门用于主题区块划分，是标准语义化用法。2.CSS中，以下选择器优先级最高的是（）A.类选择器.boxB.标签选择器divC.行内样式styleD.后代选择器.wrapdiv答案：C解析：CSS优先级规则：行内样式>ID选择器>类、伪类、属性选择器>标签选择器>通配符、继承样式。行内样式优先级最高，极少被覆盖。3.以下不属于JavaScript基本数据类型的是（）A.StringB.ObjectC.UndefinedD.Symbol答案：B解析：JS基本数据类型：String、Number、Boolean、Undefined、Null、Symbol、BigInt。Object属于引用数据类型，包含数组、对象、函数等。4.关于var、let、const的区别，说法错误的是（）A.var存在变量提升，无块级作用域B.let存在暂时性死区，不能重复声明C.const声明的变量不可修改任何内容D.三者中，const声明的常量优先级最高，推荐优先使用答案：C解析：const声明的是常量，针对内存地址不可修改。如果是引用类型（数组、对象），可以修改内部属性和元素，只是不能重新赋值。5.以下事件流顺序正确的是（）A.目标阶段-捕获阶段-冒泡阶段B.捕获阶段-目标阶段-冒泡阶段C.冒泡阶段-捕获阶段-目标阶段D.捕获阶段-冒泡阶段-目标阶段答案：B解析：标准DOM事件流分为三个阶段：先从外层向内层捕获，到达目标元素触发目标事件，再从内层向外层冒泡。日常开发中默认触发冒泡阶段。6.Vue2中，v-if和v-for同时使用时，说法正确的是（）A.v-if优先级更高，先判断再循环B.v-for优先级更高，先循环再判断C.两者优先级一致，同时执行D.可以同时使用，无性能问题答案：B解析：Vue2中v-for优先级高于v-if，会先循环渲染所有数据，再根据条件判断隐藏元素，造成严重性能浪费。官方规范：禁止两者同级使用，需将v-if移至外层容器。Vue3中v-if优先级更高。7.以下关于axios的说法，错误的是（）A.支持请求、响应拦截器B.可自动转换JSON数据C.不支持取消请求D.可配置请求超时时间答案：C解析：axios支持通过CancelToken取消请求，常用于搜索防抖、页面卸载终止未完成请求，优化页面性能。8.CSS3中，flex布局默认的主轴方向是（）A.columnB.rowC.row-reverseD.column-reverse答案：B解析：flex-direction默认值为row，主轴水平从左到右，交叉轴垂直从上到下。9.以下方法不会改变原数组的是（）A.spliceB.pushC.mapD.reverse答案：C解析：map、filter、slice、concat属于纯函数，返回新数组，不修改原数组；splice、push、pop、shift、unshift、reverse会直接修改原数组。10.浏览器缓存中，优先级最高的是（）A.强缓存B.协商缓存C.内存缓存D.硬盘缓存答案：C解析：缓存优先级：内存缓存>硬盘缓存>强缓存>协商缓存。内存缓存读取速度最快，页面关闭即失效；硬盘缓存持久存储。二、简答题（高频真题，落地答案）1.简述浏览器从输入网址到页面渲染完成的全过程参考答案：1.DNS解析：将域名转换为服务器IP地址，优先读取本地缓存，无缓存则逐级递归解析；2.TCP三次握手：与服务器建立可靠传输连接，确保数据传输稳定；3.发送HTTP请求：浏览器组装请求头、请求体，向服务器发送资源请求；4.服务器处理并返回响应：后端接收请求、逻辑处理、查询数据，返回响应头、响应体、状态码；5.浏览器解析资源：解析HTML生成DOM树，解析CSS生成CSSOM规则树，合并生成渲染树；6.页面布局与绘制：根据渲染树计算元素布局位置（回流），进行像素绘制（重绘）；7.JS执行与页面交互：解析执行JS代码，绑定事件，完成页面初始化交互。2.说说回流和重绘的区别，以及如何优化参考答案：区别：-重绘：元素样式（颜色、透明度、背景）改变，不影响布局位置，浏览器仅重新绘制像素，开销较小；-回流（重排）：元素宽高、位置、字体大小等布局属性改变，浏览器需要重新计算所有元素布局，开销极大，会触发重绘。优化方案：1.批量修改DOM样式，统一操作后再插入页面；2.使用class类名统一切换样式，避免逐行修改style；3.频繁操作的元素设置为绝对定位，脱离文档流，减少全局回流；4.利用requestAnimationFrame替代频繁定时器修改样式。3.原型和原型链的理解参考答案：1.每个函数都有prototype（显式原型），用于挂载公共方法和属性；2.每个实例对象都有__proto__（隐式原型），指向构造函数的prototype；3.原型链：对象的__proto__层层向上查找，最终指向Ototype，顶层为null，形成的链式结构；4.作用：实现属性和方法的继承，减少内存冗余，所有实例可共享原型上的方法。4.Vue双向绑定原理（Vue2）参考答案：Vue2双向绑定核心是数据劫持+发布订阅模式，通过Object.defineProperty()劫持data中数据的getter和setter：1.页面初始化时，递归遍历所有数据，为每个属性添加getter、setter；2.数据读取时触发getter，收集当前组件的渲染依赖（Watcher）；3.数据修改时触发setter，通知订阅器Dep，批量更新所有依赖该数据的视图；4.结合v-model语法糖，绑定value值、监听input事件，实现视图和数据双向同步。缺陷：无法监听对象新增/删除属性、数组下标修改、数组长度修改，需用Vue.set、this.$set解决。5.谈谈Vue生命周期，常用钩子的使用场景参考答案：生命周期是组件从创建、挂载、更新、销毁的完整过程，常用钩子场景：1.created：组件创建完成，数据已初始化，未挂载DOM，常用于初始请求接口、初始化数据；2.mounted：DOM挂载完成，页面节点已生成，常用于操作DOM、初始化定时器、绑定原生事件；3.updated：数据更新、DOM重新渲染完成，用于更新后DOM操作；4.beforeDestroy：组件销毁前，用于清除定时器、移除事件监听、取消请求，防止内存泄漏。6.跨域问题产生原因及常用解决方案参考答案：产生原因：浏览器同源策略限制，协议、域名、端口任意一个不同，即为跨域，阻止页面读取跨域资源。常用解决方案：1.后端CORS跨域：服务端设置响应头，允许指定域名访问，最常用、最稳定；2.本地代理转发：vue-cli、vite配置proxy代理，前端请求本地服务，由本地服务转发请求，规避浏览器跨域限制；3.JSONP：仅支持get请求，兼容老项目，安全性较低，新项目基本不用；4.Nginx反向代理：线上部署通过Nginx配置转发，统一域名端口，解决跨域。三、代码实操题（面试手写真题）1.手写防抖函数题目要求：触发事件后延迟执行，期间重复触发则重置延迟，常用于搜索框输入、窗口resize参考答案：PlainText

functiondebounce(fn,delay=300){

lettimer=null

returnfunction(...args){

//每次触发清空定时器

if(timer)clearTimeout(timer)

timer=setTimeout(()=>{

fn.apply(this,args)

timer=null

},delay)

}

}

2.手写数组去重（ES6最简写法+传统写法）参考答案：PlainText

//ES6Set最简去重

functionuniqueArr(arr){

return[...newSet(arr)]

}

//传统遍历去重（兼容低版本）

functionuniqueArr2(arr){

constres=[]

arr.forEach(item=>{

if(!res.includes(item)){

res.push(item)

}

})

returnres

}

3.Vue自定义指令实现按钮权限控制业务场景：不同角色隐藏/显示对应操作按钮参考答案：PlainText

//main.js全局注册

Vue.directive('permission',{

inserted(el,binding){

//获取当前用户权限列表

constpermissionList=['add','edit']

//判断当前按钮权限是否存在

if(!permissionList.includes(binding.value)){

//无权限则移除按钮

el.parentNode.removeChild(el)

}

}

})

//页面使用

<buttonv-permission="'add'">新增</button>

<buttonv-permission="'delete'">删除</button>

四、场景面试题（北京大厂常问）1.项目页面加载速度慢，你如何排查和优化？参考答案：排查步骤：1.打开浏览器Network面板，查看静态资源、接口请求耗时，定位慢资源、慢接口；2.查看Console面板，排查报错、死循环、内存泄漏问题；3.查看Lighthouse性能评分，分析首屏、白屏、渲染耗时。优化方案：1.资源优化：图片压缩、使用webp格式、静态资源CDN加速、懒加载图片和路由；2.打包优化：路由懒加载、组件按需引入、打包压缩去除冗余代码、gzip压缩；3.接口优化：接口缓存、防抖节流、合并重复请求、后端分页减少返回数据量；4.渲染优化：减少回流重绘、虚拟列表处理长列表数据、避免无效DOM渲染。2.说说你对Vue组件封装的理解，封装原则是什么？参考答案：组件封装是前端工程化的核心，目的是复用代码、统一UI样式、降低维护成本。封装原则：1.单一职责：一个组件只负责一个功能，逻辑清晰，不冗余；2.开闭原则：组件内部逻辑封闭，通过props、插槽、事件对外扩展，修改功能不改动源码；3.数据驱动：所有样式、状态由数据控制，