个人情况
- 毕业于广东某双非大学,校招进入奇安信(前360企业安全)工作,刚刚工作满一年(不好找工作,但人在江湖,身不由己)。
- leetcode刷题200+,基本能应付面试了。强烈建议做做算法题,真的很爽,而且很锻炼编码思维。
富途(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,对象没有原型,函数才有原型
复制代码
- 两个有序数组A和B,判断B是否是A的子序?要求不可以转化数据格式,不可以使用api
[1,2,3,4,5],[2,3,5] => true
// 遍历B数组,再去A数组里找有没有这个值。利用有序这一特点,记录A遍历到哪里,下次从记录点开始即可。
复制代码
- 项目加载优化
二面
❝时长:1小时04分钟,被面试官血虐,各种算法题数学题,香菇。。。
❞
从什么时候开始学前端?为什么学前端?怎么学的?
给定长度为N(1≤N≤2000)的字符串S,要构造一个长度为N的字符串T。期初,T是一个空串,随后反复进行下列任意操作。
- 从S的头部删除一个字符,加到T的尾部
- 从S的尾部删除一个字符,加到T的尾部
目标是要构造字典序尽可能小的字符串。
topK问题?快排的时间复杂度是多少?如果数组特别大,怎么优化?小顶堆的时间复杂度是多少?
以时间复杂度O(n)从长度为n的数组中找出同时满足下面两个条件的所有元素:
- 该元素比放在它左边的所有元素都大;
- 该元素比放在它右边的所有元素都小。
连续扔硬币,直到某一人获胜。A获胜条件是先正后反,B获胜是出现连续两次反面,问AB游戏时A获胜概率是多少?
河东有60万人,河西有40万人,打100万个电话,跨河电话会有多少个?
跨域了解吗?为什么需要跨域的限制?解决跨域的方案有什么?
挑一个项目说说?有多少人共同开发?你负责哪一块?遇到什么技术难题?
把10万次for循环的代码插到html中间,会有什么现象?出现卡顿现象怎么解决?添加defer属性之后脚本会在什么时候执行?采用defer之后,用户点击页面会怎么样?如果禁用WebWoker,还有其他方法吗?
10个资源放在一个域名下加载和放在多个域名下加载的区别是什么?
三面
❝时长:50分钟,其他部门非前端大佬来面的,也是一直在做题。。。
❞
- 优化项目加载速度
- 有100瓶水,其中有一瓶有毒,小白鼠只要尝一点带毒的水3天后就会死亡,至少要多少只小白鼠才能在3天内鉴别出哪瓶水有毒?
- 四个数值[a,b] 和 [x,y],怎么判断这两个范围存在交集?
- 算法题:股票问题
- 25个孩子,5个跑道,至少要跑多少次才能选出最快的三个小孩?
- 算法题:701. 二叉搜索树中的插入操作
快手(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)) // 30
复制代码
- Promise.allSettled了解吗?手写Promise.allSettled
- 算法题:70. 爬楼梯
- 写一个方法生成随机色值,例如#c1c1c1
- Vue的双向绑定原理
- computed的实现原理
- 浏览器为什么要阻止跨域请求?如何解决跨域?每次跨域请求都需要到达服务端吗?浏览器端怎么拦截跨域请求的发出(是发出,不是接收)?
- 浏览器缓存了解吗?强缓存一般存放在哪里?计算整个文件得到etag会耗费性能,怎么解决?如果我不想要使用缓存了,每次都请求最新的,怎么做?no-store和no-cache的区别是什么?
二面
❝时长: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);
}
复制代码
- 实现一个函数,把url里的querystring转化为对象,希望考虑尽量多的边界情况。(没有query,相同的key,转义后的字符需要转回来)
- 说一下项目,项目是怎么优化的?优化之后是怎么度量的?首屏时间的计算?
- v-show和v-if的区别
- 怎么计算组件在视口内出现了几次?IntersectionObserver怎么使用的?怎么知道一个DOM节点出现在视口内?
- vuex的实现机制是什么?vuex里用到的设计模式有什么?还有其他的吗?
- 用过自定义指令吗?什么场景下使用?
- 维护过公共组件吗?是怎么做的?有通过npm发包吗?看过别人开源的组件库是怎么做的吗?
- 说一下webpack的构建流程
- webpack是怎么处理模块循环引用的情况的?
- loader和plugin的区别?什么场景下使用?自己写过plugin吗?
- 了解其他的构建工具吗?Rollup的使用场景是什么?
- 怎么学习新技术的?最近在关注什么新技术?
三面
❝时长: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]
复制代码
- 你是怎么判断JS数据类型的?
- JS有同步和异步任务,浏览器是怎么处理的?
- ES6特性有了解吗?Promise的基本原理,genertor呢?async-await呢?
- 怎么获取相交链表的第一个相交点?
- call、apply和bind的区别?call的实现原理?
- 做题
function lottery(whiteList, participant) {
}
// whiteList:类型字符串数组,意义是表示从其他系统中计算出来的活跃用户,如果这批用户参与抽奖,则必定让他中奖。长度不超过1万
// participant:类型字符串数组,意义是表示此次活动中真正参与抽奖的用户,长度约是10万。
// 函数希望从participant返回 2 万个用户,表示中奖用户,优先选取whiteList上的用户,若不在whiteList上,对participant 剩余的随机 选取即可。
复制代码
字节(二面挂)
一面
❝时长:1小时05分钟,整个面试过程比较轻松,点赞?
❞
- 说一下rem、em、px、vh、vw
- 怎么画出0.5px的线
- css的权重关系?
- css哪些属性会继承,哪些不会继承?
- margin和padding设置百分比是相对于谁的?
- @import 和 link的区别
- justify-content的属性值有什么?
- 浏览器渲染机制?重绘和重排?dom树和render树节点是否一一对应?
const str1 = 'abc'
const str2 = new String('abc')
str1 == str2
str1 === str2
str1.substr()
str2.substr()
复制代码
- 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();
复制代码
- 如果我不想让别人对obj对象添加或者删除元素,可以怎么做呢?
- 完善下面函数,实现图片的加载
function createImg(url){ }
createImg(url).then((value) => {
document.body.appendChild(value)
})
复制代码
- 如何解决ES6的兼容问题?
- 函数防抖和节流?
- Vue双向绑定原理?虚拟DOM性能?keep-alive?
$set
的用处?$nextTick?
{{a.b}}
复制代码
for(let i=0;i<10;i++){
this.a = i
this.$nextTick(() => {
console.log(this.a)
})
}
复制代码
- http2的新特性?多路复用的路指的是什么?https 加密过程?
- 浏览器缓存说一下?
- 301、302、403的含义
- web安全攻击知道有哪些?怎么防御?
- 如何解决跨域
二面
❝自我能力还欠缺,挂了。面完之后没复盘,题目已经记不太住了。
❞
招聘 ?
- 我入职快手一个星期啦,现在才发这篇文章出来,那肯定是要发硬广的,招前端啦。。。有大量hc,base在北京快手总部,mentor天天都在面试?,还催我们要简历,不要怕累坏大佬,大佬都是超人来的?。
- 需要内推的同学,可以加我微信hh18316452113,咱们深度交流一波。?
写在最后
- 做事在人,成事在天。面试的时候,把自己会的,都展示出来,过了就是实力到了缘分也到了,没过的话可能是缘分未至。
- 面试使人成长,通过这次面试,也认识到自己的不足,后续继续?。
- 最后的最后感谢
@小小晴_
的内推,哈哈哈
福利活动
❝本次粉丝福利为《Web前端性能优化》2本
❞
![e2298988a13af501aafd4993cccc5a84.png](https://i-blog.csdnimg.cn/blog_migrate/20c1f3c3f442d6fe84dafcf95ba54094.png)
Web前端性能优化》以Web性能优化为重点,深入浅出地介绍了性能优化所涉及到的方方面面知识,详细解答了为何要做性能优化,性能优化又需要从何处着手,性能优化的过程又需要考虑到哪些问题?需要做怎样的权衡?内容包括:第1章 用户体验(UE——userexperience);第2章 前端性能瓶颈(Front-end performance bottleneck);第3章 前端的分层(Front-end layering);第4章 HTML层级优化;第5章 CSS层级优化;第6章 JavaScript层级优化;第7章 资源加载优化(Resource loading optimization);第8章 其他层级优化(Other hierarchical optimization);第9章 前端调试(Front-end debugging);第10章 常见自动化构建工具(Common automated build tools);第11章新技术对性能的提升(Performance improvements from new technologies);第12章 思想高于逻辑 逻辑强于代码(Thought over logic over code)。第13章 性能优化案例分析(Performance optimization case study),本书适合程序员及Web开发者阅读。
书的目录大家可以点击下方链接查看,大家可以点击查看详情
参与方式
❝很简单,
❞关注公众号然后公众号底下留言
,通过点赞数来排名
,选出点赞数最靠前的两名粉丝
抽奖结果将在 12月30日 18:00 开奖
,中奖的小伙伴记得联系我即时填写收获信息,以免奖品落空
在这里祝大家获得自己想要的奖品。所有中奖者请在 3天内 联系我核对并领取奖品,过时无效哦。
前端学习笔记?
❝最近花了点时间把笔记整理到语雀上了,方便同学们阅读:
❞公众号回复笔记或者简历
![808c44ad45788924b95c25533297f52b.png](https://i-blog.csdnimg.cn/blog_migrate/026eb9bb2ce338113d1bf5b66e17a631.png)
![855e559f391ac75791a100d6d5357745.png](https://i-blog.csdnimg.cn/blog_migrate/f57bc92f3f07290c7b14e727956f100c.png)
最后
1.看到这里了就点个在看支持下吧,你的「点赞,在看」
是我创作的动力。
2.关注公众号前端壹栈,回复「1」加入前端交流群
!「在这里有好多前端开发者,会讨论前端知识,互相学习」!
3.也可添加公众号【前端壹栈】
,一起成长
![a920627efd4a15828ea14d60079f6509.png](https://i-blog.csdnimg.cn/blog_migrate/28353aa9aea0ad4e46070797c46b571e.png)