一年前端面试分享

我的状况

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

富途（offer call）

一面

时长： 47分钟，过久没面试，感受不少问题没答好，一个小时后竟然收到了二面通知，感谢面试官手下留情。javascript

自我介绍
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分钟，被面试官血虐，各类算法题数学题，香菇。。。css

从何时开始学前端？为何学前端？怎么学的？html
给定长度为N(1≤N≤2000)的字符串S，要构造一个长度为N的字符串T。期初，T是一个空串，随后反复进行下列任意操做。前端
- 从S的头部删除一个字符，加到T的尾部
- 从S的尾部删除一个字符，加到T的尾部
目标是要构造字典序尽量小的字符串。vue
topK问题？快排的时间复杂度是多少？若是数组特别大，怎么优化？小顶堆的时间复杂度是多少？java
以时间复杂度O(n)从长度为n的数组中找出同时知足下面两个条件的全部元素：webpack
- 该元素比放在它左边的全部元素都大；
- 该元素比放在它右边的全部元素都小。
连续扔硬币，直到某一人获胜。A获胜条件是先正后反，B获胜是出现连续两次反面，问AB游戏时A获胜几率是多少？web
河东有60万人，河西有40万人，打100万个电话，跨河电话会有多少个？面试
跨域了解吗？为何须要跨域的限制？解决跨域的方案有什么？ajax
挑一个项目说说？有多少人共同开发？你负责哪一块？遇到什么技术难题？
把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？

<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 加密过程？
浏览器缓存说一下？
30一、30二、403的含义
web安全攻击知道有哪些？怎么防护？
如何解决跨域

二面

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

招聘 🎉

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

写在最后

作事在人，成事在天。面试的时候，把本身会的，都展现出来，过了就是实力到了缘分也到了，没过的话多是缘分未至。
面试令人成长，经过此次面试，也认识到本身的不足，后续继续💪。
最后的最后感谢 @小小晴_ 的内推，哈哈哈。