【前端面经】三年+面试

前言

离职原因：没有晋升空间和人文关怀，同时也考虑到个人发展原因，于是想跳槽。

大概是从过完年过来开始改简历，2月19号开始投递简历，去年年底经历了很多事情，丧失了继续待下去的决心。投递简历基本上都是在boss 直聘、智联招聘上投的简历。

下面简单介绍一下我面的

  • 背景：
  1. 公司地址稍微偏一点
  2. 岗位招聘感觉比较急
  3. 自研965
  • 基本情况
  1. hr和用人部门筛完简历，Call我，沟通预约了面试时间
  2. 一面面试官是技术，巧得是我上一家公司他也待过，接下来就是聊项目聊技术，这个环节薪资被砍了一波，对我的技术还是蛮满意的。面试前还是有点小紧张，面试过程中倒是夸夸其谈
    3.二面面试官是他的领导，觉得我要的薪资高了，尝试压一压我的薪资

一面

  1. 自我介绍
  2. 原型链，改变this指向的方式有哪些
  3. 是否有封装工具库（类似lodash）、组件，均采用发布npm的方式
  4. forEach与filter的区别？
  5. 怎么中断循环？（这里注意for循环与forEach、map等终止循环方式不一样）
  6. 处理数据，实际场景（考察find与findIndex）
  7. map实际工作中哪些场景用到
  8. 项目中有无封装hook？有什么优点？
  9. 一行3个div使用flex布局怎么写
  10. 不使用全局状态管理pinia、vuex，也不使用props、emit方式怎么在父组件传递数据到任意子组件（考察Provide和Inject）
  11. 是否会三维方面的，比如使用gis
  12. 实际场景：两个div，第一个div是标准流，渲染的地图，第二个div是写的定位，渲染的图表，怎样做到触发地图div的事件而不触发图表div的事件（考察pointer-events: none;）
  13. 项目中封装了哪些组件？

二面

  1. 自我介绍
  2. 换工作原因
  3. 接着就是挑刺，压薪资了

