个人情况
- 毕业于广东某双非大学，校招进入奇安信（前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就可以呢？
代码语言：javascript复制Function.prototype.a = () => alert(1)
Object.prototype.b = () => alert(2)
function A(){}
var a = new A()
a.a() // 报错
a.b() // 2
复制代码
怎么样改造才能执行alert(1)呢？
代码语言：javascript复制A.a()
Function.a()
a.constructor.a()
复制代码
继续
代码语言：javascript复制console.log(a)
var a = 1
console.log(b)
let b = 2
console.log(c)
function c(){}
复制代码
继续
代码语言：javascript复制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 => {})。比如调用方代码如下
代码语言：javascript复制// 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？
<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)
})
}
复制代码
- http2的新特性？多路复用的路指的是什么？https 加密过程？
- 浏览器缓存说一下？
- 301、302、403的含义
- web安全攻击知道有哪些？怎么防御？
- 如何解决跨域
二面
❝自我能力还欠缺，挂了。面完之后没复盘，题目已经记不太住了。 ❞
招聘 ?
- 我入职快手一个星期啦，现在才发这篇文章出来，那肯定是要发硬广的，招前端啦。。。有大量hc，base在北京快手总部，mentor天天都在面试?，还催我们要简历，不要怕累坏大佬，大佬都是超人来的?。
- 需要内推的同学，可以加我微信hh18316452113，咱们深度交流一波。?
写在最后
- 做事在人，成事在天。面试的时候，把自己会的，都展示出来，过了就是实力到了缘分也到了，没过的话可能是缘分未至。
- 面试使人成长，通过这次面试，也认识到自己的不足，后续继续?。
- 最后的最后感谢
@小小晴_的内推，哈哈哈
福利活动
❝本次粉丝福利为《Web前端性能优化》2本 ❞
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天内 联系我核对并领取奖品，过时无效哦。
前端学习笔记?
❝最近花了点时间把笔记整理到语雀上了，方便同学们阅读：
公众号回复笔记或者简历❞
