第一次前端实习生面试的经验分享

前言
12月第一次得到字节的前端面试机会，结果一手抓考试一手抓面试，考试考的还不错，结果面试还是准备不充分，第一回合就挂了，当时面完整个人是懵的。现在比较闲了，记录一下当时面试的一些问题。

网络知识

1. 跨域问题是什么，怎么解决跨域问题

跨域是因为浏览器的同源政策造成的，浏览器会限制不同源（包括域名、端口、协议）的XHR请求，因此不同来源的img、js脚本不会被浏览器拦截，但是XHR请求会被拦截。

解决方案：

1. 发送JSONP请求代替JSON数据，不推荐，因为只能使用GET请求，服务端还需修改代码；
2. 使用Nginx进行反向代理，即让浏览器访问Nginx服务器即可，只需要配置Nginx，在前端的请求中修改请求路径即可；(当时只会这个）
3. 使用CORS请求，可以参考http://www.ruanyifeng.com/blog/2016/04/cors.html。

2. GET和POST的区别

相对来说基础的东西，简单来说GET用来请求数据，POST用来提交数据，虽然GET可以用参数来提交一些东西，但是会放在URL里，因此不要用GET发送敏感信息，尽量还是用POST请求提交数据。

CSS、JS

1. 垂直居中怎么实现

1. 高度已知：

        .father {
            position: relative;
            background-color: aqua;
            height: 300px;
        }
        
        .son {
            position: absolute;
            background-color: brown;
            height:100px
            bottom: 0;
            top: 0;
            margin: auto;
        }

这里是使用绝对定位，将子元素上下边沿紧贴父元素，然后再用margin:auto来让子元素实现垂直居中。

2.高度未知：

        .father {
            display: flex;
            background-color: aqua;
            height: 300px;
            align-items: center;
        }
        
        .son {
            background-color: brown;
        }

使用flex布局，然后align-items为center，让子元素在交叉轴（默认纵向）上的布局为居中。

        .father {
            background-color: aqua;
            height: 300px;
        }
        .father::after{
            content: '';
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }
        .son {
            display: inline-block;
            background-color: brown;
        }

这里是使用display:inline-block的方法，让子元素成为一行，然后再插入after伪元素，并且让伪元素高度占满整个高度，这样看起来子元素就是垂直居中的。

2. JavaScript的EventLoop

console.log('a');
setTimeout(function () {
    console.log('b');
    new Promise(function (resolve) {
        console.log('c');
        resolve();
    }).then(function () {
        console.log('d')
    })
})
new Promise(function (resolve) {
    console.log('e');
    resolve();
}).then(function () {
    console.log('f')
})

问打印的顺序，看这个就明白了https://mp.weixin.qq.com/s/UBCa-kYgSLk6_4XCP-EzGg

算法

1. 排序，二叉树遍历

没啥说的，会就行。

2. leetcode 887

https://leetcode-cn.com/problems/super-egg-drop/

先二分查找，如果第一个鸡蛋碎了，那么就再逐个遍历尝试即可。

总结

个人来说，算法这边太不熟练了，约莫一年没做过算法题连快排也忘了，在这里吃了大亏。

题目难度来说还算简单的，就是大概测试一下一些基础内容。