面试技巧

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

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

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

一、技巧性问题

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

求发展
不可力抗（公司倒闭/欠薪、公司搬家、女朋友在北京）

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

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

还没领证，顺其自然

你是如何看待加班的？

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

最近在研究什么技术吗？

你还有什么问题要问？

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

什么时间可以入职？

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

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

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

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

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

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

请问你的缺点是什么？

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

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

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

往届生 - 区间谈判法：

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

对未来有什么规划？

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

持续优化 xxx
重构了 xxx
梳理 xxx，总结 xxx
排查 xxx 问题
改进了 xxx 逻辑，性能得到提升
通过 xxx 提高了 xxx 至 xxx
通过 xxx 降低了 xxx 至 xxx
通过 xxx 优化了 xxx 为 xxx
为了 xxx 重新设计了 xxx
为了 xxx 通过 xxx 完成了 xxx
为了 xxx 通过 xxx 成立了 xxx
为了 xxx 通过 xxx 将 xxx 集成
为了 xxx 将 xxx 应用到了 xxx

典型问题

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

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

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

突出亮点

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

背诵

基本信息
工作经历
技术优势/劣势
性格优点/缺点
技术难点/方案
未来规划
中意的项目

一般会问的三个问题

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

一、自我介绍部分

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

二、对于产品看法部分

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

三、问面试官的问题

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

提问环节

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

四、其他

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

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

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

离职原因

二、技术性问题

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

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

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

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

页面白屏监控？

页面加载时长？

参考：Navigation Timing 获取页面加载各个阶段所需时间open in 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（Web Accessibility Initiative –可访问的富Internet应用程序）

动态表单？

参考我们的：玄武库代码生成器open in 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/open in new window
websocket 怎么用，有什么 API：new WebSocket("wss://"),onopen onerror onclose onmessage
大方向

JSBridge 原理

参考：聊一聊桥接（JSBridge）的原理open in new window

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

# 面试技巧

# 一、技巧性问题

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

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

# 你是如何看待加班的？

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

# 最近在看什么书？

# 你还有什么问题要问？

# 什么时间可以入职？

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

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

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

# 请问你的缺点是什么？

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

# 对未来有什么规划？

# 典型问题

# 突出亮点

# 背诵

# 一般会问的三个问题

# 一、自我介绍部分

# 二、对于产品看法部分

# 三、问面试官的问题

# 提问环节

# 四、其他

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

# 离职原因

# 二、技术性问题

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

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

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

# 页面白屏监控？

# 页面加载时长？

# 捕捉 js 异常？

# 动态表单？

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

# 深浅拷贝

# 浅拷贝

# 深拷贝

# SSR

# 模块化理解

# 其他问题

# JSBridge 原理