面试主观题

自我介绍

我叫沈君鸿，现在在腾讯 TAPD 就任前端岗位，主要负责的业务有 TAPD 前后端分离的改造，以及前后分离的性能优化部分，工作中还参与过富文本编辑器和甘特图的功能开发。

首先就是需求和缺陷列表的性能优化部分.

旧版的需求 缺陷列表 只能支持到需求树 200，而我们现在做的事情就是双向懒加载的方式实现需求树突破 200 的性能。

针对底层的 table 组件进行改造，原本是用 element 的 table 组件生成。

1. 大计算量的逻辑走 webworker 将需求树的一些属性、权限计算的部分放到 webWork 里面。

2. 精简 api 请求，将 api 都收敛起来。

3. 组件进行按需加载，复用组件，资源大小的优化。

对表格的整体优化围绕这个来说：仅渲染视窗可见的数据、进行函数节流、 减少驻留的 VNode 和 Vue 组件，不使用显示的子组件 slot 方式，改为手动创建虚拟 DOM 来切断对象引用。

首先就是首屏的可视区域懒加载：

故事背景是： Tapd 是可以选择展示多少条需求的，比方这个用户选择了展示 100 条需求，而这些需求可能每条都包含 200 个子需求，这时候数据量瞬间就上来了，100 * 200 = 2w 条数据，肯定是我们不能接受的把 2w 条数据都在页面上渲染成列表。

所以我做了操作是： 首先获取到用户的浏览器的宽跟高，因为我们的每一条列表的高度是固定的所以能够获取到需要渲染的列表条数，又因为我们自己实现了滚动条，能够通过滚动条的滚动偏移量获取去获取到相对应应该补充的的数据。 我这里还做了 DOM 的复用。如果 DOM 的节点太大，还是会感到渲染卡顿，所以我们复用已有 DOM 节点。减少 DOM 变更规模，进行以空间换时间的形式，在表格的 jsx 层面进行一个缓存 vnode 的节点信息，等到要滚动的时候，如果是已有的 vnode，则可以直接复用，而不用在渲染相对应的。

故事背景是： 用户的表格行和列可能会非常多，比如 50 行 、 20 列，这 20 列可能会包含时间控件，日期控件，下拉框控件（甚至这个下拉框可能包含几百个选项），人名输入框控件，还有一些自定义类型的控件，这时候就会有 50*20 = 1000 个组件需要渲染出来。在页面首屏渲染的时候其实加载时长是非常的长，会有一个白屏的现象。

我做的一个优化点是：用户在进来的时候并不需要去修改表格里面的数据，更多的是一个看的功能。所以我在页面初始化其实渲染到页面上的是静态的 text 标签。起到了提高首屏渲染的优化方案。 其次通过代理的方式去劫持他修改的操作，比方他现在想修改某列的值，这时候我就会去定位到他想修改的那个 dom，进行节点的判断，获取到上面的组件类型，比方说是一个处理人， 映射的类型就是 username，这时候我就会去加载人名控件，在进行组件的替换（在 vnode.el 上面进行替换）。在把组件重新渲染上去，让用户能够操作。

具体的方法是：

利用组件构造器实现动态添加组件，通过 Vue.extend() 方法创建一个组件构造器，然后通过 new 的方式创建一个组件实例，并挂载到页面上。

() => import("../components/NewComponent.vue"),
//手动创建节点,实现间接挂载
var mpNode = document.createElement("div");
mpNode.setAttribute("id", "mp");
var pnode = document.querySelector("#mount-point");
pnode.appendChild(mpNode);

// 创建构造器
var Profile = Vue.extend({
  template: '<button @click="fn">内部创建的节点组件</button>',
  data: function () {
    return {
      msg: "hello world",
    };
  },
  methods: {
    fn() {
      console.log(this.msg);
    },
  },
});
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount("#mp");

new Profile().$on("updateNum", (newNum) => {
          this.num = newNum;
        });

