楼主工作两年半，开始从事java，19年春节后开始学习前端，19年4月开始前端项目。
面试题的基本整理如下，以后有机会慢慢补全答案，也欢迎大佬提供解答。
一、算法
前端算法考得比较简单，而且很多公司都不考，目前遇到的有：
1，打平数组
2，最长不重复子串
3，最大岛屿
4，全排列与组合
5，用两个栈实现队列
6，以及会问一些排序算法思路、复杂度、优缺点什么的
总的来说没什么难度吧，毕竟也没有公司会让前端手写堆排哈哈哈哈哈
二、手写代码题
1，正则将十六进制颜色转成rgb
2，手写call、apply和bind
3，手写instanceOf
4，函数柯里化
function curry(fn, args = []) {
return function(){
let rest = [...args, ...arguments];
if (rest.length < fn.length) {
return curry.call(this,fn,rest);
}else{
return fn.apply(this,rest);
}
}
}
//test
function sum(a,b,c) {
return a+b+c;
}
let sumFn = curry(sum);
console.log(sumFn(1)(2)(3)); //6
console.log(sumFn(1)(2,3)); //6
5，Promise和Promise.all的手写，以及Promise的finally是怎么实现的
6，手写reduce以及用reduce计算元素个数
var arr = [1,4,5,3,7,2]
Array.prototype.myReduce = function(fn,prev){
let myArr=this
for(let i=0;i<myArr.length;i++){
if(prev===undefined){
prev=myArr[i]
}else {
prev=fn(prev,myArr[i],i,myArr)
}
}
return prev
}
console.log(arr.reduce((a,b)=>a-b),arr.myReduce((a,b)=>a-b))
console.log(arr.reduce((a,b)=>a-b,0),arr.myReduce((a,b)=>a-b,0))
function count(arr,val) {
return arr.reduce((prev,item)=>{
if(item==val){
return prev+1
}else {
return prev
}
},0)
}
console.log(count([1,2,3,2,4,4,4,9],4))
7，实现一个函数删除数组中某个指定元素（元素可能有多个），要求数组还在原地
8，尾递归实现斐波那契数列
function fib(n,first,second){
if(n<=1){
return first
}else {
return fib(n-1,second,first+second)
}
}
9，节流和防抖
10，手写eventbus
11，已知add，实现sum
var add = function(a,b,fn){
fn(a+b)
}
add(1,2,(r)=>console.log(r))
var sum = function(fn,...args){
var tempSum = 0
for(let i=0;i<args.length;i++){
add(tempSum,args[i],(result)=>{tempSum=result})
}
fn(tempSum)
}
console.log(sum((r)=>{console.log(r)},1,2,4,5,5,7))
12，实现Object.is
面试官问Set是用什么实现的，我说Object.is，然后他说你能自己实现一个吗，主要是NaN和+-0的判等，+-0我想用算数移位看符号的，结果失败，然后面试官说可以除+-0，判断正负无穷的相等性。
13，lru
三、手写css题
1，实现三角形
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
2，手写自适应两栏布局
我刚开始写了个flex，然后面试官问还有吗，我答calc(100%-100px)，然后他又问我还有吗，没想到，后来想想他可能想问bfc
四、js基础
1，es6新增，class的super指向父原型对象，map和weakmap，set和weakset，箭头函数和普通函数的this指向，document.addEventListener的this指向（箭头函数中window，普通函数中target），Genrator和yield，Proxy和Reflect
2，js事件循环，setTimeout的时间是等待加入队列的时间,在setInterval中加入alert，会怎么执行
3，Promise和aysnc和await，抄了一道读代码题
let a;
const b = new Promise((resolve, reject) => {
console.log('promise1');
resolve();
}).then(() => {
console.log('promise2');
}).then(() => {
console.log('promise3');
}).then(() => {
console.log('promise4');
});
a = new Promise(async (resolve, reject) => {
console.log(a);
await b;
console.log(a);
console.log('after1');
await a
resolve(true);
console.log('after2');
});
console.log('end');
4，原型链、js继承的六种方式及优缺点、也抄了道读代码题
console.log('Hello World!');
Function.prototype.a = () => console.log(1);
Object.prototype.b = () => console.log(2);
function A() {}
const a = new A();
a.a();
a.b();
5，强缓存与协商缓存，304状态码
6，cookie和localStorage，sessionStorage
7，xss和csrf攻击
8，跨域方式、jsonp详细原理、cors普通请求和复杂请求的区别
9，typeof和instanceof，及Object.prototype.toString.call()
10，事件流，事件冒泡与事件捕获
11，dom事件，document.ready和window.onload
12，垃圾回收机制及存放堆区还是栈区及闭包
13，xhr
14，cmd和amd，commonjs和es6，require加载顺序，详见红宝书
15，重排和重绘以及怎样防止重排和重绘
16，[]==![]
五、webpack
1，loader和pluguin的区别、执行顺序
2，cssloader和styleloader区别、babelpolyfill和babelruntime的区别
3，babel原理与ast树与编译原理
3，静态引入才能做treeshaking
4，webpack优化相关，codesplit，treeshaking，sourcemap和gzip
5，webpack多入口配置
6，cssmodule的开启
7，骨架屏
六、vue相关
1，vue和react的区别
2，源码理解，包括initState，nextTick，set，computed，以及Object.defineProperty、发布订阅模式、diff算法
3，watch的immediate和deep
4，vue3和vue2的区别，Proxy不兼容ie
5，vue父子组件生命周期钩子的执行顺序
6，组件间通信方式，vuex模块化，怎么在一个模块里通知另一个模块
7，hash和history的原理及优缺点
8，路由钩子
9,vue加载优化
10，vue.component和extend
11，数组变异方法的实现
七，css相关
1，水平与垂直居中的方式
2，flex：0 1 auto代表什么
3，bfc
juejin.cn/post/692419…
4，定位方式
5, 哪些属性可以继承
6，rem布局
7，怎样实现小于12px的字体
8，link和import
9，清除浮动的方式
10，让一个元素消失，当时答了display：none;visible:hidden；和opacity:0；应该是还有的
八，ts相关
1，type和interface
2，可选链
九，网络相关
1，iso模型和每层的协议
2，http1.1和2.0
3，tcp和udp，三次握手和四次挥手，为什么握手三次挥手四次，为什么要两个msl
4，http和https，ssl原理
不知道，然后我说我猜是rsa公钥加密私钥解密，然后面试官说你猜的好准哦。。。。。
5，从输入url到渲染界面，发生了什么，经典问题。
十，设计题，我的噩梦，真的完全不会。。。。。
1，让你设计一个input输入框，你会怎么做
2，设计一个dialog，用过$dialog(....)方式调用
3，实现ajax请求的封装，大概就是实现一个axios？
4，下拉加载更多，再滚上去，怎样减少重排重绘，印象中好像是删掉内容不删掉cell
5，实现一个div在父div里面的拖拽，手写代码。。。。。面试官你告诉我你能在面试半小时内写出来吗？？？
6，设计一个类似于elementUI的form表单
7，给个案例，问minxin里面放什么，组件里面放什么
8，大文件上传
9，vue实现一个树形组件
吸取的教训就是多看看平时使用的一些库的实现吧，比如axios和elementUI。
十一，其他
1，部署相关：jenkins和nginx，以及cdn原理，问了一下cdn向主服务器发送的是什么请求，这个我后来没搜到。。。。
2，设计模式：报你知道的设计模式，然后报的过程中被问过单例、装饰器和适配器、以及工厂和抽象工厂
3，echarts底层：我说webgl，canvas和svg，然后面试官好像不是很满意，我也不懂该答什么，懒得研究
