前端档案

# 面经汇总

路漫漫其修远兮，吾将上下而求索

2021前端 = 安全+性能优化+http+算法+监控+源码

HR降低薪水：你的缺点是什么？
说出缺点=》如何发现=》做出的改变=》现在如何
例如：销售岗位，缺点是不擅长公开演讲，

# 一、技巧性问题

# 请问你的离职原因是什么？

  1. 求发展 2.不可力抗（公司倒闭、公司搬家、女朋友在北京）

寻求更好的发展，想去一个更大的平台，有专业的前端团队，和更多优秀的人工作，学习更多专业技能提升自己

# 是否结婚？打算什么时候要孩子？如何兼顾家庭和工作？

还没领证，顺其自然

# 你是如何看待加班的？

任何工作都免不了加班，但我会尽量提高工作效率，避免低效率导致的加班

# 最近在研究什么技术吗？

# 最近在看什么书？

我比较喜欢看书，书上的知识比较全面，也比较权威， 但是有一些新技术书上没有，或者一些技术难点看书不是很理解，我也看一些视频教程、官方文档之类的 另外，用电脑看书，方便做笔记，遇到demo可以自己运行跑跑加深印象

# 你还有什么问题要问？

// HR 工资组成 福利待遇 岗位要求 新员工是否有培训 岗位今后的发展 // 面试官 公司部门的组织架构，前端有多少人 进入公司后具体做什么工作，什么项目，什么流程 自己的经历和能力是否符合公司的要求

# 什么时间可以入职？

我需要等待前面几家公司的面试结果后，再给您答复。

切记不要回答：随时可以入职，可能会降薪资

# 项目中遇到的难点，你是怎么解决的？

# 你有什么好的代码习惯吗？

可复用性 → 健壮性 → 低耦合性 → 避免幻数 → 注释

# 你感觉你自己最擅长什么？

# 请问你的缺点是什么？

# 上家公司薪资，请问您的期望薪资是多少？为什么

我了解公司招聘前端的基础报价是15k，但是我入行早，在前端开发方面有较多的经验积累，所以我准备报20K。

应届生（公司已经有固定标准）- 打太极：我相信，在我的持续努力之后，公司会给我相应合理的报酬。这也是对我的一个激励，希望你能帮忙争取。

往届生 - 区间谈判法：

  1. 反问职位预算区间：你们这个职位的预算大概是多少？
  2. 重复简历上写的薪资区间

# 对未来有什么规划？

在业务上，做出更多的成绩；在专业领域里，让自己更有影响力。

  1. 持续优化xxx
  2. 重构了xxx
  3. 梳理xxx，总结xxx
  4. 排查xxx问题
  5. 改进了xxx逻辑，性能得到提升
  6. 通过 xxx 降低了 xxx 至 xxx
  7. 为了 xxx 重新设计了 xxx
  8. 为了 xxx 通过 xxx 完成了 xxx
  9. 通过 xxx 优化了 xxx 为 xxx
  10. 为了 xxx 将 xxx 应用到了 xxx
  11. 通过 xxx 提高了 xxx 至 xxx
  12. 为了 xxx 通过 xxx 将 xxx 集成
  13. 为了 xxx 通过 xxx 成立了 xxx

# 典型问题

技术探底的问题肯定会问一些，此外面试每个人多会问：

  1. 哪个项目让你最满意、代表你的最高水平？如何做的？
  2. 让你印象最深刻的一个（技术）难点，害的你搞了很久，最后怎么解的，有什么心得？
  3. 你做的时间最久的一个项目（或产品），你看到这个项目有哪些问题，你能做什么？
  4. 你能给我们团队或者产品带来什么？
  5. 你觉得前端怎么样？？？

前端开发处于一个猛烈发展的阶段，现在可以说大部分的网站都在关注前端，前端是直接接触用户的部分， 它融合了设计、程序还有一些整体的理念，一些优化，包括SEO。很多技术的实现都要通过前端，怎么把这部分做好是非常具有挑战性的事情。可能四五年前很多人都还在标准的实现上摸索，而现在有一个大家都朝着标准走的大方向，就能够更好的坚持，更好的专注，把前端技术做得更强大。

# 突出亮点

  1. 自己的经历和优势。
  2. 自己做过的项目中的难点，怎么思考和解决的。
  3. 自己的重大业绩，突破性成果，包括工作和学习。
  4. 对面试的公司的理解和认识，如果有独特的理解肯定会加分。
  5. 比赛成绩，国内排名，开源项目。

