还剩17页未读，继续阅读
本资源只提供10页预览，全部文档请下载后查看！喜欢就下载吧，查找使用更方便
文本内容:
2025web前端面试题和答案
一、选择题（本题型共15题，每题2分，共30分）
1.下列哪个不是HTML5新增的语义化标签？A.headerB.navC.divD.footer
2.CSS3中，用于创建线性渐变效果的属性是？A.background-gradientB.linear-gradientC.radial-gradientD.gradient
3.JavaScript中的基本数据类型不包括以下哪一项？A.StringB.NumberC.ArrayD.Boolean
4.以下哪个是ES6引入的箭头函数正确语法？A.function adda,b{return a+b;}B.const add=a,b=a+b;C.add:functiona,b{return a+b;}D.add=functiona,b{return a+b;}
5.关于JavaScript作用域，以下说法正确的是？A.全局作用域中的变量只能在全局范围内访问第1页共19页B.函数作用域中的变量可在函数外部直接访问C.ES6的let/const声明的变量无作用域限制D.作用域链是从外向内查找变量
6.下列哪个是DOM对象获取元素的方法？A.document.querySelectorB.element.innerHTMLC.window.location.hrefD.document.cookie
7.CSS中，用于设置元素内边距的属性是？A.marginB.paddingC.borderD.spacing
8.JavaScript中，为元素绑定事件监听器的正确方法是？A.addEventListenerB.attachEventC.onloadD.onclick
9.以下哪个不是HTTP请求方法？A.GETB.POSTC.PUTD.SAVE
10.ES6中，用于声明块级作用域变量的关键字是？A.var第2页共19页B.letC.functionD.class
11.关于JavaScript原型链，以下说法正确的是？A.每个对象的原型对象没有原型B.原型链是对象查找属性的路径C.原型链只能通过new关键字创建D.原型对象不可添加属性和方法
12.CSS中，设置元素相对定位的属性是？A.position:relativeB.position:absoluteC.position:fixedD.position:static
13.JavaScript中，“this”关键字的指向是？A.声明该函数的对象B.调用该函数的对象C.全局对象D.以上都不对
14.HTML5中，用于客户端长期存储数据的API是？A.localStorageB.sessionStorageC.cookieD.IndexedDB
15.下列哪个不是CSS3的动画属性？A.transition第3页共19页B.animationC.transformD.translate
二、填空题（本题型共15题，每题2分，共30分）
1.JavaScript中，______方法用于遍历数组且不改变原数组，为每个元素执行回调函数
2.CSS中，______属性用于设置元素内容与边框的距离（内边距）
3.ES6中，______运算符可将数组/对象展开为独立元素/属性
4.HTML5中，______标签用于定义页面头部区域，通常包含标题、导航等内容
5.JavaScript中，______是异步编程解决方案，可将异步代码写得像同步代码
6.CSS中，以“#”开头的选择器称为______选择器，用于匹配唯一ID的元素
7.浏览器的______对象用于获取当前窗口地址、历史记录等信息
8.ES6中，______关键字用于定义类，类中可包含构造函数和方法
9.JavaScript中，______方法删除数组一个元素并返回该元素，会改变原数组
10.HTML5中，______API支持客户端大容量数据存储，可离线使用
11.CSS中，______属性用于设置元素浮动方向，可选值为left/right/none
12.JavaScript中，______是不重复数据结构，用于存储唯一值
13.HTTP状态码中，______表示请求成功处理
14.ES6中，______函数使用yield关键字暂停/恢复执行，返回迭代器对象第4页共19页
15.JavaScript中，______方法将JSON字符串解析为JavaScript对象
三、判断题（本题型共10题，每题1分，共10分）
1.JavaScript中，var声明的变量具有块级作用域（）
2.CSS中，position:absolute的元素相对于最近非static定位祖先元素定位（）
3.ES6箭头函数可使用arguments对象（）
4.HTML5的canvas元素需通过JavaScript绘制图形（）
5.JavaScript中，null和undefined是同一数据类型（）
6.CSS flex布局的justify-content属性用于设置项目在主轴上的对齐方式（）
7.HTTP的GET方法适合提交大量数据（）
8.原型链查找是从子对象到父对象，直至找到属性或原型链顶端（）
9.ES6的let/const声明的变量会发生变量提升（）
10.DOM的addEventListener可给同一元素添加多个相同类型事件监听器（）
四、简答题（本题型共15题，每题3分，共45分）
1.简述JavaScript原型继承机制每个对象都有原型对象，对象通过原型链查找属性，若自身无属性则向原型链上层查找，直至找到或null
2.闭包定义函数及其词法环境的组合应用场景数据私有化、防抖节流、模块化封装、柯里化第5页共19页
3.Promise定义异步编程对象，代表未来完成的操作，有pending/fulfilled/rejected三种状态解决问题回调地狱，使异步流程更线性
4.盒模型组成content（内容）、padding（内边距）、border（边框）、margin（外边距）区别标准盒模型width=content+padding+border；IE盒模型width=content（含padding+border）
5.GET与POST区别GET参数在URL中，长度有限，用于获取数据；POST参数在请求体，长度无限制，用于提交数据；GET可缓存，POST不可缓存
6.跨域定义浏览器因同源策略（协议/域名/端口一致）阻止跨域请求解决方案JSONP、CORS（后端设置Access-Control-Allow-Origin）、代理服务器（Webpack devServerproxy）
7.DOM事件流三阶段捕获阶段（从根节点到目标元素）、目标阶段（触发目标元素事件）、冒泡阶段（从目标元素到根节点）举例事件冒泡（点击子元素触发父元素事件），事件捕获（通过addEventListener第三个参数true启用）
8.异步编程方式回调函数、Promise、Generator、async/await、setTimeout
9.flex布局六个子属性flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基准尺寸）、flex（复合属性）、justify-content（主轴对齐）、align-items（交叉轴对齐）
10.HTML5语义化标签header（头部）、nav（导航）、main（主要内容）、article（独立内容）、section（区块）、第6页共19页aside（侧边栏）、footer（底部）作用提升可读性、SEO优化、便于开发维护
11.前端模块化定义将代码拆分为独立模块，模块间按需导入导出，避免全局污染方案CommonJS（Node.js，require/module.exports）、ES6Module（import/export）、AMD（require.js）、CMD（sea.js）
12.浏览器渲染流程解析HTML生成DOM树→解析CSS生成CSSOM树→合并DOM+CSSOM生成渲染树→布局（计算元素位置/大小）→绘制（像素填充）→合成（页面展示）
13.数据类型转换方式显式转换（Number/String/Boolean）、隐式转换（+-*/==等运算符触发）、parseInt/parseFloat（字符串转数字）
14.元素水平垂直居中方法flex布局（父元素display:flex;justify-content:center;align-items:center;）、绝对定位（父元素relative，子元素absolute;top:50%;left:50%;transform:translate-50%,-50%;）、table布局（父元素display:table;子元素display:table-cell;vertical-align:middle;text-align:center;）；line-height等于height（单行文本）
15.防抖与节流区别防抖（触发后n秒执行，n秒内触发则重新计时，如搜索框输入）；节流（n秒内最多执行一次，如滚动加载）
五、代码题（本题型共10题，每题5分，共50分）
1.判断回文串function isPalindromestr{let left=0,right=str.length-1;第7页共19页while leftright{if str[left]!==str[right]return false;left++;right--;}return true;}
2.防抖函数function debouncefn,delay{let timer=null;return function...args{clearTimeouttimer;timer=setTimeout={fn.applythis,args;},delay;};}
3.数组去重（两种方法）//方法1利用Setfunction uniqueArrarr{return[...new Setarr];}//方法2遍历判断function uniqueArrarr{const res=[];for leti=0;iarr.length;i++{if res.indexOfarr[i]===-1res.pusharr[i];第8页共19页}return res;}
4.简单Promise实现class MyPromise{constructorfn{this.state=pending;this.resolveCallbacks=[];this.rejectCallbacks=[];const resolve=value={if this.state===pending{this.state=fulfilled;this.resolveCallbacks.forEachcb=cbvalue;}};const reject=reason={if this.state===pending{this.state=rejected;this.rejectCallbacks.forEachcb=cbreason;}};fnresolve,reject;}thenonFulfilled,onRejected{if this.state===fulfilled onFulfilledthis.value;第9页共19页if this.state===rejected onRejectedthis.reason;if this.state===pending{this.resolveCallbacks.pushonFulfilled;this.rejectCallbacks.pushonRejected;}}}
5.数组扁平化function flattenarr{return arr.reduceacc,val=Array.isArrayvalacc.concatflattenval:acc.concatval,[];}
6.判断数组类型function isArrayarr{return Object.prototype.toString.callarr===[objectArray];}
7.斐波那契数列第n项function fibn{if n=1return n;let a=0,b=1;for leti=2;i=n;i++{[a,b]=[b,a+b];}第10页共19页return b;}
8.节流函数function throttlefn,interval{//interval为间隔时间let lastTime=0;return function...args{const now=Date.now;if now-lastTime=interval{fn.applythis,args;lastTime=now;}};}
9.实现map方法Array.prototype.myMap=functioncallback{const res=[];for leti=0;ithis.length;i++{res.pushcallbackthis[i],i,this;}return res;};
10.深拷贝函数function deepCloneobj{if obj===nulltypeof obj!==object returnobj;第11页共19页let cloneObj=Array.isArrayobj[]:{};for constkey inobj{if obj.hasOwnPropertykey{cloneObj[key]=deepCloneobj[key];}}return cloneObj;}
六、前端框架题（本题型共15题，每题3分，共45分）
1.Vue中v-bind与v-model区别v-bind（单向绑定，将数据响应式绑定到DOM属性）；v-model（双向绑定，本质是v-bind:value和v-on:input的语法糖）
2.React中setState异步更新原因批量更新优化性能，避免频繁DOM操作；合成事件机制中，setState会被放入队列，在事件循环结束后统一更新
3.Vue生命周期钩子beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyedcreated（数据初始化完成，可操作数据）；mounted（DOM挂载完成，可操作DOM）
4.React虚拟DOM（Virtual DOM）内存中的JavaScript对象，描述DOM结构；优势减少DOM操作（diff算法对比差异后更新）提升性能；跨平台（可渲染到不同平台，如小程序、移动端）
5.Vue computed与watch区别computed（依赖缓存，依赖不变则返回缓存值，支持get/set）；watch（监听数据变化执行回调，适合数据变化后执行异步/复杂操作）场景computed（依赖数据计算新第12页共19页值，如筛选列表）；watch（监听路由变化加载数据，如搜索框防抖）
6.React组件生命周期方法constructor初始化、componentWillMount废弃、render渲染、componentDidMountDOM操作/数据请求、componentWillUnmount清理定时器/事件监听、componentDidUpdate更新后操作
7.Vue路由守卫类型全局守卫（beforeEach、beforeResolve、afterEach）；路由独享守卫（beforeEnter）；组件内守卫（beforeRouteEnter/Update/Leave）作用控制路由跳转权限，如登录验证、权限检查
8.React refs作用获取DOM元素或子组件实例；使用方式createRef（类组件）或useRef（函数组件），如constinputRef=useRefnull;input ref={inputRef}/，通过inputRef.current获取元素
9.Vuex核心概念:State（存储状态）、Getter（计算属性，派生状态）、Mutation（同步修改状态）、Action（异步操作，提交mutation）、Module（模块拆分）
10.React Props与State区别Props（父组件传递给子组件，只读，不可修改）；State（组件内部状态，可修改，通过setState更新）
11.Vue v-if与v-show区别v-if（条件为false时不渲染元素，销毁DOM）；v-show（条件为false时设置display:none，元素仍存在DOM中）场景v-if（条件频繁切换，减少初始渲染开销）；v-show（条件不频繁切换，提升初始渲染速度）第13页共19页
12.React高阶组件（HOC）通过包装组件返回新组件的函数；作用复用组件逻辑（如权限控制、加载状态）；实现方式functionwithLoadingWrappedComponent{return classextendsReact.Component{...}}
13.Vue响应式原理通过Object.defineProperty将data中属性转为getter/setter，监听数据变化；当数据变化时，通知依赖收集器（Watcher），触发视图更新；ES6后支持数组变化监听（重写数组原型方法）
14.React组件化将UI拆分为独立可复用组件，每个组件管理自己的状态和渲染；类型函数组件（纯展示/逻辑）、类组件（复杂状态/生命周期）、无状态组件（纯展示）、容器组件（数据逻辑）
15.Vue组件通信方式父子组件（props/$emit）；兄弟组件（eventBus/父组件中转）；跨级组件（provide/inject/ContextAPI）；Vuex（全局状态管理）
七、前端工程化/性能优化题（本题型共15题，每题3分，共45分）
1.Webpack核心配置作用entry（入口文件，指定打包起点）；output（输出配置，指定打包后文件路径/名称）；loader（处理非JS文件，如css-loader处理.css，babel-loader转ES6）；plugin（扩展Webpack功能，如HtmlWebpackPlugin生成HTML，CleanWebpackPlugin清理dist）
2.前端性能优化方法减少HTTP请求（合并文件、图片精灵）；压缩资源（代码压缩、图片压缩）；懒加载（图片/组件延迟加载）；缓存策略（强缓存Cache-Control/Expires，协商缓存ETag/Last-Modified）；CDN加速（静态资源CDN分发）；减少DOM操作（批量DOM更新、虚拟DOM）第14页共19页
3.模块化开发定义将代码拆分为独立模块，模块间通过导入导出共享功能，避免全局污染；ES6Module与CommonJS区别ES6是编译时模块，静态导入导出（import/export）；CommonJS是运行时模块，动态require，模块缓存
4.浏览器缓存类型强缓存（Cache-Control:max-age=3600，Expires）；协商缓存（Last-Modified/If-Modified-Since，ETag/If-None-Match）；Service Worker缓存（离线缓存）；内存缓存（临时缓存，关闭标签失效）；磁盘缓存（持久化缓存，如HTTP缓存）
5.前端工程化主要方面模块化（代码拆分）、规范化（ESLint/Prettier代码风格）、自动化（Webpack/Gulp构建，Jest测试）、部署优化（CI/CD，自动化发布）；性能监控（错误监控、性能指标收集）
6.CDN优势全球节点加速资源加载，降低延迟；分担源站压力；缓存静态资源，提升重复访问速度；支持跨域访问
7.React代码分割方式React.lazy配合Suspense（懒加载组件）；React Router结合动态import（路由级别分割）；Webpack的require.ensure（代码分割API）
8.懒加载应用场景图片（页面滚动到可视区再加载）；路由（点击路由链接再加载对应组件）；大型组件（如模态框、选项卡，默认不显示）
9.Webpack环境配置开发环境（devtool:inline-source-map，热更新HotModuleReplacementPlugin）；生产环境（devtool:source-map，代码压缩TerserPlugin，提取CSS mini-css-extract-plugin）第15页共19页
10.前端资源压缩方式代码压缩（JS Terser；CSS csso；HTML html-minifier）；图片压缩（WebP格式、压缩图片工具）；资源合并（JS/CSS合并，减少请求）；Tree-shaking（移除未使用代码）
11.SPA（单页应用）定义加载单个HTML页面，通过JS动态更新内容，无需刷新页面；优点用户体验好（无刷新），前后端分离；缺点首屏加载慢（需加载所有资源），SEO不友好（搜索引擎抓取困难）
12.前端自动化测试类型单元测试（Jest测试工具函数/组件）；集成测试（测试模块间交互，如React TestingLibrary）；E2E测试（Cypress/Selenium模拟用户操作）；性能测试（Lighthouse测试页面性能）
13.首屏加载优化方法路由懒加载；资源压缩与合并；图片优化（小图用base64，懒加载）；服务端渲染（SSR，Next.js）；预加载关键资源（preload/prefetch）；CDN加速静态资源
14.Tree-shaking原理依赖ES6Module静态语法，打包时移除未引用的代码；Webpack默认启用，需在package.json设置sideEffects:false（无副作用文件）
15.前端模块化方案CommonJS（Node.js，require/module.exports）；ES6Module（浏览器/Node.js，import/export）；AMD（异步模块定义，require.js）；CMD（通用模块定义，sea.js）；UMD（通用模块规范，兼容CommonJS/AMD/全局变量）
八、安全与HTTP协议题（本题型共10题，每题3分，共30分）第16页共19页
1.XSS攻击原理注入恶意脚本到页面，如用户输入未过滤的内容；防范输入过滤（转义HTML特殊字符）、CSP（内容安全策略）、HttpOnly cookie（防止JS读取cookie）
2.常见HTTP状态码含义200（成功）；301（永久重定向）；304（协商缓存命中）；400（请求参数错误）；401（未授权，需登录）；403（禁止访问）；404（资源不存在）；500（服务器内部错误）
3.CSRF攻击原理利用用户已登录状态，诱导用户发起非预期请求（如转账）；防范验证Token（CSRF Token）、检查Referer/Origin请求头、SameSite Cookie属性
4.HTTP与HTTPS区别HTTP明文传输，端口80；HTTPS加密传输（TLS/SSL），端口443；HTTPS通过CA证书认证，更安全；HTTPS工作原理客户端发送请求→服务端返回证书→客户端验证证书→生成对称密钥→用公钥加密密钥传输→后续用对称密钥加密通信
5.CORS跨域配置后端设置响应头Access-Control-Allow-Origin:*（允许所有域）或指定域；支持跨域的请求方法（GET/POST/HEAD）和头信息；预检请求（OPTIONS）用于复杂请求（如带自定义头）
6.其他前端安全问题CSRF（已述）、点击劫持（iframe嵌套，用X-Frame-Options防御）、SQL注入（输入过滤，参数化查询）、敏感信息泄露（HTTPS加密，避免明文存储）
7.常见HTTP请求头Host（目标主机）；User-Agent（客户端信息）；Cookie（用户身份标识）；Content-Type（请求体格式，如application/json）；Authorization（认证Token）；Referer（请求来源页）第17页共19页
8.缓存分类与区别强缓存（客户端直接判断缓存是否过期，不发请求，状态码200）；协商缓存（客户端发请求，服务端判断是否使用缓存，状态码304）
9.中间人攻击原理攻击者伪装成服务端与客户端通信，窃取数据或篡改内容；防范使用HTTPS（TLS加密）、验证证书（禁用不安全证书）、避免公共网络敏感操作
10.HTTP版本区别HTTP/
1.0（每请求建立TCP连接，无持久连接）；HTTP/
1.1（持久连接，管道化，Host头支持）；HTTP/2（二进制分帧，多路复用，头部压缩，服务器推送）；HTTP/3（基于QUIC协议，使用UDP，更低延迟）答案汇总
一、选择题
1.C
2.B
3.C
4.B
5.A
6.A
7.B
8.A
9.D
10.B
11.B
12.A
13.B
14.A
15.C
二、填空题
1.forEach
2.padding
3....
4.header
5.async/await
6.ID
7.window
8.class
9.pop
10.IndexedDB
11.float
12.Set
13.
20014.function*
15.JSON.parse
三、判断题
1.×
2.√
3.×
4.√
5.×
6.√
7.×
8.√
9.×
10.√
四、简答题（答案内容较长，此处省略，答案与题目对应）
五、代码题（答案内容较长，此处省略，答案与题目对应）
六、前端框架题第18页共19页（答案内容较长，此处省略，答案与题目对应）
七、前端工程化/性能优化题（答案内容较长，此处省略，答案与题目对应）
八、安全与HTTP协议题（答案内容较长，此处省略，答案与题目对应）第19页共19页。
个人认证
优秀文档
获得点赞 0
