Web前端2019面試總結3（東軟集團面試題）

嚴禁轉載，嚴禁分享，只供私自鑒賞，請君悉知！

一：基礎題

1.什么是margin塌陷？請寫出至少三種解決margin塌陷的方法。

答：當兩個盒子在垂直方向上設置margin值時，會出現一個有趣的塌陷現象。

解決方法：

（1）為父盒子設置border，為外層添加border后父子盒子就不是真正意義上的貼合  （可以設置成透明：border：1px solid transparent）。

（2）為父盒子添加overflow：hidden；

（3）為父盒子設定padding值；

（4）為父盒子添加position：fixed；

（5）為父盒子添加 display：table；

（6）利用偽元素給子元素的前面添加一個空元素

 

2.當元素的樣式發生變化時，瀏覽器需要觸發更新，重新繪制元素。這個過程中有兩種類型的操作，即重繪與回流。

請問什么時候會發生重繪（repaint），簡述什么時候會發生回流（reflow），在寫css和javascript時應該注意哪些可以減少和避免重繪和回流？

答：

什么是回流：

當render tree中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次加載的時候，這時候是一定會發生回流的，因為要構建render tree。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。

什么是重繪：

當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。

 

區別：

回流必將引起重繪，而重繪不一定會引起回流。比如：只有顏色改變的時候就只會發生重繪而不會引起回流。

當頁面布局和幾何屬性改變時就需要回流。比如：添加或者刪除可見的DOM元素，元素位置改變，元素尺寸改變——邊距、填充、邊框、寬度和高度，內容改變

CSS中避免回流、重繪

1.盡可能在DOM樹的最末端改變class
2.避免設置多層內聯樣式
3.動畫效果應用到position屬性為absolute或fixed的元素上
4.避免使用table布局
5.使用css3硬件加速，可以讓transform、opacity、filters等動畫效果不會引起回流重繪

JS操作避免回流、重繪

1.避免使用JS一個樣式修改完接着改下一個樣式，最好一次性更改CSS樣式，或者將樣式列表定義為class的名稱
2.避免頻繁操作DOM，使用文檔片段創建一個子樹，然后再拷貝到文檔中
3.先隱藏元素，進行修改后再顯示該元素，因為display:none上的DOM操作不會引發回流和重繪
4.避免循環讀取offsetLeft等屬性，在循環之前把它們存起來
5.對於復雜動畫效果,使用絕對定位讓其脫離文檔流，否則會引起父元素及后續元素大量的回流

 

3.請用原生js手寫節流和防抖。

防抖函數。

　　將幾次操作合並為一次操作進行。設置一個計時器，規定在延遲時間后觸發函數，但是在延遲時間內如果再次觸發，就會取消之前的計時器。如此，只有最后一次操作能觸發。代碼如下：

function debounce(fn,wait){
     let timer=null;
     return function(){
          let args=arguments,that=this;
          timer&&clearTimeout(timer);
          timer=setTimeout(function(){fn.apply(that,args)},wait)
     }        
}

節流函數。

　　一定時間內只觸發一次函數。並且開始觸發一次，結束觸發一次。代碼如下：

function throttle(fun, delay){
  let timer = null;
  let startTime = Date.now();
  return function(){
    let curTime = Date.now();
    let remain = delay - (curTime - startTime);
    let that = this;
    let args = arguments;
    clearTimeout(timer);
    if(remain <= 0){
      fun.apply(that,args);
      startTime = Date.now();
    }else{
      timer = setTimeout(fun, remain);
    }
  }
}

 

4.以下代碼的運行結果是什么？簡述一下原因。

  <script>
    setTimeout(() => {
      console.log(1)
    }, 0)
    const promise = new Promise((resolve, reject) => {
      console.log(2);
      resolve()
      console.log(3);
    })
    promise.then(() => {
      console.log(4);
    })
    console.log(5);
    // 輸出結果為： 2 3 5 4 1
  </script>

 

5.深拷貝：完全拷貝一個新對象，修改時原對象不再受到任何影響，請封裝一個深拷貝的函數。