# 背诵

  • 基本信息：

  • 工作经历：

  • 技术优势/劣势：

  • 性格优点/缺点：

  • 技术难点/方案：

  • 未来规划：

  • 中意的项目：

# 一般会问的三个问题

  1. 自我介绍
  2. 对我们产品了解吗？有什么看法？
  3. 你有什么问我的吗？

# 一、自我介绍部分

1、把之前的工作梳理清楚，介绍条理清晰，有详有略。要猜测面试官对你的哪项工作可能会感兴趣，并重点介绍。 2、一定要介绍所做某个事情的结果，并且最好有核心数据的支撑。这里主要考察面试者的复盘意识和目标感。 3、面试前一定要思考“我为什么要做这个事情”，这里考验的是面试者对于一个产品的远期思考。

# 二、对于产品看法部分

这个问题主要问两类人，一是行业跨度大的人，二是初入职场的人（该问题很容易让萌新翻盘）。要亲身体验使用产品，了解产品本身的优缺点和竞争对手的优缺点，培养这部分的SENSE可以多看36氪和虎嗅等媒体的文章。

# 三、问面试官的问题

主要考察求职者的格局观大小，求职者的提问要体现自身的好奇心和上进心，而不是一上来就问：加班吗？上下班时间？岗位是做什么的？ 一个讨巧的办法就是反问面试官曾经提出的问题，比如增长方向是什么？长期目标是什么？平时主要看什么数据？ 或者问面试官对自己的评价或者本次面试表现。

# 提问环节

  1. 可以问本职岗位工作要求、职责。
  2. 可以问公司、公司的业务、体系、行业、客户。
  3. 可以问什么时候面试结果通知。
  4. 切忌纠缠薪资待遇。
  5. 如果你对公司所在行业以及业务能够提出一些好的问题也会加分

# 四、其他

一是坦诚，不要强行回答。二是不要放低面试姿态。

# 是否面试其他公司？是否有其他公司的offer

已经面试了很多家公司，但感觉都不是很合适，想找一家能完全施展我能力的公司

# 离职原因

# 二、技术性问题

引导面试官问自己擅长的问题

# 如何解决开发痛点，提升效率？（基础建设方面）

# 这个需求怎么做？（现场出题）还有其他方案吗？哪个方案最好？为什么？

# 框架的优劣比较/原理比较？

# 页面白屏监控？

# 页面加载时长？

参考 ：Navigation Timing 获取页面加载各个阶段所需时间 (opens new window)

window.onload = function () {
  var loadTime =
    window.performance.timing.domContentLoadedEventEnd -
    window.performance.timing.navigationStart;
  console.log(loadTime);
};

# 捕捉 js 异常？

try{}catch{}finally {}
throw()
  • 前端相关无障碍
1. 字体可放大
2. 语音搜索
3. 操作指导
4. 了解wai

# 动态表单？

参考我们的：玄武库代码生成器 (opens new window)

1. 前端动态表单，如 el-form，组件封装
2. 后台的根据数据库表生成，的增删查改

# 活动推荐页，怎么统计，埋点？

onclick  如果是a连接呢
存哪儿
了解淘宝的做法吗
浏览器指纹
IP推送
匿名推送可能造成无效推送，但总没有好

# 深浅拷贝

涉及面试题：什么是浅拷贝？如何实现浅拷贝？什么是深拷贝？如何实现深拷贝？

对象类型在赋值的过程中其实是复制了地址，从而会导致改变了一方其他也都被改变的情况。通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个情况。

知识点：栈和堆，基本类型和引用类型，字符串是直接存在栈里，object 是存在堆里，把地址存栈里

let a = {
  age: 1,
};
let b = a;
a.age = 2;
console.log(b.age); // 2

# 浅拷贝

首先可以通过 Object.assign 来解决这个问题，很多人认为这个函数是用来深拷贝的。其实并不是，Object.assign 只会拷贝所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址，所以并不是深拷贝。

let a = {
  age: 1,
};
let b = Object.assign({}, a);
a.age = 2;
console.log(b.age); // 1

另外我们还可以通过展开运算符 ... 来实现浅拷贝

let a = {
  age: 1,
};
let b = { ...a };
a.age = 2;
console.log(b.age); // 1