富文本编辑器实现的功能：

富文本编辑器 主要有两种方案：提供挂载点和自定义组件：

1. 自定义组件 （插入思维导图、腾讯文档、插入自定义对象、插入代码块） 在编辑器里面将自定义的按钮绑定好通信逻辑，在业务层面去监听调用的部分。这一部分主要是依托于编辑器的能力

2. 挂载点 作为亮点 把这个能力交出去 封装一个可复用的组件，并提供便捷的接入方式

以自由的程度让用户可以自定义接入规则、

富文本编辑器的性能优化： 编辑器分为，编辑和预览两种模式。实际上我在插入的时候只会保存。文档的 id 以及一些相关信息，并不会保存文档的内容。 而是在预览的时候，才去通过 id，取回文档内容。起到一个节省性能开销的方案。 比如说插入了 20 篇腾讯文档， 而这时候 我只会加载可视区域的篇幅，只有在文档进入可视区域的时候，才会去替换，取相对应的值。

故事墙的拖拽动画优化：

在运用自己写的 requestAnimationFrame 去做性能优化的提升，解决重复拖动的时候，重复渲染造成的卡顿

甘特图的性能优化：

主要的难点还是在在于处理左边表格变动的时候，右边甘特图的自适应宽高情况

甘特图 部分就是 canvas 是重点

针对 canvas 的一些优化

1.只处理可视区域的内的甘特条和关系线

2.处理计算逻辑

3.我们将这里面的一些鼠标操作都用代理的形式统一管理起来

this.ganttChart.mouseEvents;

在运用自己写的 requestAnimation 去做性能优化的提升，解决重复拖动的时候，重复渲染造成的卡顿

/**
 * requestAnimationFrame polyfill
 */
