第一次前端實習生面試的經驗分享

前言
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/

先二分查找，如果第一個雞蛋碎了，那么就再逐個遍歷嘗試即可。

總結

個人來說，算法這邊太不熟練了，約莫一年沒做過算法題連快排也忘了，在這里吃了大虧。

題目難度來說還算簡單的，就是大概測試一下一些基礎內容。