准备面试过程中复习的面试题

  • 常见的设计模式有哪些？

    单例模式、工厂模式、观察者模式、策略模式、适配器模式、装饰器模式、代理模式、模板方法模式、建造者

    模式、享元模式等。

  • 32种设计模式是根据什么来的？（6大程序设计原则和23种设计模式）

    1. 实践经验
    2. 重复出现的问题
    3. 最佳实践

  • 前端告警和日志上报埋点都是怎么做的？

    前端告警：

    1. 在代码中使用try-catch块来捕获异常，并在catch块中将异常信息发送到后端服务器或第三方错误监控平

      台。

    2. 使用全局的错误处理函数，如window.onerror，来捕获未被try-catch捕获的异常。

    3. 将错误信息包含堆栈信息、用户环境和其他相关数据，并通过HTTP请求或WebSocket等方式将其发送到

      后端服务器。

    日志上报埋点：

    1. 在关键业务逻辑、用户操作和页面加载等关键点上插入埋点代码，用于记录相关的日志信息。
    2. 日志信息可以包括用户行为、请求参数、响应时间、错误信息等。
    3. 将日志信息通过HTTP请求或WebSocket等方式发送到后端服务器或第三方日志分析平台。

  • 当前了解的前端层面的新技术有什么？

    1. Vite: Vite 是一个由 Vue.js 核心团队维护的新一代前端构建工具。与传统的基于 webpack 或者 Rollup 的

      构建工具不同，Vite 借助 ES 模块的特性，实现了基于浏览器原生 ES imports 的开发服务器。这使得 Vite

      在开发过程中能够实现快速的冷启动、模块热更新等特性，极大地提升了开发体验。

    2. TypeScript: TypeScript 是一种由微软开发的超集 JavaScript 的语言，增加了类型系统和其他高级功能，

      使得代码更容易维护和调试。TypeScript 已成为许多JavaScript项目的首选语言，并且被广泛用于开发大

      型、复杂的应用程序。

  • vite对比其他打包工具有什么优势？缺点？

    优势：

    1. 快速的冷启动：Vite 利用现代浏览器的 ES 模块特性，实现了零配置的快速冷启动。这意味着在开发过程

      中，当你修改代码并重新加载页面时，Vite 可以非常快速地重新构建和刷新页面，从而提高开发效率。

    2. 按需引入： Vite 支持按需引入模块，只会将实际使用到的模块加载到浏览器中，而不是像传统的打包工

      具一样将整个应用打包成一个或多个 bundle。这可以减少首次加载和热更新的时间，提高应用的性能。

    3. 原生ES模块支持：Vite 直接利用浏览器对 ES 模块的原生支持，不需要进行额外的转换或处理。这使得

      Vite 更加轻量且无需额外的构建步骤，加快了开发环境的构建速度。

    缺点：

    1. 相对较新：相对于 Webpack 这样的成熟工具，Vite 是相对较新的项目，仍处于快速迭代和发展阶段。这

      可能意味着在某些情况下，Vite 可能不如 Webpack 成熟和稳定，并且可能存在一些潜在的问题或限制。

    2. 构建复杂性：相对于 Webpack 的全功能打包工具，Vite 更专注于开发环境的快速响应和构建速度。如果

      你的项目需要更复杂的构建配置或具有特殊需求，可能需要额外的配置和插件才能满足要求。

  • 业务场景问题：团队4个人人，你是leader，又一个非常紧急且重要的任务，需要两周开发完整，你如何应

    对？

    1. 制定详细计划
    2. 分配任务
    3. 设定目标
    4. 保持沟通
    5. 提供支持
    6. 灵活调整

  • 现在用户反馈打开页面白屏时间很长，页面操作很卡，你如何优化？

    1. 代码优化：减少不必要的计算和重复操作，优化循环和递归等。

    2. 资源压缩和缓存：对页面使用的脚本、样式表和图片等静态资源进行压缩和合并，减少网络传输的数据

      量。同时，设置适当的缓存策略，使用户在后续访问时可以从缓存中加载资源，减少服务器请求和网络延

      迟。

    3. 懒加载：采用懒加载技术，将页面中的非关键资源（如图片、视频等）延迟加载。只有当用户需要访问或

      可见时才加载这些资源，从而减少初始加载时间和页面的总体大小。

    4. 代码分割：将页面代码按逻辑模块进行分割，并通过异步加载技术（如使用动态导入或按需加载）进行延

      迟加载。这样可以让页面初始加载的内容更小，只加载当前页面所需的关键代码，提高页面的打开速度。

    5. 性能监测和优化：使用工具来监测页面的性能指标，如加载时间、渲染时间、资源大小等。根据监测结果

      分析瓶颈，并针对性地进行优化。可以使用浏览器开发者工具、性能分析工具等来辅助分析和优化。

    6. 服务器优化：检查服务器的配置和性能，确保服务器能够处理并响应请求的负载。优化服务器端的代码和

      数据库查询等操作，提高数据获取和处理的效率。

    7. 响应式设计：对于移动设备的用户，采用响应式设计或移动优先的布局方式，使页面在不同设备上呈现良

      好的性能和用户体验。

  • 你期望的团队是什么样的？（来考察你是不是跟公司的价值观契合）

    1. 我期望的团队是一个充满创新和合作精神的团队。我希望团队成员能够不断追求技术和服务的卓越，愿意

      分享知识和经验，共同成长。团队应该注重用户体验，关注客户需求，并以此为出发点进行工作。同时，

      我也希望团队能够保持开放和包容的态度，尊重个体差异，鼓励多样化的观点和想法。团队成员之间应该

      有良好的沟通和协作能力，能够相互倾听、支持和协助，共同实现团队和个人的目标。另外，我也希望团

      队能够在工作中保持积极的态度，勇于面对挑战，乐于学习和创新。

  • 重绘和重排有什么区别？触发条件是什么？如何避免触发？

    重绘：指当元素样式发生改变，但不影响其在文档流中的位置和大小。例如，修改元素的背景颜色或文本颜色。引发重绘的原因：

    1. 字体颜色改变
    2. 边框样式改变
    3. 背景颜色、图片、定位、尺寸改变
    4. 外边框颜色、样式
    5. 外发光改变

    重排：指当元素的布局属性发生改变，影响其在文档流中的位置和大小。例如，修改元素的宽度、高度、位置等。

    引发重排的原因：

    1. 页面首次渲染
    2. 浏览器窗口大小发生改变
    3. 元素尺寸或位置发生改变
    4. 元素内容变化（文字数量或图片大小等）
    5. 元素字体大小变化
    6. 添加或者删除可见的 DOM 元素
    7. 激活 CSS 伪类（:hover）
    8. 设置 style 属性
    9. 查询某些属性或调用某些方法

    避免触发：

    1. 避免频繁使用 style，而是采用修改class的方式。

    2. 将动画效果应用到position属性为absolute或fixed的元素上。

    3. 使用 display: none 做DOM离线处理，减少回流重绘次数。因为在display属性为none的元素上进行

      的DOM操作不会引发回流和重绘。

    4. 对于 resize、scroll等进行防抖/节流处理。

    5. 利用 CSS3 的transform、opacity、filter这些属性可以实现合成的效果，也就是GPU加速。

    重绘不一定引起重排，重排一定会引起重绘。

  • **Tree-Shaking **

    Tree-Shaking 是一种通过静态分析来消除 JavaScript 中未使用代码的技术，主要用于优化 JavaScript 应用程

    序的性能。Tree-Shaking 是在函数级别进行操作的，不是在文件级别。

  • keep-alive

    1. <keep-alive> 可以缓存包裹在其中的组件（只能有一个直接组件），用于保存组件状态或者避免重新渲染。
    2. 可以通过 include 和 exclude 来指定和排除一些组件。

  • 从输入url到页面显示出来发生了什么？

    1. DNS解析

    2. TCP连接

    3. 发送HTTP请求

    4. 服务器处理请求并返回需要的数据

    5. 浏览器解析渲染页面

      解析HTML，生成DOM树，解析CSS，生成CSSOM树

      将DOM树和CSSOM树结合，生成渲染树(Render Tree)

      Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）

      Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

      Display:将像素发送给GPU，展示在页面上

    6. 连接结束

  • 数组常用方法

    push、pop、unshift、shift、splice、join、concat、forEach、filter、map、sort、some、every

  • 字符串常用方法

    length、charAt、concat、indexOf、includes、slice、split、toUpperCase、toUpperCase、trim、

    replace、search、match、

  • 常见的js继承方式有哪些？

    1. 原型链继承
    2. 构造函数继承
    3. 组合继承
    4. 原型式继承
    5. 寄生式继承
    6. ES6中的class继承

  • webpake怎么实现打包阶段的性能优化？

    1. 代码拆分
    2. 按需加载
    3. 压缩代码
    4. Tree Shaking
    5. 图片优化
    6. 持久化缓存

  • webpake打包流程

    1. 初始化阶段 - webpack （合并配置项、创建 compiler、注册插件）

    2. 编译阶段 - build （读取入口文件、从入口文件开始进行编译、调用 loader 对源代码进行转换、借助

      babel 解析为 AST 收集依赖模块、递归对依赖模块进行编译操作）

    3. 生成阶段 - seal （创建 chunk 对象、生成 assets 对象）

    4. 写入阶段 - emit

  • 如何解决并发问题

    1. 回调函数：在 JavaScript 中，回调函数是处理异步操作最基本的方式之一。通过将回调函数传递给异步函

      数，在异步操作完成后调用回调函数来处理结果。

    2. Promise 对象：ES6引入了 Promise 对象，它是一种更优雅处理异步操作的方式。Promise对象可以更好

      地处理异步操作的成功和失败，并支持链式调用，避免了回调地狱的问题。

    3. Async/Await：ES8中引入的 Async/Await 是建立在 Promise 的基础上的语法糖，使异步代码看起来更

      像同步代码，提高了代码的可读性和可维护性。

    4. 事件监听：使用事件监听器来处理并发操作也是一种常见的方式。通过注册事件监听器，在异步操作完成

      时触发相应的事件来处理结果。

    5. 消息队列：利用消息队列（如使用 Web Workers 或 Service Workers）来处理并发操作，将任务放入消

      息队列中按顺序执行，避免了多个任务之间的竞争条件。

  • try…catch

    try...catch 语句是 JavaScript 中用于捕获和处理异常的重要机制，可以有效地处理代码中可能出现的错

    误，提高程序的健壮性和可靠性。

  • 怎么修改原型链上的方法？

    1. 直接修改原型对象：例如，如果有一个构造函数 MyObject，它的原型对象上有一个方法 myMethod，可

      以通过 MyObject.prototype.myMethod = function() { ... } 来修改该方法的实现。

    2. 使用 Object.setPrototypeOf()：例如，如果有一个对象 obj，可以使用

      Object.setPrototypeOf(obj, newPrototype) 将其原型链修改为 newPrototype。

    3. 创建新的对象并指定原型：例如，通过 Object.create(oldPrototype) 创建一个新对象，并在新对象

      上修改方法的实现。

  • axios的原理

    封装了底层的 HTTP 请求库，提供了一套简单易用的 API 来处理 HTTP 请求和响应，同时支持拦截器、转换

    等功能，使得在前端开发中更方便地进行网络请求操作。

  • nextTick原理

    利用了 Vue 的异步更新队列和事件循环机制，让你能够在 DOM 更新完成后执行延迟回调。

    比如在修改数据后立即获取更新后的 DOM 元素的信息或执行一些需要在 DOM 更新后才能进行的操作。

  • 移动端适配

    1. 百分比适配

    2. Viewport meta标签：使用 <meta name="viewport"> 标签可以控制页面的视口大小，使页面在移动设

      备上显示正常。设置 initial-scale、maximum-scale、minimum-scale、user-scalable 等属性可

      以控制页面的缩放行为。

    3. rem适配：通过设置根元素的字体大小来实现页面元素的自适应缩放，从而适配不同设备的屏幕。

    4. CSS预处理器的单位转换：在使用 Less、Sass 等 CSS 预处理器时，可以结合 postcss-pxtorem 等插件，

      将 px 单位转换为 rem 或 vw/vh 单位，以适配不同不同设备的屏幕。

  • cookie和session 的区别？

    共同之处在于：cookie和session都是用来跟踪浏览器用户身份的会话方式。

    区别是：cookie数据保存在客户端，session数据保存在服务器端。

  • 如何改变作用域链（三种）

    1. 闭包
    2. with语句（with 语句在严格模式下被禁用）
    3. eval函数（容易引起安全隐患和性能问题）

  • 闭包

    function outerFunction() {
  var outerVar = 'I am from outer function';
  
  function innerFunction() {
    console.log(outerVar); // 可以访问外部函数的变量
  }
  
  return innerFunction;
}