(function () {
  let lastTime = 0;
  const vendors = ["ms", "moz", "webkit", "o"];
  for (let x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[`${vendors[x]}RequestAnimationFrame`];
    window.cancelAnimationFrame =
      window[`${vendors[x]}CancelAnimationFrame`] ||
      window[`${vendors[x]}CancelRequestAnimationFrame`];
  }

  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function (callback) {
      const currTime = new DatePolyfill().getTime();
      const timeToCall = Math.max(0, 16 - (currTime - lastTime));
      const id = window.setTimeout(() => {
        callback(currTime + timeToCall);
      }, timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };

  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function (id) {
      clearTimeout(id);
    };

  class DatePolyfill {
    constructor(date) {
      if (!date) {
        return new Date();
      }
      const { userAgent } = window.navigator;
      if (userAgent.includes("Safari") || userAgent.includes("wxwork")) {
        if (typeof date === "string") {
          date = date.replace(/-/g, "/");
          return new Date(date);
        }
        return new Date(date);
      }
      return new Date(date);
    }
  }

  window.DatePolyfill = DatePolyfill;
})();

主要的难点还是在在于处理左边表格变动的时候，右边甘特图的自适应宽高情况

window.requestAnimationFrame(() => {
  const elClientRect = getBoundingClientRect(this.$el);
  let { x, y } = elClientRect;
  const { width } = elClientRect;
  x = Math.max(x, 0);
  y = Math.max(y, 0);
  x += document.body.scrollLeft;
  y += document.body.scrollTop;
  this.width = width;
  this.tableWidth = parseInt(this.width * this.splitPecent);
  this.ganttWidth = this.width - this.tableWidth;
  if (this.fixedHeight) {
    this.height = this.fixedHeight;
    this.contentHeight = this.fixedHeight;
  } else {
    this.height = Math.min(
      window.innerHeight - y - this.marginBottom,
      this.flattenList.length * this.rowHeight + 60 + 9
    );
    this.contentHeight = window.innerHeight - y - this.marginBottom;
  }
  this.ganttChart.update({
    width: this.ganttWidth,
    height: this.height,
  });
  this.$emit(
    "sizeUpate",
    this.flattenList.length,
    this.flattenList.length * this.rowHeight + 60
  );
});

在魅族的时候主要负责的项目是游戏管理后台(这个项目:技术栈是在原有采用 原生 js 和 jquery 的基础上,采用了微前端架构 qiankun,接入了 React 和 vue )和活动模板(Vue + Electron)还有游戏会员俱乐部。

对未来有什么规划吗

未来 2-3 年，在公司的平台上面继续深入学习，提升自己的专业技能，持续成长。同时也能不断地接受新的挑战。在做好现在这个工作的基础上，我当然希望未来有能机会进一步承担更多的管理任务，并且可以参与公司的策略. 未来的 3-5 年, 希望能带团队.

你为什么从上家公司离职

从这家公司离职主要有两方面的原因， 一方面公司深圳这边准备搬回珠海了，而我觉得待在深圳更有发展的空间。另一方面， 公司层面来说的话，就是因为公司还是一家传统的硬件手机厂商，想去纯互联网的。我个人的还是想去互联网类型的公司。

为什么采用微前端：乾坤

项目的故事背景是：团队内部同时拥有 react 和 vue 还有些原生的 js 调用的，以往都是 iframe 嵌套页面的，发版本时机难以统一，比如 react 技术栈实现的功能没有完成延期，其他两个技术栈实现的需求，这时候就会出现延期的现象。 iframe 不利于我们进行组件的通信，其原生带来的割裂感，使我们无法复用组件和 css 样式。qiankun 使用的是沙箱的机制，通过劫持路由, 配合 webpack 构建出相同的资源访问形式，进行切换不同路由找到相应的页面，在进行加载。

你做过的项目内容对你来说有难度

你觉得你在最近一份工作中比较有亮点的部分

项目排期

• 制定项目计划

• 跟进项目进度

• 把控项目质量

1. 对需求进行尽量细的功能点拆分, 有助于准确评估排期(精确到 2 天)

2. 根据实际项目情况,预留适当的 buffer 时间(大约为项目总时长的 5% ~ 10%)

3. 排期一旦确定, 视为对所有成员的承诺,非极端情况不可更改

在这个新平台上你如何面对新的挑战

我首先会了解我的工作职责，看我的职责范围内我需要承担什么样的责任或者 KPI，明确职责范围之后制定相应的实施计划来逐步完成工作目标。

终面的 boss,究竟关注什么

一般地，经理级别的面试官关注候选人的工作技能有多强，总监及以上的面试官则更关注候选人的战略思维与个人潜力是否深厚。 误区一：急于表现自我

能走到终面的候选人，在前期面试一般都得到了不同面试官的赞许，这很容易使得一些候选人滋长自满情绪，在终面中给人以过于表现自我的印象，从而导致面试失败。

误区二：忽略面试官问题背后的真实意图

由于终面一般由具有多年管理经验的用人经理或高级管理者进行，候选人应尤其关注面试官每一个问题背后的意图：一方面提供给面试官他们最想知道的信息，一方面抓住每一个机会展现更全面的自己。

误区三：回答不当造成自身缺点被放大

每个人在工作中都有自己的优缺点，我们建议候选人在面试中合理有度地展示它们。不过，有的候选人在进行终面时，面对面试官提出的复杂问题，在回答中大量展示了自己的缺点，造成了不足之处被放大的假象，这是应当避免的。

如果你对自己的面试技能非常自信却频频在终面时出现问题，不妨先从工作胜任力的角度想想，自己的关键技能是否有待提升。

问你该问什么的时候：

不要跟 HR 讨论薪水 直接跟面试官要 feedback

我会在进行电话面试的同一天进行 follow up，让招聘官知道面试过程很愉快，感谢他们抽出时间和我交流，并且再次强调我对公司和职位的关注

简单来说：在同一天或一天后跟进。 在个人面试之后跟进的时间表与电话面试非常相似。你知道你应该结合 follow up 的信息发送一个真诚的“感谢信”感谢招聘官为你付出的时间。

您对我的面试或者职场发展有什么建议。

当你面试到后面，企业优中选优的时候，如果你没有特别闪光的经历，你的优秀和别人拉不开极大的差异的时候，学历必然会成为继续往下走的一道阻碍。学历无法改变，只能努力制造闪光点。

专业能力面（技术面）环节，一般会按照 基本功考核、业务经验考核、综合深度考核 的递进法。业务阶段的不同、团队规模由小到大，岗位的定级不同，一般的选人差别，是 “能独立做完” - “能独立干好” - “能主导某个专项” - “能引领某个体系”；要求上也会是从做完做好，到追求卓越，乃至极致。

面试的本质: 亮点展示 WHYYOU WHYME 围绕兴趣, 能力, 未来 心态要好: 面试官--普通人, 未必有相关的培训 要保持一致性 要真诚

金字塔原理: 结论先行, 自下而上. 职业规划--从远到近,从虚到实. 自我介绍-简单明了, 买下伏笔.

1. 自我认知,你对自己是否了解

2. 组织承诺, 你到底能在我们这儿踏实淦几年

优缺点

1. 喜欢追求细节导致项目未能按期完成。通过实践管理能力改变工作方式，在完成项目的情况下在改善细节。

2. 不止如何拒绝，同事要求帮忙一概揽下，影响自己的工作进度。通过多任务处理能力设定优先顺序，以该优先顺序表向求助同事展示自己手上的工作，并给其一个自己在何时可以给予帮助的时间估计，让求助人自行决定是否求助。

3. 有时候觉得把任务布置给别人，比自己直接做完更花时间精力，于是选择自己做完。我觉得这样做不合适，加入多个人的想法可以做的更好。

每个人都有缺点，你直接说平常真正让你感觉有问题的点，或者周围同事评价你可以改善的点。

特别是不要提本职位相关的反面，因为这些是职位本身要求你应该具备的素质。 说完缺点后，要提正在进行的改善措施，或者后续准备做的事项，让面试官感受到你能正视个人的不足，并有行动来缓解缺点的影响。

薪资

先反问对方，公司的薪资结构是怎样的？

1.五险一金 2.每个月的工资构成（底薪+绩效+餐补+交通补等等） 3.12 个月的基本薪资+季度奖金+年终奖等等 4.涨薪机制（一年有多少次考核晋升调薪机会、KPI 考核）、期权等等。

休假、加班制度

我希望的薪资是税前 xx-xx(一个区间）来进行回答（这个范围比自己预估的高一些，避免 HR 有意压价而吃亏）.

事件归因

当下真实发生的，具体、紧急且重要的；

适合向过来人 / 同道中人请教的；

你困扰已久，百思不得其解的；

事件归因

我的能力在哪里

未来我要做什么

不用着急回答，先花点时间想想怎么回答的更好 由浅入深，说出深度---日常多做积累，多思考 api 背后的技术逻辑 例如： 介绍一下 vue computed 属性 表象是什么 深度：底层逻辑是怎样的，跟响应式系统有什么关系 广度：v3 与 v2 有什么区别，react 有没有类似的实践，有什么优缺点

遇到卡点： 坦诚表达没接触，没遇到，求换题目 不太了解，但可以展开聊聊自己的猜想和想法 问问面试官的理解，思考面试官给出的答案

可以主动了解下对方的技术栈、业务 可以要求加问你擅长的问题 可以问对方对候选人的预期，然后着重强调

定目标 做笔记 个人作品

复盘下这次面试 1.前期浪费了太多的时间和机会，应该改成第一二周准备，第三四周集中面试。下次不能在以面代练的形式了，应为我的题库已经很丰富了。 2.一开始的目标定的太低了，如果目标在 30k 左右，应该定 35k 的目标。

复盘措施：

1. 7-9 点看前端基础

2. 周末 7-9 点做面试题

---

1. 好奇心

2. 充当的角色

3. 抗压能力

4. 处理问题的能力

我觉得我的优势是

平时会比较注重用户体验，加入你完成了个非常酷炫的功能，没有给用户带来任何体验上的增强的话，都是没有用的。

当一件事情不知道的时候 还在夸夸其谈 确实有点搞笑

分析了下为啥以前写过的知识点还是会忘记，甚至自己写的文章看不下去，因为我自己写的没有抓住脉络，完全是东记一下 西记一下， 过段时间来看肯定补不起缺口的思路。

执行力不行

万事万物都是有其脉络的，从深浅拷贝-> 循环引用->尾调用->尾递归->函数柯里化

这一条完整的链路

本质上我也是吃了时代的红利，吃出来的还是得吐回去 1、交付质量方面，能够充分了解产品需求，并独自设计技术方案，在代码实现时关注代码规范、复用性和性能，在需求交付前能够充分自测，保证质量红线，提升交付质量。 2、团队协作方面，需要准备好问题和自己思考的解决方案，带着问题和方案去参与团队讨论，并做出方案总结和思考改进，做到高效沟通。 3、技术成长方面，期待 hoel 能够积极主动的了解 TAPD 业务、在技术实现时充分考虑性能、安全、复用性等方面；积极参与到富文本编辑器、tapd_fe 等项目的建设。

但在主人翁意识、需求交付质量、开发习惯

离职原因： 1.公司内部有变动 2.收到外部的邀约--拿到 offer

最近在关注什么前端方面的事情

rust 在 web 前端和工具链层面的, 低代码，编辑器, vite 相关的构建工作取代 webpack

主管对你的评价

任务时间规划和细分。

对某件事情做的要求太高，有时候会导致工作中花费太多时间，可能会造成风险的不可控。

我非常坚持照章办事，很难做到根据人情世故灵活的操作，这在很多情况下是一个很大的缺点，但至少目前我还没有掌握要怎么做到这种灵活.

怎么评价你的主管

了解员工的需求以及他们的长处，有时候会从技术角度跟产品经历据理力争一些酷炫但是不贴近用户的事情。

你希望你的主管具备什么样的

我真的很欣赏那些可以提出建设性批评而又不会让员工觉得他们失败或受到负面评价的经理。

我相信最好的主管会及时传达他们的期望，并让他们的团队了解工作场所的新变化。虽然我觉得我独立工作非常好，但我也喜欢定期与我的主管联系，以确保我们的项目都按部就班——无论是通过电子邮件非正式地还是在正式的每周员工会议上。

你还有要问的吗

关于公司薪酬福利这块，还有职业发展这块

工作一段时间发现你不适合这个职位你怎么办？

回答提示：一段时间发现工作不适合我，有两种情况：

1）如果你确实热爱这个职业，那你就要不断学习，虚心向领导和同事学习业务知识和处事经验，了解这个职业的精神内涵和职业要求，力争减少差距;

2）你觉得这个职业可有可无，那还是趁早换个职业，去发现适合你的，你热爱的职业，那样你的发展前途也会大点，对单位和个人都有好处；

谈谈你对跳槽的看法？

回答提示：

1）正常的"跳槽"能促进人才合理流动，应该支持;

2）频繁的跳槽对单位和个人双方都不利，应该反对。

跟 HR 谈薪水

先谈谈在腾讯的薪资，年总包在 2216=35w 左右，去年因为公司整体收益不好所以拿了 3 个月左右。现在入职的公司的话是 2714 在 38w 左右.

1.五险一金. 2.每个月的工资构成（底薪+绩效+餐补+交通补等等. 3.12 个月的基本薪资+季度奖金+年终奖等等. 4.涨薪机制（一年有多少次考核晋升调薪机会、KPI 考核）、期权等等.