阅读 3758

一年前端面试分享

个人情况

  • 毕业于广东某双非大学,校招进入奇安信(前360企业安全)工作,刚刚工作满一年(不好找工作,但人在江湖,身不由己)。
  • leetcode刷题200+,基本能应付面试了。墙裂建议做做算法题,真的很爽,而且很锻炼编码思维。

富途(offer call)

一面

时长: 47分钟,太久没面试,感觉很多问题没答好,一个小时后居然收到了二面通知,感谢面试官手下留情。

  1. 自我介绍
  2. 360企业安全,奇安信,360之间的关系?为什么学前端?平时怎么学习的?最近在看什么书吗?...
  3. 做题
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,对象没有原型,函数才有原型
复制代码
  1. 两个有序数组A和B,判断B是否是A的子序?要求不可以转化数据格式,不可以使用api
[1,2,3,4,5],[2,3,5] => true
// 遍历B数组,再去A数组里找有没有这个值。利用有序这一特点,记录A遍历到哪里,下次从记录点开始即可。
复制代码
  1. 项目加载优化

二面

时长:1小时04分钟,被面试官血虐,各种算法题数学题,香菇。。。

  1. 从什么时候开始学前端?为什么学前端?怎么学的?

  2. 给定长度为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分钟,其他部门非前端大佬来面的,也是一直在做题。。。

  1. 优化项目加载速度
  2. 有100瓶水,其中有一瓶有毒,小白鼠只要尝一点带毒的水3天后就会死亡,至少要多少只小白鼠才能在3天内鉴别出哪瓶水有毒?
  3. 四个数值[a,b] 和 [x,y],怎么判断这两个范围存在交集?
  4. 算法题:股票问题
  5. 25个孩子,5个跑道,至少要跑多少次才能选出最快的三个小孩?
  6. 算法题:701. 二叉搜索树中的插入操作

快手(offer call)

一面

时长:1小时07分钟,遇到不太会的问题,面试官会引导解答,很nice。

  1. 自我介绍
  2. 项目介绍
  3. 项目遇到的难题和如何解决
  4. 做题
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)) // 30
复制代码
  1. Promise.allSettled了解吗?手写Promise.allSettled
  2. 算法题:70. 爬楼梯
  3. 写一个方法生成随机色值,例如#c1c1c1
  4. Vue的双向绑定原理
  5. computed的实现原理
  6. 浏览器为什么要阻止跨域请求?如何解决跨域?每次跨域请求都需要到达服务端吗?浏览器端怎么拦截跨域请求的发出(是发出,不是接收)?
  7. 浏览器缓存了解吗?强缓存一般存放在哪里?计算整个文件得到etag会耗费性能,怎么解决?如果我不想要使用缓存了,每次都请求最新的,怎么做?no-store和no-cache的区别是什么?

二面

时长:1小时,整体面下来自我感觉广度欠缺,面完之后面试官说需要和一面面试官碰一下。

  1. 实现一个函数 findLastIndex(), 返回指定数在“有序”数组中最后一次出现位置的索引 如findLastIndex([1,2,3,3,3,4,5], 3), 返回4。时间复杂度是多少?什么情况下时间复杂度最高?
  2. 请实现一个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);
}
复制代码
  1. 实现一个函数,把url里的querystring转化为对象,希望考虑尽量多的边界情况。(没有query,相同的key,转义后的字符需要转回来)
  2. 说一下项目,项目是怎么优化的?优化之后是怎么度量的?首屏时间的计算?
  3. v-show和v-if的区别
  4. 怎么计算组件在视口内出现了几次?IntersectionObserver怎么使用的?怎么知道一个DOM节点出现在视口内?
  5. vuex的实现机制是什么?vuex里用到的设计模式有什么?还有其他的吗?
  6. 用过自定义指令吗?什么场景下使用?
  7. 维护过公共组件吗?是怎么做的?有通过npm发包吗?看过别人开源的组件库是怎么做的吗?
  8. 说一下webpack的构建流程
  9. webpack是怎么处理模块循环引用的情况的?
  10. loader和plugin的区别?什么场景下使用?自己写过plugin吗?
  11. 了解其他的构建工具吗?Rollup的使用场景是什么?
  12. 怎么学习新技术的?最近在关注什么新技术?

三面

