前端面試題（一）

1：實現一個函數判斷是否是迴文字符串

function run(input) {
    if(typeof input !== "string")
        return false
    return input.split('').reverse().join('') === input;
    //input.split('')能夠把字符串變成數組
}

 

2：兩種以上方式實現已知或者未知寬度的垂直水平居中

//已知寬高

.box{

                                  height: 400px;

                                  width: 400px;

                                  background-color: #808080;

                                  position: relative;

                         }

                         .box1{

                                  height: 100px;

                                  width:  100px;

                                  background-color: red;

                                  position: absolute;

                                  left: 0;

                                  right: 0;

                                  top: 0;

                                  bottom: 0;

                                  margin: auto;

                         }

//

.box{

                                  height: 400px;

                                  width: 400px;

                                  background-color: #808080;

                                  position: relative;

                         }

                         .box1{

                                  height: 100px;

                                  width:  100px;

                                  background-color: red;

                                  position: absolute;

                                  left:50%;

                                  top: 50%;

                margin-left: -50px;

                margin-top: -50px;

                         }

//未知寬高 transform: translate3d(-50%,-50%,0);

3D變化，-50%表示的是當前元素的50%

.box{

                                  height: 400px;

                                  width: 400px;

                                  background-color: #808080;

                                 position: relative;

                         }

                         .box1{

                                  height: 100px;

                                  width:  100px;

                                  background-color: red;

                                  position: absolute;

                                  left:50%;

                                  top: 50%;

                transform: translate3d(-50%,-50%,0);

                         }

//flex佈局

.box{

                                  height: 400px;

                                  width: 400px;

                                  background-color: #808080;

                                  display: flex;

                                  justify-content: center;

                                  align-items:center

                         }

                         .box1{

                                  height: 100px;

                                  width:  100px;

                                  background-color: red;

                        

                         }

3：實現效果，點擊容器內的圖標，圖標邊框變成border 1px solid red，點擊空白處重置。

Const box = document.getElementById('box');

 

function isIcon(target) {

return target.className.includes('icon')

}

 

box.onClick = function(e) { e.stopPropagation();

const target = e.target;

if (isIcon(target)) {

    target.style.border = '1px solid red'

  }

}

Const doc = document;

doc.onclick = function(e) {

const children = box.children;

for(let i; i < children.length; i++) {  

if (isIcon(children[i])) {

      children[i].style.border = 'none'

 

    }

  }

}

4：實現簡單的雙向數據綁定mvvm

<input type="text" id="input">

const data = {};
const input = document.getElementById("input");
input.onchange = e =>{
    let target = e.target;
    data.text = target.value;
}

Object.defineProperty(data,'text',{
     set(value){
         input.value = value;
         this.value = value;
     }

})

 

5: 實現Storge，使得該對象爲單例，並定於localStroage進行封裝設置數值setitem（key,value），

Getitem(key)；

class Store{
     constructor(){

     }

     static getInstance(){
         if(!Store.instance){
             Store.instance = new Store();
         }
         return Store.instance
     }

     set=(key,value) =>{
         localStorage.setItem(key,value);
     }

     get = (key)=>{
        return localStorage.getItem(key);
     }

}

 

6：事件循環機制event loop

    首先，js是單線程的，主要的任務是處理用戶的交互，而用戶的交互無非就是響應DOM的增刪改，使用事件隊列的形式，一次事件循環只處理一個事件響應，使得腳本執行相對連續，因此有了事件隊列，用來儲存待執行的事件，那麼事件隊列的事件從哪裏被push進來的呢。那就是另一個線程叫事件觸發線程作的事情了，他的做用主要是在定時觸發器線程、異步HTTP請求線程知足特定條件下的回調函數push到事件隊列中，等待js引擎空閒的時候去執行，固然js引擎執行過程當中有優先級之分，首先js引擎在一次事件循環中，會先執行js線程的主任務，而後會去查找是否有微任務microtask（promise），若是有那就優先執行微任務，若是沒有，在去查找宏任務macrotask（setTimeout、setInterval）進行執行。

事件循環，先執行宏任務，其中同步任務當即執行，異步任務，加載到對應的的Event Queue中(setTimeout等加入宏任務的Event Queue，Promise.then加入微任務的Event Queue)，全部同步宏任務執行完畢後，若是發現微任務的Event Queue中有未執行的任務，會先執行其中的任務，這樣算是完成了一次事件循環。接下來查看宏任務的Event Queue中是否有未執行的任務，有的話，就開始第二輪事件循環，依此類推。

 

7: 事件流

事件流分爲兩種，捕獲事件流和冒泡事件流。

捕獲事件流從根節點開始執行，一直往子節點查找執行，直到查找執行到目標節點。

冒泡事件流從目標節點開始執行，一直往父節點冒泡查找執行，直到查到到根節點。

事件流分爲三個階段，一個是捕獲節點，一個是處於目標節點階段，一個是冒泡階段。

 

8：有一個數組【1,2,3,4】實現數組的全排列

  //算法自行搜索

9：輸入url看到頁面的發生的所有過程，越詳細越好

首先瀏覽器主進程接管，開了一個下載線程。

而後進行HTTP請求（DNS查詢、IP尋址等等），中間會有三次捂手，等待響應，開始下載響應報文。將下載完的內容轉交給Renderer進程管理。

Renderer進程開始解析css rule tree和dom tree，這兩個過程是並行的，因此通常我會把link標籤放在頁面頂部。

解析繪製過程當中，當瀏覽器遇到link標籤或者script、img等標籤，瀏覽器會去下載這些內容，遇到時候緩存的使用緩存，不適用緩存的從新下載資源。

css rule tree和dom tree生成完了以後，開始合成render tree，這個時候瀏覽器會進行layout，開始計算每個節點的位置，而後進行繪製。

繪製結束後，關閉TCP鏈接，過程有四次揮手。

10：三次握手和四次揮手

爲何要三次揮手？

　　在只有兩次「握手」的情形下，假設Client想跟Server創建鏈接，可是卻由於中途鏈接請求的數據報丟失了，故Client端不得不從新發送一遍；這個時候Server端僅收到一個鏈接請求，所以能夠正常的創建鏈接。可是，有時候Client端從新發送請求不是由於數據報丟失了，而是有可能數據傳輸過程由於網絡併發量很大在某結點被阻塞了，這種情形下Server端將前後收到2次請求，並持續等待兩個Client請求向他發送數據...問題就在這裏，Cient端實際上只有一次請求，而Server端卻有2個響應，極端的狀況可能因爲Client端屢次從新發送請求數據而致使Server端最後創建了N多個響應在等待，於是形成極大的資源浪費！因此，「三次握手」頗有必要！

　　爲何要四次揮手？

　　試想一下，假如如今你是客戶端你想斷開跟Server的全部鏈接該怎麼作？第一步，你本身先中止向Server端發送數據，並等待Server的回覆。但事情尚未完，雖然你自身不往Server發送數據了，可是由於大家以前已經創建好平等的鏈接了，因此此時他也有主動權向你發送數據；故Server端還得終止主動向你發送數據，並等待你的確認。其實，說白了就是保證雙方的一個合約的完整執行！

　　使用TCP的協議：FTP（文件傳輸協議）、Telnet（遠程登陸協議）、SMTP（簡單郵件傳輸協議）、POP3（和SMTP相對，用於接收郵件）、HTTP協議等。