前言

今天终于收到富途的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官方文档描述得相当详细，大家可以参考文档👇

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，有任何疑问都可以在评论区一起讨论啊～谢谢支持🙏

完