一面

自我介绍的流程，为啥学前端
类型监测 typeof 能监测出什么结果, typeof Array啥结果，instance of什么原理？
http缓存发生在什么时候，大致讲一下
垂直居中有哪些实现方式
你做的react的项目有什么难点么？
css选择器
你知道哪些状态码？403？504？
移动端怎么兼容不同size的设备
一个字符串中不重复的最长子序列,例如:1231456 =>231456，算法。

面试官好真的好和蔼，第二道题我一开始只答了object和六种基本数据类型，面试官就提示我typeof Error返回什么，我才想起function,然后又问Array呢，科普一下，array是object，instance of的原理就是原型链匹配,递归比较object.__proto__ == fn.prototype，然后JS也是万物皆对象的理念;

水平垂直居中答了flex、line-height、绝对定位top:50%;transform: translateY(-50%)、gird占位，然后答了grid的auto、rf、repeat属性；

算法题的话，应该是用双指针解决，滑动窗口。优化的话就是map键值对的的值，存下标，因为存次数没有意义。

项目难点:都难，SSR好难,css同构好难。css同构我真的觉得好难，服务端没有document,样式须得使用工具从.css文件中拿出来，用context收集起来以style标签传出来,面试官他似乎想了想，说css收集有工具。

二面

https和http2.0的区别
你知道的html有什么优化手段
get和post请求的区别
XMLHttpRequest和fetch的区别，用xhr模拟一下post请求
实现这样一个布局，无论外层容器宽高如何变化，黄色区域（内层）始终相对于外层容器垂直居中，左右各相距20px，同时黄色区域（内层）的高度始终为自身宽度的50%。

<div class="out">
    <div class="in"></div>
</div>

6.如下运行后的结果会是什么？nextTick、setImmediate什么作用

process.nextTick(() => {console.log('nextTick')})
Promise.resolve().then(()=> {console.log('promise1');}).then(()=> {
 console.log('promise2');
});
setImmediate(() => {console.log('setImmediate')})
console.log('end')

JS编码实现一个render方法，使得可以这样调用：

const year = '2017';
const month = '09';
const day = '21';
const str = render('${year}-${month}-${day}')({ year, month, day });
console.log(str); 输出2017-09-21

webpack的优化你知道哪些？
react 16的新特性

html有哪些优化方案：我这个真不知，我说SPA么？SSR?最后我也只想到requestAnimationFrame,顺带说了一下JS单进程，以及和setTimout的优点

实现render方法，是用正则/${(.*)}/匹配到${}里面的东西，用object[$0]替换，后来我才知道正则也写错了至少也是/\$\{[a-zA-Z]+\}/g,前些天刷算法题的时候刷到，'.'表示任何字符，心态崩了

get和post请求的差别我是真滴不知道，我只知道参数存放位置不同，大家也要去好好学学

布局的解法，大佬解法如下：

<style>
    :root {
      --widht: 400px
    }
    .out {
      width: var(--widht);
      height: 400px;
      display: flex;
      align-items: center;
      background-color: red;
    }
    .in {
      background-color: yellow;
      margin: 0 20px;
      width: calc(var(--widht) - 40px);
      height: calc((var(--widht) - 40px)/ 2);
    }
  </style>

总结

菜是原罪，还是好好学习，好好搬砖
给大家分享一下我的学习笔记：Git
简历附上，目前react党，求翻