技术面试问项目难题如何解决的_一年前端面试分享
作者：喂。小欢
出自：掘金
原文：juejin.im/post/6873444336059711495
富途（offer call）
一面
时长： 47分钟，太久没面试，感觉很多问题没答好，一个小时后居然收到了二面通知，感谢面试官手下留情。
- 自我介绍
- 360企业安全，奇安信,360之间的关系？为什么学前端？平时怎么学习的？最近在看什么书吗？...
- 做题
var a=1;
function fn(a){ a=2; }
fn(a);
console.log(a); // 1
var a={a:1};
function fn(a){ a.a=2; }
fn(a);
console.log(a.a); // 2'use strict';
var a = 1;
var obj = {
a:2,
b:function(){
this.a = 3;
},
print:function(){
console.log(this.a);
}
};
obj.print(); // 2
var print = obj.print;
print(); // 报错，严格模式下this默认是undefined
function F(){
this.a = 1;
}
var obj = new F();
console.log(obj.prototype); // undefined，对象没有原型，函数才有原型4.两个有序数组A和B，判断B是否是A的子序？要求不可以转化数据格式，不可以使用api
[1,2,3,4,5],[2,3,5] => true
// 遍历B数组，再去A数组里找有没有这个值。利用有序这一特点，记录A遍历到哪里，下次从记录点开始即可。 复制代码
5.项目加载优化
二面
时长：1小时04分钟，被面试官血虐，各种算法题数学题，香菇。。。
- 从什么时候开始学前端？为什么学前端？怎么学的？
- 给定长度为N(1≤N≤2000)的字符串S，要构造一个长度为N的字符串T。期初，T是一个空串，随后反复进行下列任意操作。
- 从S的头部删除一个字符，加到T的尾部
- 从S的尾部删除一个字符，加到T的尾部
目标是要构造字典序尽可能小的字符串。
3. topK问题？快排的时间复杂度是多少？如果数组特别大，怎么优化？小顶堆的时间复杂度是多少？
4.以时间复杂度O(n)从长度为n的数组中找出同时满足下面两个条件的所有元素：
-
- 该元素比放在它左边的所有元素都大；
- 该元素比放在它右边的所有元素都小。
5.连续扔硬币，直到某一人获胜。A获胜条件是先正后反，B获胜是出现连续两次反面，问AB游戏时A获胜概率是多少？
6.河东有60万人，河西有40万人，打100万个电话，跨河电话会有多少个？
7.跨域了解吗？为什么需要跨域的限制？解决跨域的方案有什么？
8.挑一个项目说说？有多少人共同开发？你负责哪一块？遇到什么技术难题？
9.把10万次for循环的代码插到html中间，会有什么现象？出现卡顿现象怎么解决？添加defer属性之后脚本会在什么时候执行？采用defer之后，用户点击页面会怎么样？如果禁用WebWoker，还有其他方法吗？
10.10个资源放在一个域名下加载和放在多个域名下加载的区别是什么？
三面
时长：50分钟，其他部门非前端大佬来面的，也是一直在做题。。。
- 优化项目加载速度
- 有100瓶水，其中有一瓶有毒，小白鼠只要尝一点带毒的水3天后就会死亡，至少要多少只小白鼠才能在3天内鉴别出哪瓶水有毒？
- 四个数值[a,b] 和 [x,y]，怎么判断这两个范围存在交集？
- 算法题：股票问题
- 25个孩子，5个跑道，至少要跑多少次才能选出最快的三个小孩？
快手（offer call）
一面
时长：1小时07分钟，遇到不太会的问题，面试官会引导解答，很nice。
- 自我介绍
- 项目介绍
- 项目遇到的难题和如何解决
- 做题
for(var i=0;i<3;i++){
document.body.addEventListener('click', function(){
console.log(i) // 点击之后输出3 3 3
})
}怎么改造可以输入0 1 2？为什么var改成let就可以呢？
Function.prototype.a = () => alert(1)
Object.prototype.b = () => alert(2)
function A(){}
var a = new A()
a.a() // 报错
a.b() // 2怎么样改造才能执行alert(1)呢？
A.a()
Function.a()
a.constructor.a()继续
console.log(a)
var a = 1
console.log(b)
let b = 2
console.log(c)
function c(){}继续
var x = 20
function a(y){
var x = 10
return get(y)
}
function get(y){
return x+y
}
console.log(a(10)) // 305.Promise.allSettled了解吗？手写Promise.allSettled
6. 写一个方法生成随机色值，例如#c1c1c1
7. Vue的双向绑定原理
8.computed的实现原理
9.浏览器为什么要阻止跨域请求？如何解决跨域？每次跨域请求都需要到达服务端吗？浏览器端怎么拦截跨域请求的发出（是发出，不是接收）？
10.浏览器缓存了解吗？强缓存一般存放在哪里？计算整个文件得到etag会耗费性能，怎么解决？如果我不想要使用缓存了，每次都请求最新的，怎么做？no-store和no-cache的区别是什么？
二面
时长：1小时，整体面下来自我感觉广度欠缺，面完之后面试官说需要和一面面试官碰一下。
- 实现一个函数 findLastIndex(), 返回指定数在“有序”数组中最后一次出现位置的索引 如findLastIndex([1,2,3,3,3,4,5], 3), 返回4。时间复杂度是多少？什么情况下时间复杂度最高？
- 请实现一个cacheRequest(url, callback)请求缓存方法，保证当使用ajax时，对于同一个API实际在网络层只发出一次请求以节省网络流量（假设已存在request底层方法用于封装ajax请求，调用格式为：request(url, data => {})。比如调用方代码如下
// a.js
cacheRequest('/user', data => {
console.log('我是从A中请求的user，数据为' + data);
})
// b.js
cacheRequest('/user', data => {
console.log('我是从B中请求的user，数据为' + data);
}
3.实现一个函数，把url里的querystring转化为对象，希望考虑尽量多的边界情况。（没有query，相同的key，转义后的字符需要转回来）
4.说一下项目，项目是怎么优化的？优化之后是怎么度量的？首屏时间的计算？
5.v-show和v-if的区别
6.怎么计算组件在视口内出现了几次？IntersectionObserver怎么使用的？怎么知道一个DOM节点出现在视口内？
7.vuex的实现机制是什么？vuex里用到的设计模式有什么？还有其他的吗？
8.用过自定义指令吗？什么场景下使用？
9.维护过公共组件吗？是怎么做的？有通过npm发包吗？看过别人开源的组件库是怎么做的吗？
10.说一下webpack的构建流程
11.webpack是怎么处理模块循环引用的情况的？
12.loader和plugin的区别？什么场景下使用？自己写过plugin吗？
13.了解其他的构建工具吗？Rollup的使用场景是什么？
14.怎么学习新技术的？最近在关注什么新技术？
三面
时长：1小时04分钟，大概聊下项目接着开始做题，面试官挺幽默风趣的。
- 项目相关（这一块聊得挺多的）
- 一面的随机色值我没做对，面试官让我继续做。
- 写一个方法，把16进制颜色值转成10进制。（#fff => rgb(255,255,255)）
- 问了几道css题（css权重，相对定位，绝对定位，margin-top为负值）
CVTE（二面挂）
时长：46分钟，自我感觉一般。
一面
- 说一下JS事件循环？JS是多线程的吗？（ps:我前面描述回答有点瑕疵）知道哪些微任务和宏任务？微任务和宏任务的区别？绑定一个事件的回调函数是宏任务还是微任务？
- 说一下JS闭包？怎么创建闭包？有什么缺陷？怎么解决？
- 刚刚你有说到垃圾回收，说一下垃圾回收吧。
- 如果想知道一个页面有没有存在内存泄漏的情况，怎么做？
- 刚刚你有说到性能优化，在这过程中你是怎么利用chrome开发者工具的？
- WebWorker的缺点是什么？在worker线程怎么获取主线程上下文？解决卡顿的问题除了使用WebWorker还有其他的解决方案吗？面试官建议我去了解一下React的fiber。有没有测试过woker通信的时间？
- 项目遇到的技术难题？
- 虚拟列表是什么？
- Vue双向绑定的原理
- Vue基本原理你会什么？说一下diff算法，看我能不能听得懂？（面试官是用React的）
- webpack做过哪些构建优化？
- 封装公共组件，需要注意什么？
二面
时长：42分钟，一半的问题都是回答不知道。
- 项目相关，问了好久。。。
- 共同编辑文档有了解吗？
- 说一下面向对象吧，多态是什么？
- 说一下vscode插件是怎么做的？
- 设计模式有了解吗？除了观察者模式还有其他的吗，平时用得上的。
- 说一下微信小程序吧
- 移动端适配有了解吗？rem布局
- WebAssembly有了解吗？
- Electron有了解吗？
- TypeScript有了解吗？
- 最近有在学什么新的知识点，除了我们上面说的。
斗鱼（一面过，但hr说有人接受了offer，没hc）
时长：1小时13分钟。两个面试官轮流问问题，说实话，面完之后口水都有点干了。
- 项目相关。
- 说一下防抖和节流。手写防抖。
- 有一个结果，需要通过大量计算才能得到，我们把他存在本地，只有在资源发生改变时重新计算，怎么做？
- 地址栏输入url发生了什么？强缓存和协商缓存分别适用于哪些场景？
- 有一个场景，一个网页需要请求的资源在很远的地方，而且公司没钱买CDN，要怎么利用缓存优化呢？
- 说一下闭包？闭包有什么用？有什么缺点？
- 说一下JS是怎么做垃圾回收的？
- vue双向绑定原理？调用push给数组添加元素会自动更新吗？为什么？
- 看过vue源码吗？说一下diff原理
- 做题
var a = 1 + '2'
var b = 1 - '2'
var c = [1,2] + [3,4]
11.你是怎么判断JS数据类型的？
12.JS有同步和异步任务，浏览器是怎么处理的？
13.ES6特性有了解吗？Promise的基本原理，genertor呢？async-await呢？
14.怎么获取相交链表的第一个相交点？
15.call、apply和bind的区别？call的实现原理？
16.做题
function lottery(whiteList, participant) {
}
// whiteList:类型字符串数组,意义是表示从其他系统中计算出来的活跃用户，如果这批用户参与抽奖，则必定让他中奖。长度不超过1万
// participant:类型字符串数组,意义是表示此次活动中真正参与抽奖的用户，长度约是10万。
// 函数希望从participant返回 2 万个用户，表示中奖用户，优先选取whiteList上的用户，若不在whiteList上，对participant 剩余的随机 选取即可。字节（二面挂）
一面
时长：1小时05分钟，整个面试过程比较轻松，点赞
1.说一下rem、em、px、vh、vw
2.怎么画出0.5px的线
3.css的权重关系？
4.css哪些属性会继承，哪些不会继承？
5.margin和padding设置百分比是相对于谁的？
6.@import 和 link的区别
7.justify-content的属性值有什么？
8.浏览器渲染机制？重绘和重排？dom树和render树节点是否一一对应？
9.
const str1 = 'abc'
const str2 = new String('abc')
str1 == str2
str1 === str2
str1.substr()
str2.substr()
10.var、let、const 的区别？暂时性死区是什么？
11.
function showName() {
console.log('Toutiao');
}
showName();
function showName() {
console.log('OceanEngine');
}
showName();
var myname = "abc"
function showName2(){
console.log(myname);
var myname = "aabbcc"
console.log(myname);
}
showName2();
12.如果我不想让别人对obj对象添加或者删除元素，可以怎么做呢？
13.完善下面函数，实现图片的加载
function createImg(url){ }
createImg(url).then((value) => {
document.body.appendChild(value)
})14.如何解决ES6的兼容问题？
15.函数防抖和节流？
16.Vue双向绑定原理？虚拟DOM性能？keep-alive？$set的用处？$nextTick？
17.
{
{a.b}}
for(let i=0;i<10;i++){
this.a = i
this.$nextTick(() => {
console.log(this.a)
})
}18.http2的新特性？多路复用的路指的是什么？https 加密过程？
19.浏览器缓存说一下？
20.301、302、403的含义
21.web安全攻击知道有哪些？怎么防御？
22.如何解决跨域