前端面试题大杂烩事件流、大屏、WebSocket、Vue原理一次讲透最近整理了一波前端面试题发现很多知识点特别碎但面试官又爱问。今天就干脆把这些高频问题用大白话串一遍每一小节都尽量说人话保证你看完能记住个七八成。适合面试前突击也适合平时查漏补缺。走起1. 前端中的事件流事件流说白了就是浏览器里一个事件从触发到响应的整个传递过程。它分三个阶段捕获阶段事件从最外层window一直往下找找到触发事件的那个元素。目标阶段事件到达目标元素触发它身上绑定的事件。冒泡阶段事件从目标元素再往上冒依次触发父级元素的事件。平时咱们用addEventListener的时候第三个参数默认是false也就是在冒泡阶段触发。如果设成true就是在捕获阶段触发。事件流最大的用处就是事件委托把子元素的事件绑到父元素上通过e.target判断具体是哪个子元素被点了省内存还方便动态添加元素。2. 大屏开发常用的组件库有哪些大屏开发可视化大屏常用的库和组件DataV阿里出品专门做大屏的 Vue 组件库边框、装饰、图表都有开箱即用。ECharts百度出品图表库天花板大屏里图表基本靠它。AntV蚂蚁出品包含 G2、G6、L7 等适合复杂可视化。vue-big-screen/vue-data-visualization一些开源大屏模板可以直接改数据用。Three.js做 3D 大屏效果时用。高德/百度地图 API地图类大屏常用。实际项目里一般是DataV 做边框装饰 ECharts 做图表 自己写布局。3. get 请求可以进行请求体传参吗理论上可以HTTP 规范没有明确禁止 GET 请求带 body。你用axios或fetch确实可以给 GET 请求塞一个body。axios.get(/api,{data:{name:zhangsan}})但实际开发中不建议而且很多环境直接给你忽略掉。因为浏览器对 GET 请求的 body 支持不统一有的直接丢弃。服务器如 Tomcat、Nginx默认不解析 GET 的 body。缓存、代理、日志等中间件通常只处理 GET 的 URL不管 body。所以结论规范没禁止但工程上别这么干参数放 URL 上更靠谱。4. get 为什么接口怎么传 body 参数都穿不过去接着上面说主要有几个原因浏览器限制XMLHttpRequest和fetch虽然能发 body但部分浏览器或版本对 GET body 支持不完整发送时直接被忽略。服务器不解析很多后端框架如 Spring MVC默认从 URL 或 query 里取 GET 参数根本不会读 body所以你传了也白传。中间层拦截Nginx、网关、CDN 等对 GET 请求的 body 处理不一致可能直接丢弃或报错。所以如果你发现 GET 传 body 怎么都过不去别挣扎了换成 POST 或者把参数拼到 URL 上这是最省心的办法。5. 前端如何给接口的 response-headers 响应头加参数先泼盆冷水真实接口的响应头是后端设置的前端没法直接改。但有些场景咱们确实想给响应头加点东西比如调试、本地 mock、跨域加头可以这么干本地开发代理在vue.config.js的devServer.proxy里用onProxyRes给响应头加参数。devServer:{proxy:{/api:{target:http://localhost:3000,changeOrigin:true,onProxyRes(proxyRes){proxyRes.headers[X-Custom-Header]hello}}}}Service Worker可以拦截请求并修改响应但复杂度高。本地 mock自己写接口时直接设置响应头。但生产环境前端是没办法改后端响应头的除非你用 Nginx 等反向代理。6. 前端可以修改 response-headers 响应头的 set-cookie 参数吗不能这是浏览器安全策略死死卡住的。Set-Cookie是后端通过响应头下发的浏览器会自动处理成 Cookie但前端 JavaScript读不到Set-Cookie响应头被浏览器隐藏。不能修改响应头里的Set-Cookie。只能通过document.cookie读取或设置一部分非HttpOnly的 Cookie但这也只是操作本地 Cookie不是改响应头。所以想改Set-Cookie只能让后端改逻辑或者走代理比如本地代理改写响应头但真实用户访问时前端是无能为力的。7. 绝对路径与相对路径绝对路径从根目录开始的完整路径比如/home/user/index.html或https://www.baidu.com/logo.png。前端里以/开头的路径也是绝对路径相对于域名根。相对路径相对于当前文件位置的路径比如./images/logo.png当前目录、../css/style.css上一级目录。前端项目里绝对路径的好处是不怕文件层级变动但换域名或部署到子目录时可能要改相对路径更灵活但层级深了容易写错。一般建议用绝对路径以/开头或配置base。8. Tomcat 的使用需要依赖后端环境吗Tomcat 本身是 Java 写的所以运行它必须要有 Java 环境JDK/JRE。这是硬性依赖。但“后端环境”如果指的是业务后端代码那倒不一定你可以把前端打包好的静态文件HTML、JS、CSS扔进 Tomcat 的webapps目录Tomcat 就变成一个静态资源服务器这时候不需要任何 Java 业务代码。但如果要跑 JSP、Servlet 或 Spring Boot 之类的后端服务那就需要完整的 Java 后端环境。所以结论Tomcat 依赖 Java 运行环境但不一定依赖后端业务代码。9. vue 项目 proxy 代理多个接口地址在vue.config.js里可以配置多个代理规则用不同的前缀区分module.exports{devServer:{proxy:{/api:{target:http://localhost:3000,changeOrigin:true},/user:{target:http://localhost:4000,changeOrigin:true},/upload:{target:http://localhost:5000,changeOrigin:true,pathRewrite:{^/upload:}}}}}这样前端请求/api/xxx就会转发到3000/user/xxx转发到4000互不干扰。记得路径重写pathRewrite按需配置。10. 插件和控件的区别简单理解控件Control有 UI 界面的组件比如按钮、输入框、日期选择器用户能直接看到并操作。插件Plugin是对宿主程序功能的扩展不一定有界面。比如浏览器的广告拦截插件、Vue 的路由插件、webpack 插件等。一句话控件偏 UI插件偏功能扩展。控件可以是插件的一部分但插件不一定有控件。11. 插件和软件有什么区别软件可以独立运行的程序比如 Photoshop、Chrome、微信。插件不能独立运行必须依附在某个宿主软件上用来增强宿主功能比如 PS 的滤镜插件、浏览器的油猴插件。打个比方软件是房子插件是房子里装的智能家居没有房子智能家居用不了。12. 前端修改路径参数怎么禁止这个问题可能想问怎么防止用户手动修改 URL 上的参数比如 query 或 params说实话前端没法完全禁止用户改 URL因为 URL 就在浏览器地址栏用户随时能改。但咱们可以做一些校验和限制路由守卫在beforeEach里校验参数合法性不合法就重定向或重置。router.beforeEach((to,from,next){if(!/^\d$/.test(to.query.id)){next({path:to.path,query:{id:1}})// 重置为默认值}else{next()}})状态管理把关键参数存在 Vuex/Pinia 里不依赖 URL 参数用户改了 URL 也不影响逻辑。加密签名给参数加签名后端校验但前端只能算辅助。核心思想前端只能校验和引导真正的安全要靠后端。13. WinSCP 原理WinSCP 是 Windows 下一款文件传输工具用来和服务器之间传文件。它的原理是基于SSH 协议具体使用 SFTP 或 SCP 协议SFTP基于 SSH 的安全文件传输协议加密传输支持断点续传。SCP基于 SSH 的简单文件复制协议。简单说WinSCP 就是通过 SSH 建立加密连接然后在这个安全通道里传输文件所以比传统 FTP 安全得多。前端部署项目时经常用它把打包文件传到服务器。14. 前端 WebSocketWebSocket 是一种全双工通信协议让浏览器和服务器之间可以互相主动发消息不用像 HTTP 那样一问一答。前端用法constwsnewWebSocket(ws://localhost:8080)ws.onopen(){ws.send(你好服务器)}ws.onmessage(event){console.log(收到消息,event.data)}ws.onclose(){console.log(连接关闭)}使用场景实时聊天、在线客服、大屏数据实时刷新、股票行情、多人协作等。注意心跳保活、断线重连。15. Vue 的 nextTick 原理nextTick是 Vue 提供的一个方法用来在下次 DOM 更新完成后执行回调。比如你改了数据想立刻获取更新后的 DOM就得用它this.message新值this.$nextTick((){console.log(this.$refs.box.textContent)// 能拿到最新值})原理Vue 更新 DOM 是异步的数据变化后不会立刻更新视图而是先收集依赖等同一事件循环里的所有数据变化都完成后再统一更新 DOM。nextTick就是利用微任务Promise.then或宏任务setTimeout把回调放到 DOM 更新之后执行。简单说数据变了 → 等本轮事件循环结束 → 更新 DOM → 执行 nextTick 回调。16. 什么是应用服务器应用服务器Application Server是提供业务逻辑运行环境的服务器软件。它不仅能处理静态资源还能运行业务代码比如 Java 的 Servlet、EJB、Spring 等。常见的应用服务器Tomcat轻量级支持 Servlet/JSPWebLogic、WebSphere重型支持完整 Java EEJBoss/WildFly和 Web 服务器如 Nginx、Apache的区别Web 服务器主要处理静态资源和反向代理应用服务器更侧重运行业务逻辑。17. 路由守卫判断非 vue 页面在 Vue 路由守卫里如果要判断用户想跳转的是一个非 Vue 管理的页面比如外部链接可以这么处理router.beforeEach((to,from,next){// 判断是否是外部链接if(to.path.startsWith(http://)||to.path.startsWith(https://)){window.location.hrefto.path// 直接跳走return}// 判断某个路由是否在 Vue 路由表中if(!router.hasRoute(to.name)){next(/404)// 不存在就跳 404}else{next()}})核心思路在守卫里检查to.path或to.name如果发现不是 Vue 内部路由就用window.location跳转或重定向到 404。18. 前端 SM4 的 ECB 在线解密SM4 是国产对称加密算法ECB 是其中一种加密模式电子密码本模式。前端解密可以用sm-crypto这个库import{sm4}fromsm-crypto// 密文和密钥一般是十六进制字符串constcipherText...// 密文constkey0123456789abcdeffedcba9876543210// 128位密钥32个十六进制字符// ECB 解密constplainTextsm4.decrypt(cipherText,key,{mode:ecb,cipherType:text})console.log(plainText)注意密钥必须是 128 位32 个十六进制字符。密文格式要匹配cipherType可以是text或base64。ECB 模式不需要 IV 向量。在线解密工具原理一样就是把密文和密钥输入调用同样的算法还原明文。19. 前端中间件是啥前端中间件就是在数据流中间插入的处理函数请求进来后先经过它再继续往下走。它可以在不修改核心逻辑的情况下扩展功能。常见的前端中间件Axios 拦截器请求拦截、响应拦截。Redux 中间件在 action 到达 reducer 之前处理副作用。Vue Router 导航守卫也算一种路由中间件。Koa/Express 中间件后端中间件但前端全栈时也会接触。举个例子Axios 拦截器axios.interceptors.request.use(config{config.headers.tokenxxx// 统一加 tokenreturnconfig})这就是一个典型的请求中间件。20. 前端开源框架是啥前端开源框架就是别人开源出来的、帮咱们快速搭建前端项目的工具集。主流的有Vue渐进式框架上手简单国内生态好。ReactFacebook 出品函数式编程生态庞大。AngularGoogle 出品大而全适合大型企业级应用。Svelte新兴框架编译时框架运行时更小。它们都是开源的可以免费使用、修改和分发有庞大的社区支持。21. 前端三大件的渲染顺序前端三大件指的是HTML、CSS、JavaScript。浏览器渲染页面的顺序大致是解析 HTML生成 DOM 树。解析 CSS生成 CSSOM 树。合并 DOM 和 CSSOM生成渲染树Render Tree。布局Layout计算每个节点的位置和大小。绘制Paint把内容画到屏幕上。JS 会阻塞 DOM 解析所以一般把script放在/body前或者用defer/async属性。CSS 会阻塞渲染所以首屏 CSS 要尽快加载。渲染顺序简单记先结构HTML再样式CSS再交互JS但 JS 可能阻塞前面两步。22. vue-cli 各版本的区别Vue CLI 2.x基于模板template生成项目配置文件暴露在外如build/webpack.base.conf.js等需要手动配置。Vue CLI 3.x全新设计零配置隐藏了 webpack 配置通过vue.config.js自定义引入插件体系。Vue CLI 4.x在 3 基础上优化支持更多默认配置性能更好默认使用 Vue 3 相关生态但也可以选 Vue 2。Vue CLI 5.x进一步升级默认 webpack 5更好的兼容性和构建速度。现在新项目基本都用Vue CLI 5.x或直接上Vite了。23. vue-cli3 比 vue-cli2 好在哪零配置不用再折腾build和config目录开箱即用。插件化通过vue add安装插件自动集成比如vue add router、vue add vuex。图形化界面vue ui可以可视化创建和管理项目。现代模式自动构建出支持旧浏览器的 legacy 包和支持新浏览器的 modern 包。配置统一都在vue.config.js里清晰好维护。更好的默认优化内置了代码分割、缓存、压缩等。总之CLI 3 让开发者从配置地狱里解脱出来专注于业务。24. vue.config.js 文件是在 vue-cli 几中出现的Vue CLI 3.x 开始出现vue.config.js。在 Vue CLI 2.x 里配置文件分散在config/index.js和build/目录下。从 3.x 起所有自定义配置统一放到项目根目录的vue.config.js里比如代理、打包路径、webpack 配置等。25. vue-cli3 为什么没有 webpack这个问题其实是个误解Vue CLI 3 依然使用 webpack只是把 webpack 配置隐藏了。在 Vue CLI 3 里webpack 的默认配置被封装在vue/cli-service内部项目里看不到webpack.config.js。如果你想自定义就在vue.config.js里通过configureWebpack或chainWebpack修改。所以不是没有 webpack而是配置被抽象了不再直接暴露。26. js 将一个键值对对象转为可遍历数据对象本身不是可迭代的但可以用这几个方法转换Object.entries(obj)返回二维数组[[key, value], ...]可以直接for...of遍历。Object.keys(obj)返回键数组。Object.values(obj)返回值数组。for…in遍历键但会遍历到原型链要配合hasOwnProperty。示例constobj{a:1,b:2,c:3}// 最常用for(const[key,value]ofObject.entries(obj)){console.log(key,value)}27. js 把 export 的对象全部导入如果模块里导出了多个东西想一次性全部导入用import * as// module.jsexportconsta1exportconstb2exportfunctionfn(){}// 导入import*asallfrom./module.jsconsole.log(all.a,all.b)all.fn()这样all就是一个包含所有导出的对象。28. vue-cli3 设置路由懒加载路由懒加载就是用到哪个页面才加载哪个页面加快首屏速度。在 Vue CLI 3 里用动态import()语法即可constHome()import(./views/Home.vue)constAbout()import(./views/About.vue)constroutes[{path:/,component:Home},{path:/about,component:About}]webpack 会自动把每个动态导入的组件打包成单独的 chunk路由切换时按需加载。29. es6 的 class 类使用场景ES6 的class是语法糖本质还是基于原型继承。常见使用场景封装工具类比如日期处理、字符串处理。创建组件类React 类组件、Vue 早期组件。面向对象编程继承、多态适合复杂的业务模型。单例模式用static方法和属性实现。事件管理器封装事件监听和触发。示例classEventBus{constructor(){this.events{}}on(name,fn){(this.events[name]||[]).push(fn)}emit(name,data){this.events[name]?.forEach(fnfn(data))}}30. 怎样看 vscode 是否成功拉取远程最新代码在 VSCode 里拉取远程代码git pull后可以通过以下几种方式确认看输出日志源代码管理面板会显示拉取结果如果成功会提示Already up to date或显示更新的文件。git log在终端执行git log -1看最新提交时间和远程是否一致。git status如果显示Your branch is up to date with origin/main说明拉取成功。对比文件查看某个已知有更新的文件内容是否变了。VSCode 左下角会显示当前分支和同步状态如果显示↓0 ↑0说明没有待拉取或推送的提交。最直接的就是看git pull的输出有没有报错没报错且提示更新了就算成功。31. 阻止冒泡排序要对父子都使用方法吗这里应该是阻止事件冒泡不是冒泡排序哈。只需要在子元素的事件处理函数里调用e.stopPropagation()即可不需要父子都加。原理事件从子元素冒泡到父元素如果在子元素阶段就调用了stopPropagation()事件就不会继续往上冒了父元素的事件就不会触发。divclickparentClickbuttonclickchildClick点我/button/divchildClick(e){e.stopPropagation()// 阻止冒泡父元素 parentClick 不会执行}如果父子都调用了stopPropagation()那只是重复保险但没必要。只有一种特殊情况事件委托时需要在父元素里判断e.target来决定是否阻止。32. 前端事件循环前端事件循环Event Loop是 JS 处理异步任务的机制。JS 是单线程的但通过事件循环实现了非阻塞。主要概念调用栈同步代码在这里执行。宏任务Macro TasksetTimeout、setInterval、I/O、UI 渲染。微任务Micro TaskPromise.then、async/await、MutationObserver。执行顺序先执行同步代码 → 清空微任务队列 → 执行一个宏任务 → 再清空微任务 → 下一个宏任务……循环往复。示例console.log(1)setTimeout(()console.log(2),0)Promise.resolve().then(()console.log(3))console.log(4)// 输出1 4 3 2理解事件循环是搞懂nextTick、异步编程的基础。33. 大屏使用可视化插件注意事项大屏开发用可视化插件ECharts、DataV 等时有几个坑要留意分辨率适配大屏分辨率五花八门要用缩放方案如transform: scale或百分比布局。性能优化图表太多、数据量大时要用防抖节流、按需渲染、销毁不用的图表。内存泄漏定时刷新数据的定时器、事件监听组件销毁时一定要清理。字体和颜色大屏通常深色背景字体要清晰颜色对比度要高。数据实时性WebSocket 或轮询刷新时注意更新频率避免频繁重绘。浏览器兼容大屏机器可能用 Chrome 或专用浏览器提前测试。打包体积按需引入 ECharts 模块减小包体积。34. es6 数组处理方法ES6 给数组加了很多好用方法map返回新数组每个元素经过处理。filter返回符合条件的元素组成的新数组。reduce累加器汇总数组。forEach遍历无返回值。find找到第一个符合条件的元素。findIndex找到第一个符合条件的索引。some只要有一个满足就返回true。every全部满足才返回true。includes判断数组是否包含某个值。flat数组扁平化。from把类数组转为数组。of创建数组。示例constarr[1,2,3,4]constdoubledarr.map(xx*2)// [2, 4, 6, 8]constevensarr.filter(xx%20)// [2, 4]constsumarr.reduce((acc,cur)acccur,0)// 1035. 图形用户界面 GUI 是什么GUIGraphical User Interface图形用户界面就是用图形方式显示和操作的用户界面用户通过鼠标点击图标、按钮、菜单等与程序交互而不是敲命令行。前端每天做的网页、手机 App 界面、桌面软件界面都属于 GUI。与之相对的是 CLI命令行界面比如终端、DOS。简单说GUI 就是咱们能“点”的界面CLI 是咱们只能“敲”的界面。总结这 35 个问题覆盖了前端事件、网络、Vue、构建工具、大屏、ES6 等多个方向都是面试和日常开发中高频出现的知识点。看完一遍可能记不住建议收藏起来面试前翻一翻或者哪里忘了回来查。如果你觉得有用点个赞再走呗 前端面试题大杂烩：事件流、大屏、WebSocket、Vue原理一次讲透！
前端面试题大杂烩事件流、大屏、WebSocket、Vue原理一次讲透最近整理了一波前端面试题发现很多知识点特别碎但面试官又爱问。今天就干脆把这些高频问题用大白话串一遍每一小节都尽量说人话保证你看完能记住个七八成。适合面试前突击也适合平时查漏补缺。走起1. 前端中的事件流事件流说白了就是浏览器里一个事件从触发到响应的整个传递过程。它分三个阶段捕获阶段事件从最外层window一直往下找找到触发事件的那个元素。目标阶段事件到达目标元素触发它身上绑定的事件。冒泡阶段事件从目标元素再往上冒依次触发父级元素的事件。平时咱们用addEventListener的时候第三个参数默认是false也就是在冒泡阶段触发。如果设成true就是在捕获阶段触发。事件流最大的用处就是事件委托把子元素的事件绑到父元素上通过e.target判断具体是哪个子元素被点了省内存还方便动态添加元素。2. 大屏开发常用的组件库有哪些大屏开发可视化大屏常用的库和组件DataV阿里出品专门做大屏的 Vue 组件库边框、装饰、图表都有开箱即用。ECharts百度出品图表库天花板大屏里图表基本靠它。AntV蚂蚁出品包含 G2、G6、L7 等适合复杂可视化。vue-big-screen/vue-data-visualization一些开源大屏模板可以直接改数据用。Three.js做 3D 大屏效果时用。高德/百度地图 API地图类大屏常用。实际项目里一般是DataV 做边框装饰 ECharts 做图表 自己写布局。3. get 请求可以进行请求体传参吗理论上可以HTTP 规范没有明确禁止 GET 请求带 body。你用axios或fetch确实可以给 GET 请求塞一个body。axios.get(/api,{data:{name:zhangsan}})但实际开发中不建议而且很多环境直接给你忽略掉。因为浏览器对 GET 请求的 body 支持不统一有的直接丢弃。服务器如 Tomcat、Nginx默认不解析 GET 的 body。缓存、代理、日志等中间件通常只处理 GET 的 URL不管 body。所以结论规范没禁止但工程上别这么干参数放 URL 上更靠谱。4. get 为什么接口怎么传 body 参数都穿不过去接着上面说主要有几个原因浏览器限制XMLHttpRequest和fetch虽然能发 body但部分浏览器或版本对 GET body 支持不完整发送时直接被忽略。服务器不解析很多后端框架如 Spring MVC默认从 URL 或 query 里取 GET 参数根本不会读 body所以你传了也白传。中间层拦截Nginx、网关、CDN 等对 GET 请求的 body 处理不一致可能直接丢弃或报错。所以如果你发现 GET 传 body 怎么都过不去别挣扎了换成 POST 或者把参数拼到 URL 上这是最省心的办法。5. 前端如何给接口的 response-headers 响应头加参数先泼盆冷水真实接口的响应头是后端设置的前端没法直接改。但有些场景咱们确实想给响应头加点东西比如调试、本地 mock、跨域加头可以这么干本地开发代理在vue.config.js的devServer.proxy里用onProxyRes给响应头加参数。devServer:{proxy:{/api:{target:http://localhost:3000,changeOrigin:true,onProxyRes(proxyRes){proxyRes.headers[X-Custom-Header]hello}}}}Service Worker可以拦截请求并修改响应但复杂度高。本地 mock自己写接口时直接设置响应头。但生产环境前端是没办法改后端响应头的除非你用 Nginx 等反向代理。6. 前端可以修改 response-headers 响应头的 set-cookie 参数吗不能这是浏览器安全策略死死卡住的。Set-Cookie是后端通过响应头下发的浏览器会自动处理成 Cookie但前端 JavaScript读不到Set-Cookie响应头被浏览器隐藏。不能修改响应头里的Set-Cookie。只能通过document.cookie读取或设置一部分非HttpOnly的 Cookie但这也只是操作本地 Cookie不是改响应头。所以想改Set-Cookie只能让后端改逻辑或者走代理比如本地代理改写响应头但真实用户访问时前端是无能为力的。7. 绝对路径与相对路径绝对路径从根目录开始的完整路径比如/home/user/index.html或https://www.baidu.com/logo.png。前端里以/开头的路径也是绝对路径相对于域名根。相对路径相对于当前文件位置的路径比如./images/logo.png当前目录、../css/style.css上一级目录。前端项目里绝对路径的好处是不怕文件层级变动但换域名或部署到子目录时可能要改相对路径更灵活但层级深了容易写错。一般建议用绝对路径以/开头或配置base。8. Tomcat 的使用需要依赖后端环境吗Tomcat 本身是 Java 写的所以运行它必须要有 Java 环境JDK/JRE。这是硬性依赖。但“后端环境”如果指的是业务后端代码那倒不一定你可以把前端打包好的静态文件HTML、JS、CSS扔进 Tomcat 的webapps目录Tomcat 就变成一个静态资源服务器这时候不需要任何 Java 业务代码。但如果要跑 JSP、Servlet 或 Spring Boot 之类的后端服务那就需要完整的 Java 后端环境。所以结论Tomcat 依赖 Java 运行环境但不一定依赖后端业务代码。9. vue 项目 proxy 代理多个接口地址在vue.config.js里可以配置多个代理规则用不同的前缀区分module.exports{devServer:{proxy:{/api:{target:http://localhost:3000,changeOrigin:true},/user:{target:http://localhost:4000,changeOrigin:true},/upload:{target:http://localhost:5000,changeOrigin:true,pathRewrite:{^/upload:}}}}}这样前端请求/api/xxx就会转发到3000/user/xxx转发到4000互不干扰。记得路径重写pathRewrite按需配置。10. 插件和控件的区别简单理解控件Control有 UI 界面的组件比如按钮、输入框、日期选择器用户能直接看到并操作。插件Plugin是对宿主程序功能的扩展不一定有界面。比如浏览器的广告拦截插件、Vue 的路由插件、webpack 插件等。一句话控件偏 UI插件偏功能扩展。控件可以是插件的一部分但插件不一定有控件。11. 插件和软件有什么区别软件可以独立运行的程序比如 Photoshop、Chrome、微信。插件不能独立运行必须依附在某个宿主软件上用来增强宿主功能比如 PS 的滤镜插件、浏览器的油猴插件。打个比方软件是房子插件是房子里装的智能家居没有房子智能家居用不了。12. 前端修改路径参数怎么禁止这个问题可能想问怎么防止用户手动修改 URL 上的参数比如 query 或 params说实话前端没法完全禁止用户改 URL因为 URL 就在浏览器地址栏用户随时能改。但咱们可以做一些校验和限制路由守卫在beforeEach里校验参数合法性不合法就重定向或重置。router.beforeEach((to,from,next){if(!/^\d$/.test(to.query.id)){next({path:to.path,query:{id:1}})// 重置为默认值}else{next()}})状态管理把关键参数存在 Vuex/Pinia 里不依赖 URL 参数用户改了 URL 也不影响逻辑。加密签名给参数加签名后端校验但前端只能算辅助。核心思想前端只能校验和引导真正的安全要靠后端。13. WinSCP 原理WinSCP 是 Windows 下一款文件传输工具用来和服务器之间传文件。它的原理是基于SSH 协议具体使用 SFTP 或 SCP 协议SFTP基于 SSH 的安全文件传输协议加密传输支持断点续传。SCP基于 SSH 的简单文件复制协议。简单说WinSCP 就是通过 SSH 建立加密连接然后在这个安全通道里传输文件所以比传统 FTP 安全得多。前端部署项目时经常用它把打包文件传到服务器。14. 前端 WebSocketWebSocket 是一种全双工通信协议让浏览器和服务器之间可以互相主动发消息不用像 HTTP 那样一问一答。前端用法constwsnewWebSocket(ws://localhost:8080)ws.onopen(){ws.send(你好服务器)}ws.onmessage(event){console.log(收到消息,event.data)}ws.onclose(){console.log(连接关闭)}使用场景实时聊天、在线客服、大屏数据实时刷新、股票行情、多人协作等。注意心跳保活、断线重连。15. Vue 的 nextTick 原理nextTick是 Vue 提供的一个方法用来在下次 DOM 更新完成后执行回调。比如你改了数据想立刻获取更新后的 DOM就得用它this.message新值this.$nextTick((){console.log(this.$refs.box.textContent)// 能拿到最新值})原理Vue 更新 DOM 是异步的数据变化后不会立刻更新视图而是先收集依赖等同一事件循环里的所有数据变化都完成后再统一更新 DOM。nextTick就是利用微任务Promise.then或宏任务setTimeout把回调放到 DOM 更新之后执行。简单说数据变了 → 等本轮事件循环结束 → 更新 DOM → 执行 nextTick 回调。16. 什么是应用服务器应用服务器Application Server是提供业务逻辑运行环境的服务器软件。它不仅能处理静态资源还能运行业务代码比如 Java 的 Servlet、EJB、Spring 等。常见的应用服务器Tomcat轻量级支持 Servlet/JSPWebLogic、WebSphere重型支持完整 Java EEJBoss/WildFly和 Web 服务器如 Nginx、Apache的区别Web 服务器主要处理静态资源和反向代理应用服务器更侧重运行业务逻辑。17. 路由守卫判断非 vue 页面在 Vue 路由守卫里如果要判断用户想跳转的是一个非 Vue 管理的页面比如外部链接可以这么处理router.beforeEach((to,from,next){// 判断是否是外部链接if(to.path.startsWith(http://)||to.path.startsWith(https://)){window.location.hrefto.path// 直接跳走return}// 判断某个路由是否在 Vue 路由表中if(!router.hasRoute(to.name)){next(/404)// 不存在就跳 404}else{next()}})核心思路在守卫里检查to.path或to.name如果发现不是 Vue 内部路由就用window.location跳转或重定向到 404。18. 前端 SM4 的 ECB 在线解密SM4 是国产对称加密算法ECB 是其中一种加密模式电子密码本模式。前端解密可以用sm-crypto这个库import{sm4}fromsm-crypto// 密文和密钥一般是十六进制字符串constcipherText...// 密文constkey0123456789abcdeffedcba9876543210// 128位密钥32个十六进制字符// ECB 解密constplainTextsm4.decrypt(cipherText,key,{mode:ecb,cipherType:text})console.log(plainText)注意密钥必须是 128 位32 个十六进制字符。密文格式要匹配cipherType可以是text或base64。ECB 模式不需要 IV 向量。在线解密工具原理一样就是把密文和密钥输入调用同样的算法还原明文。19. 前端中间件是啥前端中间件就是在数据流中间插入的处理函数请求进来后先经过它再继续往下走。它可以在不修改核心逻辑的情况下扩展功能。常见的前端中间件Axios 拦截器请求拦截、响应拦截。Redux 中间件在 action 到达 reducer 之前处理副作用。Vue Router 导航守卫也算一种路由中间件。Koa/Express 中间件后端中间件但前端全栈时也会接触。举个例子Axios 拦截器axios.interceptors.request.use(config{config.headers.tokenxxx// 统一加 tokenreturnconfig})这就是一个典型的请求中间件。20. 前端开源框架是啥前端开源框架就是别人开源出来的、帮咱们快速搭建前端项目的工具集。主流的有Vue渐进式框架上手简单国内生态好。ReactFacebook 出品函数式编程生态庞大。AngularGoogle 出品大而全适合大型企业级应用。Svelte新兴框架编译时框架运行时更小。它们都是开源的可以免费使用、修改和分发有庞大的社区支持。21. 前端三大件的渲染顺序前端三大件指的是HTML、CSS、JavaScript。浏览器渲染页面的顺序大致是解析 HTML生成 DOM 树。解析 CSS生成 CSSOM 树。合并 DOM 和 CSSOM生成渲染树Render Tree。布局Layout计算每个节点的位置和大小。绘制Paint把内容画到屏幕上。JS 会阻塞 DOM 解析所以一般把script放在/body前或者用defer/async属性。CSS 会阻塞渲染所以首屏 CSS 要尽快加载。渲染顺序简单记先结构HTML再样式CSS再交互JS但 JS 可能阻塞前面两步。22. vue-cli 各版本的区别Vue CLI 2.x基于模板template生成项目配置文件暴露在外如build/webpack.base.conf.js等需要手动配置。Vue CLI 3.x全新设计零配置隐藏了 webpack 配置通过vue.config.js自定义引入插件体系。Vue CLI 4.x在 3 基础上优化支持更多默认配置性能更好默认使用 Vue 3 相关生态但也可以选 Vue 2。Vue CLI 5.x进一步升级默认 webpack 5更好的兼容性和构建速度。现在新项目基本都用Vue CLI 5.x或直接上Vite了。23. vue-cli3 比 vue-cli2 好在哪零配置不用再折腾build和config目录开箱即用。插件化通过vue add安装插件自动集成比如vue add router、vue add vuex。图形化界面vue ui可以可视化创建和管理项目。现代模式自动构建出支持旧浏览器的 legacy 包和支持新浏览器的 modern 包。配置统一都在vue.config.js里清晰好维护。更好的默认优化内置了代码分割、缓存、压缩等。总之CLI 3 让开发者从配置地狱里解脱出来专注于业务。24. vue.config.js 文件是在 vue-cli 几中出现的Vue CLI 3.x 开始出现vue.config.js。在 Vue CLI 2.x 里配置文件分散在config/index.js和build/目录下。从 3.x 起所有自定义配置统一放到项目根目录的vue.config.js里比如代理、打包路径、webpack 配置等。25. vue-cli3 为什么没有 webpack这个问题其实是个误解Vue CLI 3 依然使用 webpack只是把 webpack 配置隐藏了。在 Vue CLI 3 里webpack 的默认配置被封装在vue/cli-service内部项目里看不到webpack.config.js。如果你想自定义就在vue.config.js里通过configureWebpack或chainWebpack修改。所以不是没有 webpack而是配置被抽象了不再直接暴露。26. js 将一个键值对对象转为可遍历数据对象本身不是可迭代的但可以用这几个方法转换Object.entries(obj)返回二维数组[[key, value], ...]可以直接for...of遍历。Object.keys(obj)返回键数组。Object.values(obj)返回值数组。for…in遍历键但会遍历到原型链要配合hasOwnProperty。示例constobj{a:1,b:2,c:3}// 最常用for(const[key,value]ofObject.entries(obj)){console.log(key,value)}27. js 把 export 的对象全部导入如果模块里导出了多个东西想一次性全部导入用import * as// module.jsexportconsta1exportconstb2exportfunctionfn(){}// 导入import*asallfrom./module.jsconsole.log(all.a,all.b)all.fn()这样all就是一个包含所有导出的对象。28. vue-cli3 设置路由懒加载路由懒加载就是用到哪个页面才加载哪个页面加快首屏速度。在 Vue CLI 3 里用动态import()语法即可constHome()import(./views/Home.vue)constAbout()import(./views/About.vue)constroutes[{path:/,component:Home},{path:/about,component:About}]webpack 会自动把每个动态导入的组件打包成单独的 chunk路由切换时按需加载。29. es6 的 class 类使用场景ES6 的class是语法糖本质还是基于原型继承。常见使用场景封装工具类比如日期处理、字符串处理。创建组件类React 类组件、Vue 早期组件。面向对象编程继承、多态适合复杂的业务模型。单例模式用static方法和属性实现。事件管理器封装事件监听和触发。示例classEventBus{constructor(){this.events{}}on(name,fn){(this.events[name]||[]).push(fn)}emit(name,data){this.events[name]?.forEach(fnfn(data))}}30. 怎样看 vscode 是否成功拉取远程最新代码在 VSCode 里拉取远程代码git pull后可以通过以下几种方式确认看输出日志源代码管理面板会显示拉取结果如果成功会提示Already up to date或显示更新的文件。git log在终端执行git log -1看最新提交时间和远程是否一致。git status如果显示Your branch is up to date with origin/main说明拉取成功。对比文件查看某个已知有更新的文件内容是否变了。VSCode 左下角会显示当前分支和同步状态如果显示↓0 ↑0说明没有待拉取或推送的提交。最直接的就是看git pull的输出有没有报错没报错且提示更新了就算成功。31. 阻止冒泡排序要对父子都使用方法吗这里应该是阻止事件冒泡不是冒泡排序哈。只需要在子元素的事件处理函数里调用e.stopPropagation()即可不需要父子都加。原理事件从子元素冒泡到父元素如果在子元素阶段就调用了stopPropagation()事件就不会继续往上冒了父元素的事件就不会触发。divclickparentClickbuttonclickchildClick点我/button/divchildClick(e){e.stopPropagation()// 阻止冒泡父元素 parentClick 不会执行}如果父子都调用了stopPropagation()那只是重复保险但没必要。只有一种特殊情况事件委托时需要在父元素里判断e.target来决定是否阻止。32. 前端事件循环前端事件循环Event Loop是 JS 处理异步任务的机制。JS 是单线程的但通过事件循环实现了非阻塞。主要概念调用栈同步代码在这里执行。宏任务Macro TasksetTimeout、setInterval、I/O、UI 渲染。微任务Micro TaskPromise.then、async/await、MutationObserver。执行顺序先执行同步代码 → 清空微任务队列 → 执行一个宏任务 → 再清空微任务 → 下一个宏任务……循环往复。示例console.log(1)setTimeout(()console.log(2),0)Promise.resolve().then(()console.log(3))console.log(4)// 输出1 4 3 2理解事件循环是搞懂nextTick、异步编程的基础。33. 大屏使用可视化插件注意事项大屏开发用可视化插件ECharts、DataV 等时有几个坑要留意分辨率适配大屏分辨率五花八门要用缩放方案如transform: scale或百分比布局。性能优化图表太多、数据量大时要用防抖节流、按需渲染、销毁不用的图表。内存泄漏定时刷新数据的定时器、事件监听组件销毁时一定要清理。字体和颜色大屏通常深色背景字体要清晰颜色对比度要高。数据实时性WebSocket 或轮询刷新时注意更新频率避免频繁重绘。浏览器兼容大屏机器可能用 Chrome 或专用浏览器提前测试。打包体积按需引入 ECharts 模块减小包体积。34. es6 数组处理方法ES6 给数组加了很多好用方法map返回新数组每个元素经过处理。filter返回符合条件的元素组成的新数组。reduce累加器汇总数组。forEach遍历无返回值。find找到第一个符合条件的元素。findIndex找到第一个符合条件的索引。some只要有一个满足就返回true。every全部满足才返回true。includes判断数组是否包含某个值。flat数组扁平化。from把类数组转为数组。of创建数组。示例constarr[1,2,3,4]constdoubledarr.map(xx*2)// [2, 4, 6, 8]constevensarr.filter(xx%20)// [2, 4]constsumarr.reduce((acc,cur)acccur,0)// 1035. 图形用户界面 GUI 是什么GUIGraphical User Interface图形用户界面就是用图形方式显示和操作的用户界面用户通过鼠标点击图标、按钮、菜单等与程序交互而不是敲命令行。前端每天做的网页、手机 App 界面、桌面软件界面都属于 GUI。与之相对的是 CLI命令行界面比如终端、DOS。简单说GUI 就是咱们能“点”的界面CLI 是咱们只能“敲”的界面。总结这 35 个问题覆盖了前端事件、网络、Vue、构建工具、大屏、ES6 等多个方向都是面试和日常开发中高频出现的知识点。看完一遍可能记不住建议收藏起来面试前翻一翻或者哪里忘了回来查。如果你觉得有用点个赞再走呗