//對象及數組深拷貝函數封裝
        function deepCopy(objOrArr) {
            var type = objOrArr instanceof Array ? 'arr' : 'obj'
            var newObjOrArr = objOrArr instanceof Array ? [] : {}
            if (type === 'arr') {
                newObjOrArr = JSON.parse(JSON.stringify(objOrArr))
            } else {
                for (var key in objOrArr) {
                    if (objOrArr.hasOwnProperty(key)) {
                        newObjOrArr[key] = typeof objOrArr[key] === 'object' ? deepCopy(objOrArr[key]) : objOrArr[key]
                    }
                }
            }
 
            return newObjOrArr
        }

 

6.1XX,2XX,3XX,4XX,5XX,開頭的狀態碼表示什么？

答：

　　1XX類狀態碼信息表示：臨時的響應。客戶端在收到常規響應之前，應准備接收一個或多個1XX響應

　　2XX類狀態碼信息表示：服務器成功的接收了客戶端請求

　　3XX類狀態碼信息表示：客戶端瀏覽器必須采取更多操作來實現請求。例如，瀏覽器可能不得不請求服務器上的不同頁面，或者通過代理服務器重復該請求

　　4XX類狀態碼信息表示：發生錯誤，客戶端似乎有問題。例如：客戶端請求不存在的頁面，客戶端為提供有效的身份驗證信息

　　5XX類狀態碼信息表示：服務器遇到錯誤而不能完成該請求

 

7.請簡述一下TCP三次握手的過程。

TCP握手協議 
在TCP/IP協議中,TCP協議提供可靠的連接服務,采用三次握手建立一個連接.
第一次握手：建立連接時,客戶端發送syn包(syn=j)到服務器,並進入SYN_SEND狀態,等待服務器確認； 
SYN：同步序列編號(Synchronize Sequence Numbers)
第二次握手：服務器收到syn包,必須確認客戶的SYN（ack=j+1）,同時自己也發送一個SYN包（syn=k）,即SYN+ACK包,此時服務器進入SYN_RECV狀態； 
第三次握手：客戶端收到服務器的SYN＋ACK包,向服務器發送確認包ACK(ack=k+1),此包發送完畢,客戶端和服務器進入ESTABLISHED狀態,完成三次握手.

8.請用原生的js封裝一個方法，對一個無序數組進行排序。

例如：arr = [1，6，2，18，9，21，5，32，16]

//冒泡排序（從小到大）
function bubbleSortSmallToBig(arr){
    for(var i = 1;i < arr.length;i ++){
        for(var j = 0;j < arr.length - i;j ++){
            if(arr[j] > arr[j + 1]){
                var t = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = t;
            }
        }
    }
    return arr;
}

 

9.請用原生的js封裝一個方法，對一個有序數組進行隨機亂序。

例如：arr = [1，6，2，18，9，21，5，32，16]

function chan(data) {
      for (let i = 0; i < data.length; i++) {
        // 生成隨機索引，然后將生成的隨機索引和遍歷的a[i]進行對調
        let index = parseInt(Math.random() * data.length);
        let zancun = data[i];
        data[i] = data[index];
        data[index] = zancun;
      }
    }

 

10.請簡述一下對 token丶cookie丶session 三者的理解。

詳情：https://blog.csdn.net/jikeehuang/article/details/51488020

 

二：綜合題

1.假設我們目前擁有一個產品化的項目，但是存在某些客戶擁有不同的定制化版本，假設我們為每個用戶都新建一個項目，

那么客戶越多，項目就會越多，如此積累下去項目會變得非常的難以維護，請問你會用什么方式去解決該問題？

答：。。。

 

2.git的沖突是怎么產生的？gitlab如何進行分支保護策略？

答：多個開發者同時使用或者操作git中的同一個文件，最后在依次提交commit和推送push的時候，第一個操作的是可以正常提交的，而之后的開發者想要執行pull（拉）和pull（推）操作的時候，就會報沖突異常conflict。

 

3.請簡述一下在瀏覽器中輸入 url 到渲染頁面的過程。

答：

1.DNS解析 (域名轉ip)
2.與服務器建立連接 (瀏覽器獲得完整的服務器IP地址后，域名解析環節完成。之后，瀏覽器通過IP地址查找到對應的服務器，並將用戶發起的http請求發送給服務器。)
3.服務器處理並返回http報文
4.瀏覽器解析渲染頁面 (瀏覽器接收到后台返回的HTML字符串后，會依次經歷：加載、解析、渲染。)

詳情： https://www.jianshu.com/p/308212675adb