const innerFunc = outerFunction();
innerFunc(); // 输出 'I am from outer function'

  • Promise

    有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。

    Promise构造函数接收一个函数作为参数，该函数的两个参数分别是 resolve （成功）和 reject（失败）。

  • js常见的数据类型

    String、Number、Boolean、null、undefined、Array、Object、Function、Symbol、BigInt

  • eventLoop事件循环

  • 浏览器的渲染机制 defer async

  • 虚拟dom的原理？diff算法？

如果是1~3年的小伙伴，我的建议是多背八股文.
注意：当然我也还看了其他基础八股文以及简单算法题，上面的是我个人觉得需要加强，甚至面试过程中问到概率比较大的一些问题，仅供参考！！

总结

在我开始投简历之前，我做了一周的面试准备，准确来说，去年就有在持续修改简历，那么我准备什么呢？

首先是准备简历和自我介绍。将自己所做过的所有项目都列出来，从里面找到自己收获比较大的或者是存在着技术难点的项目放到简历上并且总结梳理实现思路，以防面试过程中被问到。有一点非常重要：千万不要为了显得自己很厉害，把自己不了解或者不熟悉的技术写到简历里！这是非常不明智的，面试官会根据简历中的所写到的技术点和项目进行提问，如果问到了你不会的技术点，你又不能很好的表达出来，那可能就吃了一个暗亏。

第二步是遍历。需要大批量的去看网上的面经，面经的时间越近越是有可借鉴的地方。多关注简历里面写到和项目里用到的技术，多关注原生JS、技术框架、构建打包以及性能优化方向的知识，而对于css和html这些面试官能问到的范围比较小。

除了以上两点，还需要注意的是算法。算法这件事情很难在短时间内训练得很熟练，更多的是需要日常的的锻炼，培养了灵活的思维意识，才能在最短的时间内从题目中分析出需要使用的算法思想。当然，如果只是为了应付面试的话，那就没有这么复杂了，前端面试中可能涉及到的算法题不是很多，你只需要会做这些常见的题目就行了，甚至不需要举一反三。

除了做准备之外，还有一件事情必须要做：复盘和总结。对于我们面试的时候所遇到的问题，一定要及时的回忆和记录下来，尤其是自己没有回答上来的问题，及时的查漏补缺，找到一个能让面试官满意的答案并记录下来，这样的记忆往往会更加深刻。

最后希望这篇文章能帮你更好的梳理思路，顺利找到适合的公司和岗位。