前端面试题（高级）

前端面试题（高级）牛客网 刷题技术栈：Agent 全栈开发 指的是 同时具备前端、后端的能力，并且熟悉 Agent 知识。前端：Vue、React 二选一即可。即传统前端知识。后端：Node、Java、Python、Go 四选一（或 四选二）。Java 通常做传统业务开发。Node 和 Python 做 AI 能力对接Agent 知识：全新的技术，包括Vibe Coding、MCP、RAG、Skills等等的 AI 概念。nginx 的使用web服务器 ，反向代理服务器API 网关前端页面在浏览器上显示时的渲染处理过程Vue3的性能提升主要来自三个方向：1.「编译阶段」：通过静态标记、静态提升等优化，减少无效的DOM遍历；2.「源码体积」：用Tree Shaking技术，只打包用到的代码，让文件更小；3.「响应式系统」：用Proxy代替defineProperty，监控更全面、更高效。electron 多端开发开发过程中的闪光点，贡献遇到的问题，及项目难点步骤条 结合 动态表格的设置，表格每一行的数据 都是由上一步选择而来，选项也是动态的vue深层次原理的理解Vue 的响应式系统，是一个以 Proxy 为载体、以 effect 为单元、以 track/trigger为纽带、以「依赖图可计算」为前提、「更新可调度」为保障的函数式响应式引擎。effect 函数不是“监听器”，而是一个带依赖收集能力的函数包装器；import { effect } from ‘@vue/reactivity’track(target, key)：依赖收集的“登记簿”5年多的经验，有哪些能力的提示和优势pc端和移动端开发的不同职业规划自定义报表的开发，拖拽Vue Draggable 等拖拽库的使用定义一个animate的对象，再定义一个cat，如何使cat 获取到animate原型上的属性和方法1、class extends2、使用 Object.create()（创建时指定原型，更语义化）3、Object.setPrototypeOf()（最直接，推荐用于简单继承）1class类//class extendsclassAnimate{constructor(speed=1){this.speed=speed;}move(){console.log(`Moving at speed${this.speed}`);}stop(){console.log('Stopped.');}}classCatextendsAnimate{constructor(name,speed=1){super(speed);// 调用父类构造函数this.name=name;}meow(){console.log('Meow!');}}constcat=newCat('Whiskers',2);2、使用 Object.create()（创建时指定原型，更语义化）constanimate={speed:1,move(){console.log(`Moving at speed${this.speed}`);},stop(){console.log('Stopped.');}};// ✅ 创建 cat：以 animate 为原型，再添加自身属性constcat=Object.create(animate);cat.name='Whiskers';constanimate={speed:1,move(){console.log(`Moving at speed${this.speed}`);},stop(){console.log('Stopped.');}};// ✅ 创建 cat：以 animate 为原型，再添加自身属性constcat=Object.create(animate);cat.name='Whiskers';3、Object.setPrototypeOf()（最直接，推荐用于简单继承） Object.setPrototypeOf(cat,animate);定义类 class自定义promise 函数webpack 打包所做的优化一、代码分割与懒加载SplitChunksPlugin（自动分包）、动态 import() 懒加载、 预Preload / Prefetch 提前加载关键资源二、Tree Shaking（死代码消除）移除未使用的 ES Module 导出，减小包体积。Webpack v4+ 默认开启三、模块解析与压缩优化TerserPlugin（JS压缩）、CssMinimizerPlugin（CSS 压缩）四、资源处理与加载优化Image Minimization（需插件）如image-minimizer-webpack-plugin + sharp/svgo： 自动压缩 JPG/PNG/SVG，WebP转换，尺寸裁剪。五、缓存与长效优化（Long-term Caching）runtimeChunk: ‘single’ ，将 webpack 运行时代码（webpack_require等）提取为独立 runtime.js。六、 开发体验优化（Dev Server）七、性能监控与诊断webpack-bundle-analyzerapp.js 如何导入所有的文件1、对于 Webpack 项目: 使用 require.context。2、对于 Vite 项目: 使用 import.meta.glob，它更强大且支持 TypeScript 类型推断。3、对于 Node.js 项目: 使用 fs.readdir + require。重绘和重排的理解以及如何减少相关使用重绘（Repainting）重绘是指当元素的颜色、背景色、边框颜色等视觉属性发生变化时，浏览器需要重新计算这些元素的像素值并重新绘制到屏幕上。这是一个相对轻量的过程，因为它不会影响布局，只涉及视觉上的变化。触发重绘的情况：1、改变元素的颜色属性，如 color 或 background-color。2、 修改边框颜色。 更改元素的可见性，如使用display 或 visibility 属性。3、 浏览器窗口大小改变时，可能需要重新绘制某些元素。重排（Reflow）重排是一个更复杂且消耗资源的过程。当网页的布局发生改变，比如元素的位置、大小或结构发生更改时，浏览器需要重新计算所有相关元素的位置和大小，然后重新绘制整个页面或页面的一部分。这个过程可能会非常耗时，特别是在大型或复杂的文档中。触发重排的情况：1、修改元素的尺寸，如宽度（width）、高度（height）、内外边距（margin、padding）。2、插入或删除 DOM 元素。3、改变元素的定位方式，如 position 的值。4、字体变化导致的文本重排。5、布局模式的变化，如从流式布局变为网格布局————优化操作：1、批量操作：尽量将多个样式修改放在一个事件处理函数中完成，避免连续的单一操作。2、使用 CSS 动画和过渡：使用 CSS 动画和过渡可以避免JavaScript 中的重排和重绘。3、使用requestAnimationFrame：这可以确保动画在浏览器准备重新绘制屏幕时执行，而不是立即执行。4、避免使用昂贵的布局属性：如 box-sizing: border-box 可以避免在计算尺寸时频繁触发重排。5、 使用 will-change 属性：这个 CSS属性告诉浏览器预先优化元素，如果它可能经常改变。6、 异步加载样式和脚本：避免阻塞页面渲染。sass 和 less的区别， 以及用过的方法Sass 和 Less都是CSS预处理器，它们允许开发者使用变量、嵌套规则、混合（mixins）、函数等高级特性编写CSS，然后编译成普通的CSS文件供浏览器使用。尽管它们的目的相似，但在语法、编译环境、特性细节等方面存在一些差异：Sass (SCSS) 与 Less 的主要区别：1、语法差异： Sass有两种语法格式：Sass（缩进语法）和SCSS（类似CSS的语法）。Sass使用缩进表示嵌套关系，而SCSS的语法更接近CSS，使用大括号和分号。Less 使用的语法与CSS非常相似，增加了变量(@)、嵌套、混合等功能，使用大括号和分号来表示代码块。2、 编译环境： Sass传统上依赖Ruby环境，但现在也支持其他编译工具如Dart Sass，不依赖Ruby环境。 Less可以在客户端通过引入less.js实时编译，或者在服务端通过Node.js环境编译3、 变量符号：Sass 使用$作为变量前缀。Less 使用@作为变量前缀。4、运算符支持： 两者都支持基本的数学运算，但Sass提供了更丰富的运算符和更广泛的运算支持。5、混合器（Mixins）和扩展性：Sass 支持更复杂的混合器和继承功能，允许传参、内容块等高级特性。Less 也支持混合器，但相对简单，不支持内容块等Sass中的某些高级特性。 工具库和生态系统： Sass 有Compass这样的强大工具库，提供更多现成的模块和功能。 Less 的生态相对较小，但依然有丰富的第三方库和插件支持。_使用方法：安装与编译： Sass 可以通过命令行工具（如dart-sass、node-sass或sass gem）安装并编译。 Less也可以通过Node.js的less模块安装并使用命令行编译，或在项目中直接引入less.js进行客户端编译。 编写代码：在项目中，开发者通常会创建.scss（Sass）或.less文件编写预处理代码，然后通过相应的编译工具将其转换为浏览器可识别的.css文件。集成开发环境： 许多现代的前端开发工具和IDE（如Visual StudioCode、WebStorm）都支持Sass和Less的语法高亮、自动编译以及错误提示，便于开发者编写和调试代码。 模块化和组织：两者都鼓励模块化和代码重用，通过导入（@import）其他文件来组织代码结构。npm run build 后的包，是部署在哪个web服务器上（在不使用jenkins的情况下）, 部署的流程nginx 的作用前端设计模式 ，工厂模式等模块模式（Module Pattern）:允许创建具有私有变量和公有方法的对象。通过闭包来实现私有成员，使用立即执行函数表达式(IIFE)或者ES6模块语法来封装代码。观察者模式（Observer Pattern）/ 发布订阅模式（Pub/Sub）:用于实现组件间的解耦通信。一个对象（主题）维持一系列依赖它的观察者对象列表，并在状态变化时通知它们。在前端中，常用于事件处理、数据绑定等场景。工厂模式（Factory Pattern）:提供一个创建对象的接口，但隐藏了创建逻辑，使得代码对于如何创建对象的细节不关心。在前端中，常用于创建DOM元素或JavaScript对象。单例模式（Singleton Pattern）:确保一个类只有一个实例，并提供一个全局访问点。在前端应用中，常用于管理配置、工具类等需要全局访问且只需一个实例的场景。策略模式（Strategy Pattern）:定义一系列算法，并将每一个算法封装起来，使它们可以相互替换。前端框架中的路由跳转、动画实现等可能用到此模式。 装饰器模式（DecoratorPattern）:动态地给一个对象添加一些额外的职责，就增加功能来说，装饰器模式相比生成子类更为灵活。在前端，可以用于增强组件的功能，如添加新的样式或行为。代理模式（Proxy