前言
今天终于收到富途的offer啦，和大家分享一下面试的全过程。感觉整个过程都比较顺利，富途对css基础，js基础，网络安全，项目经验，算法，个人软实力都有所考核，算是比较全面的吧。
整个流程是：笔试+一面+二面+CTO面+HR面
笔试
小题
1. 写出在html头部中，设置设备宽度等于页面宽度的属性标签
答：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
2. css选择器的优先级
答：标签选择器 < 类选择器 < ID选择器 < 内联style < !important
3. BFC的概念和特性
答： BFC——块级格式化上下文
- 触发条件
- float不为none
- overflow不为visible
- display为table-cell，table-caption，inline-block
- position为absolute，fixed
- fieldset元素
- 功能
- 自我独立，内部元素不会影响外部元素
- 会包含浮动元素
- 同一个BFC的margin重叠
4. 使用雪碧图的关键css属性是什么
答：background-position
5. 基础类型
答：number,boolean,string,null,undefined,symbol
6. onLoad 和 DOMContentLoad 的区别
答：
- DOMContentLoad是HTML文档被加载和解析完成后触发
- onLoad是页面所有资源（包括图片，音频等）加载完后触发
7. this
let a =1;
let obj = {
a: 2,
b: function () {
return this.a
}
}
console.log(obj.b())
答：2
8. 原型
function F () {};
let f = new F();
f.prototype = ?
答：只有函数有prototype属性，所以undefined
9. 事件队列
// 具体的题目忘了，无非都是考核promise，setTimeout，async的执行顺序
// 以下是头条的类似题目，这个考得更全面
async function a1 () {
console.log('a1 start')
await a2()
console.log('a1 end')
}
async function a2 () {
console.log('a2')
}
console.log('script start')
setTimeout(() => {
console.log('setTimeout')
}, 0)
Promise.resolve().then(() => {
console.log('promise1')
})
a1()
let promise2 = new Promise((resolve) => {
resolve('promise2.then')
console.log('promise2')
})
promise2.then((res) => {
console.log(res)
Promise.resolve().then(() => {
console.log('promise3')
})
})
console.log('script end')
10. 严格模式
答：
- 变量必须声明后再使用
- 函数的参数不能有同名属性，否则报错
- 不能使用with语句
- 不能对只读属性赋值，否则报错
- 不能使用前缀 0 表示八进制数，否则报错
- 不能删除不可删除的属性，否则报错
- eval不会在它的外层作用域引入变量
- eval和arguments不能被重新赋值
- arguments不会自动反映函数参数的变化
- 不能使用arguments.callee
- 不能使用arguments.caller
- 禁止this指向全局对象
- 不能使用fn.caller和fn.arguments获取函数调用的堆栈
- 增加了保留字（比如protected、static和interface）
大题
1. bind函数的实现
答：以下是网上比较标准的答案，我当时没想到继承这方面。
Function.prototype.bind2 = function (context) {
if (typeof this !== "function") {
throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
}
var self = this;
var args = Array.prototype.slice.call(arguments, 1);
var fNOP = function () {};
var fbound = function () {
self.apply(this instanceof self ? this : context, args.concat(Array.prototype.slice.call(arguments)));
}
fNOP.prototype = this.prototype;
fbound.prototype = new fNOP();
return fbound;
}
2. js深拷贝的实现
答：注意几个点
- 基本类型和引用类型的区分
- 环形对象的处理
- 函数对象，日期对象，正则对象的处理
- 数组和纯对象的处理
3. trim的实现
答：str.replace(/(^\s)|(\s$)/g, "")
一面
面试官考察了一下笔试题后开始面试，大都是问前端的基础问题
了解目前团队，对项目的角色定位，负责过的东西
答：略
项目中对通用组件的处理
答：
- 回答了业务组件page和通用组件component的区别
- 针对通用组件该注意的问题（数据与通讯）
- 设计通用组件接口的规范要求（传入参数的规范设计）
vue中watch和computed的区别
答：
- computed，计算属性，随着依赖的数据响应式地改变，用于复杂逻辑处理
- watch，命令式地监听数据变化进行操作
vue官方文档描述得相当详细，大家可以参考文档👇
事件队列EventLoop
答：回答以下关键点
- 事件队列的诞生缘由和概念
- 主执行栈与异步队列
- 宏任务与微任务
- 整体的执行过程
快速排序和归并排序的大致实现以及其复杂度
答：
- 归并排序
- 关键步骤（略）
- 复杂度
- 最优 nlog(n) 平均 nlog(n) 最差 nlog(n)
- 快速排序
- 关键步骤（略）
- 复杂度
- 最优 nlog(n) 平均 nlog(n) 最差 n2
说一下遇到过的网络安全问题以及解决方案
答：当时结合项目说了一下XSS攻击的防范和CSP防御
HTTP缓存问题以及304的情况
答：略
实现判断A数组是否是B数组子集
答：忘了。。。
移动端开发时遇到的兼容问题和调试方式
答：
- 回答了开发时使用谷歌的移动端调试模式，Mac的Xcode模拟器调试，还有手机代理调试的方法
- 当线上遇到的问题时，会通过sentry埋点上报系统来查看错误信息
二面
二面的面试官应该是web端的负责人，不再问前端知识，更多是问一些实际情景解决方案和网络安全。
两个水桶各装着x升颜料，一个红颜料，一个蓝颜料，现在从蓝桶往红桶勺y升蓝颜料，再从红桶勺y升颜料回蓝桶，请问两个桶的红蓝比例是多少？
答：一个是x/y，一个是y/x
一个抽奖程序的前后端逻辑
回答的过程中一直有和面试官讨论我的想法和出发点，最后回答了以下几点：
- 奖品占比概率，奖品份数，假设抽奖总人数
- 前后端分工，安全问题，是否由后台进行抽奖计算
- 考虑奖品抽完的情况
网络安全的手段
答：
- 对XSS的防范
- 对CSRF的防范
- CSP
- HTTPS
冒泡排序的实现，复杂度以及优化
答：
- 优化点：做swap标记，若循环下来没有交换过则说明已经排序完成
- 复杂度 最优n 平均n2 最差n2
首屏优化手段
答：
- SSR
- 占位元素优先出现
- webpack的压缩优化
- PWA
SPA的优缺点
答：
- 资源共用
- 局部刷新
- URL模式
- 用户体验/页面切换快
- 数据传递容易
- 不利于SEO，可用SSR优化
- 初次加载时长
- 路由管理
- 减轻服务器压力
- 前后端职责分离
为什么百度的图片用另外的域名而不是主网站的域名
答：可以从CDN和携带cookie两个方面回答
最后是一道计算个人所得税的填空代码题，很简单
答：略
三面
CTO面应该是想了解你的整体能力，沟通能力，考察你是否符合公司人才标准，以及对代码的规范和对问题思考的全面深入程度。
三面我只分享一下题目，大家可以独自去思考和网上搜索答案。
1. 将for循环改为goto语法
2. 实现一个求中位数的函数，middle(a,b,c)
3. 实现一个生成3～7区间的随机整数的函数
4. 大医院每天接生100人，小医院每天接生50人，哪个医院能达到“生男孩几率大于60%”的目标的多一点？
四面
最�后的HR面问的也是比较经典的问题
- 个人软实力考核
- 前公司状况
- 个人状况
- 学习途径
- 期望薪酬
- 职业规划
- 新公司看法和了解
最后
希望大家都能拿到自己心仪的offer，有任何疑问都可以在评论区一起讨论啊～谢谢支持🙏
完
网友评论