通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就可能需要使用到深拷贝了

let a = {
  age: 1,
  jobs: {
    first: "FE",
  },
};
let b = { ...a };
a.jobs.first = "native";
console.log(b.jobs.first); // native

浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到最开始的话题了，两者享有相同的地址。要解决这个问题，我们就得使用深拷贝了。

# 深拷贝

这个问题通常可以通过 JSON.parse(JSON.stringify(object)) 来解决。

let a = {
  age: 1,
  jobs: {
    first: "FE",
  },
};
let b = JSON.parse(JSON.stringify(a));
a.jobs.first = "native";
console.log(b.jobs.first); // FE

但是该方法也是有局限性的：

  • 会忽略 undefined
  • 会忽略 symbol
  • 不能序列化函数
  • 不能解决循环引用的对象
let obj = {
  a: 1,
  b: {
    c: 2,
    d: 3,
  },
};
obj.c = obj.b;
obj.e = obj.a;
obj.b.c = obj.c;
obj.b.d = obj.b;
obj.b.e = obj.b.c;
let newObj = JSON.parse(JSON.stringify(obj));
console.log(newObj);

如果你有这么一个循环引用对象，你会发现并不能通过该方法实现深拷贝

在遇到函数、 undefined 或者 symbol 的时候，该对象也不能正常的序列化

let a = {
  age: undefined,
  sex: Symbol("male"),
  jobs: function () {},
  name: "yck",
};
let b = JSON.parse(JSON.stringify(a));
console.log(b); // {name: "yck"}

你会发现在上述情况中，该方法会忽略掉函数和 undefined。

但是在通常情况下，复杂数据都是可以序列化的，所以这个函数可以解决大部分问题。

如果你所需拷贝的对象含有内置类型并且不包含函数，可以使用 MessageChannel

function structuralClone(obj) {
 return new Promise(resolve => {
   const { port1, port2 } = new MessageChannel()
   port2.onmessage = ev => resolve(ev.data)
   port1.postMessage(obj)
})
}
​
var obj = {
 a: 1,
 b: {
   c: 2
}
}
​
obj.b.d = obj.b
​
// 注意该方法是异步的
// 可以处理 undefined 和循环引用对象
const test = async () => {
 const clone = await structuralClone(obj)
 console.log(clone)
}
test()

当然你可能想自己来实现一个深拷贝，但是其实实现一个深拷贝是很困难的，需要我们考虑好多种边界情况，比如原型链如何处理、DOM 如何处理等等，所以这里我们实现的深拷贝只是简易版，并且我其实更推荐使用 lodash 的深拷贝函数。

function deepClone(obj) {
 function isObject(o) {
   return (typeof o === 'object' || typeof o === 'function') && o !== null
}
​
 if (!isObject(obj)) {
   throw new Error('非对象')
}
​
 let isArray = Array.isArray(obj)
 let newObj = isArray ? [...obj] : { ...obj }
 Reflect.ownKeys(newObj).forEach(key => {
   newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
})
​
 return newObj
}
​
let obj = {
 a: [1, 2, 3],
 b: {
   c: 2,
   d: 3
}
}
let newObj = deepClone(obj)
newObj.b.c = 1
console.log(obj.b.c) // 2

# SSR

nuxtjs -vue

缺点：需要前端人员直接维护服务器，对服务器压力大（发烫等可能）

# 模块化理解

# 前端设计模式

# 其他问题

  • pm2 基本用法，怎么监控：pm2 start npm --name "unibid" -- run start

  • koa2 基本用法【背诵】：https://koa.bootcss.com/ (opens new window)

  • websocket 怎么用，有什么 API：new WebSocket("wss://"),onopen onerror onclose onmessage

    大方向

# JSBridge原理

参考：聊一聊桥接（JSBridge）的原理 (opens new window)

JSBridge: 在Hybrid模式下，H5会经常需要使用Native的功能，比如打开二维码扫描、调用原生页面、获取用户信息等，同时Native也需要向Web端发送推送、更新状态等，而JavaScript是运行在单独的JS Context中（Webview容器、JSCore等），与原生有运行环境的隔离，所以需要有一种机制实现Native端和Web端的双向通信，这就是JSBridge：以JavaScript引擎或Webview容器作为媒介，通过协定协议进行通信，实现Native端和Web端双向通信的一种机制。

更新时间: 12/10/2021, 6:51:36 PM

百度 →