时长:1小时04分钟,大概聊下项目接着开始做题,面试官挺幽默风趣的。👍

  1. 项目相关(这一块聊得挺多的)
  2. 一面的随机色值我没做对,面试官让我继续做。
  3. 写一个方法,把16进制颜色值转成10进制。(#fff => rgb(255,255,255))
  4. 问了几道css题(css权重,相对定位,绝对定位,margin-top为负值)

CVTE(二面挂)

时长:46分钟,自我感觉一般。

一面

  1. 说一下JS事件循环?JS是多线程的吗?(ps:我前面描述回答有点瑕疵)知道哪些微任务和宏任务?微任务和宏任务的区别?绑定一个事件的回调函数是宏任务还是微任务?
  2. 说一下JS闭包?怎么创建闭包?有什么缺陷?怎么解决?
  3. 刚刚你有说到垃圾回收,说一下垃圾回收吧。
  4. 如果想知道一个页面有没有存在内存泄漏的情况,怎么做?
  5. 刚刚你有说到性能优化,在这过程中你是怎么利用chrome开发者工具的?
  6. WebWorker的缺点是什么?在worker线程怎么获取主线程上下文?解决卡顿的问题除了使用WebWorker还有其他的解决方案吗?面试官建议我去了解一下React的fiber。有没有测试过woker通信的时间?
  7. 项目遇到的技术难题?
  8. 虚拟列表是什么?
  9. Vue双向绑定的原理
  10. Vue基本原理你会什么?说一下diff算法,看我能不能听得懂?(面试官是用React的)
  11. webpack做过哪些构建优化?
  12. 封装公共组件,需要注意什么?

二面

时长:42分钟,一半的问题都是回答不知道。

  1. 项目相关,问了好久。。。
  2. 共同编辑文档有了解吗?
  3. 说一下面向对象吧,多态是什么?
  4. 说一下vscode插件是怎么做的?
  5. 设计模式有了解吗?除了观察者模式还有其他的吗,平时用得上的。
  6. 说一下微信小程序吧
  7. 移动端适配有了解吗?rem布局
  8. WebAssembly有了解吗?
  9. Electron有了解吗?
  10. TypeScript有了解吗?
  11. 最近有在学什么新的知识点,除了我们上面说的。

斗鱼(一面过,但hr说有人接受了offer,没hc)

时长:1小时13分钟。两个面试官轮流问问题,说实话,面完之后口水都有点干了。

  1. 项目相关。
  2. 说一下防抖和节流。手写防抖。
  3. 有一个结果,需要通过大量计算才能得到,我们把他存在本地,只有在资源发生改变时重新计算,怎么做?
  4. 地址栏输入url发生了什么?强缓存和协商缓存分别适用于哪些场景?
  5. 有一个场景,一个网页需要请求的资源在很远的地方,而且公司没钱买CDN,要怎么利用缓存优化呢?
  6. 说一下闭包?闭包有什么用?有什么缺点?
  7. 说一下JS是怎么做垃圾回收的?
  8. vue双向绑定原理?调用push给数组添加元素会自动更新吗?为什么?
  9. 看过vue源码吗?说一下diff原理
  10. 做题
var a = 1 + '2'
var b = 1 - '2'
var c = [1,2] + [3,4]
复制代码
  1. 你是怎么判断JS数据类型的?
  2. JS有同步和异步任务,浏览器是怎么处理的?
  3. ES6特性有了解吗?Promise的基本原理,genertor呢?async-await呢?
  4. 怎么获取相交链表的第一个相交点?
  5. call、apply和bind的区别?call的实现原理?
  6. 做题
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树节点是否一一对应?
const str1 = 'abc'
const str2 = new String('abc')

str1 == str2
str1 === str2
str1.substr()
str2.substr()
复制代码
  1. var、let、const 的区别?暂时性死区是什么?
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();
复制代码
  1. 如果我不想让别人对obj对象添加或者删除元素,可以怎么做呢?
  2. 完善下面函数,实现图片的加载
function createImg(url){   }
createImg(url).then((value) => {
    document.body.appendChild(value)
})
复制代码
  1. 如何解决ES6的兼容问题?
  2. 函数防抖和节流?
  3. Vue双向绑定原理?虚拟DOM性能?keep-alive?$set的用处?$nextTick?
<template>
  <div>{{a.b}}</div>
</template>

<script>
export default {
  data () {
    return {
      a: {}
    }
  },
  created () {
    this.a.b = 1
  },
  mounted () {
    this.a.b = 2
  }
}
</script>
复制代码
for(let i=0;i<10;i++){
    this.a = i
    this.$nextTick(() => {
        console.log(this.a)
    })
}
复制代码
  1. http2的新特性?多路复用的路指的是什么?https 加密过程?
  2. 浏览器缓存说一下?
  3. 301、302、403的含义
  4. web安全攻击知道有哪些?怎么防御?
  5. 如何解决跨域

二面

自我能力还欠缺,挂了。面完之后没复盘,题目已经记不太住了。

招聘 🎉

  • 我入职快手一个星期啦,现在才发这篇文章出来,那肯定是要发硬广的,招前端啦。。。有大量hc,base在北京快手总部,mentor天天都在面试😏,还催我们要简历,不要怕累坏大佬,大佬都是超人来的👍。
  • 需要内推的同学,可以加我微信hh18316452113,咱们深度交流一波。😊

写在最后

  • 做事在人,成事在天。面试的时候,把自己会的,都展示出来,过了就是实力到了缘分也到了,没过的话可能是缘分未至。
  • 面试使人成长,通过这次面试,也认识到自己的不足,后续继续💪。
  • 最后的最后感谢 @小小晴_ 的内推,哈哈哈。