今日面試題匯總2019-03-29

Q: CSS 有哪些樣式可以給子元素繼承!

可繼承的:font-size,font-weight,line-height,color,cursor等
不可繼承的一般是會改變盒子模型的:display,margin、border橄教、padding清寇、height等

更加全面的可以到引擎找

Q: CSS 中transition和animate有何區(qū)別? animate 如何停留在最后一幀!

transition一般用來做過渡的, 沒時間軸的概念, 通過事件觸發(fā)(一次),沒中間狀態(tài)(只有開始和結(jié)束)
而animate則是做動效,有時間軸的概念(幀可控),可以重復(fù)觸發(fā)和有中間狀態(tài);
過渡的開銷比動效小,前者一般用于交互居多,后者用于活動頁居多;
至于如何讓animate停留在最后一幀也好辦,就它自身參數(shù)的一個值就可以了

animation-fill-mode: forwards;  
<!--backwards則停留在首幀,both是輪流-->

Q: 求[1, 10, 11, -1,'-5',12, 13, 14, 15, 2, 3, 4, 7, 8, 9]內(nèi)最大值與最小值之差

// 來一個很粗糙的版本,只當(dāng)傳入是數(shù)組且可以隱性轉(zhuǎn)為數(shù)字的
function MaxMinPlus(arr) {
  // 返回最大值與最小值之差
  return Array.isArray(arr) ? Math.max.apply(Math, arr) - Math.min.apply(Math, arr) : console.log('傳入的不是數(shù)組亦或者未能解決的錯誤')
}

// 結(jié)果是 20

// 若是要完善的話,要考慮傳入的是非數(shù)組,
//傳入字符串的時候要判斷,然后切割為數(shù)組..
// 都要考慮進去代碼量不短

Q: 請給Array實現(xiàn)一個方法,去重后返回重復(fù)的字符(新數(shù)組)‘’

 var testArr = [1,6,8,3,7,9,2,7,2,4,4,3,3,1,5,3];
    
  Array.prototype.extraChar = function(){
      var cacheExtraChar = []; // 緩存重復(fù)出現(xiàn)的字符
      var that = this; // 緩存 this;
      this.map(function(item,index){
          // 怎么理解這段代碼呢?
          // 就是向前往后查找一遍和從后往前查找一遍,不等就是沒有重復(fù)
          // 為什么還要判斷一遍緩存,是過濾緩存數(shù)組內(nèi)多次寫入
          (that.indexOf(item) !== that.lastIndexOf(item)) && cacheExtraChar.indexOf(item) === -1 ? cacheExtraChar.push(item) : -1;
      });
      return cacheExtraChar;
  }


testArr.extraChar(); // [1, 3, 7, 2, 4]

// 若是還需要排序就再排序下

[1,6,8,3,7,9,2,7,2,4,4,3,3,1,5,3]
.extraChar()
.sort(function(a,b){return a-b}) // [1, 2, 3, 4, 7]

Q: 談?wù)勀銓?TCP 的理解;

文章連接

Q: HTTP 和 HTTPS 有何差異? 聽說過 SPDY 么?

我只是粗淺的回答了下...

HTTP相對于 HTTPS來說,速度較快且開銷較小(沒有 SSL/TSL) 對接,默認是80端口;

HTTP容易遭受域名劫持,而HTTPS相對來說就較為安全但開銷較大(數(shù)據(jù)以加密的形式傳遞),默認端口為443..

HTTP是明文跑在 TCP 上.而HTTPS跑在SSL/TLS應(yīng)用層之下,TCP上的

Q: 那么 HTTPS中的TLS/SSL是如何保護數(shù)據(jù)的...

一般有兩種形式,非對稱加密,生成公鑰和私鑰,私鑰丟服務(wù)器,公鑰每次請求去比對驗證;

更嚴謹?shù)牟捎?CA(Certificate Authority),給密鑰簽名....

Q: 你說到對稱加密和非對稱加密,能說說整個流程如何運轉(zhuǎn)的么(HTTPS)

對稱加密:
- 雙方都有同樣的密鑰,每次通訊都要生成一個唯一密鑰,速度很快
- 安全性較低且密鑰增長的數(shù)量極快
非對稱加密(一般用 RSA)
- 安全性很高,對資源消耗很大(CPU),目前主流的加密算法(基本用于交換密鑰或簽名,而非所有通訊內(nèi)容)
CA(數(shù)字簽名):
- 這個是為了防止中間人給偷換了造成數(shù)據(jù)被竊取而誕生的
- 用一些權(quán)威機構(gòu)頒布的算法來簽名,權(quán)威機構(gòu)做中間人,通訊過程都會跟機構(gòu)核對一遍

懂得真心不多,回來找了下相關(guān)資料,有興趣可以點擊看看;

深入揭秘HTTPS安全問題&連接建立全過程
深入理解 https 通信加密過程:口語化 " : 看了上面那篇文章來看下面,會清晰很多

Q: SPDY 聽說過么.什么來的?

谷歌推行一種協(xié)議(HTTP 之下SSL之上[TCP]),可以算是HTTP2的前身,有這么些優(yōu)點

壓縮數(shù)據(jù)(HEADER)
多路復(fù)用
優(yōu)先級(可以給請求設(shè)置優(yōu)先級)

而這些優(yōu)點基本 HTTP2也繼承下來了..

Q: 你對 HTTP 的狀態(tài)嗎了解多少...

這里列舉一丟丟常見的..

1XX: 一般用來判斷協(xié)議更換或者確認服務(wù)端收到請求這些
- 100: 服務(wù)端收到部分請求,若是沒有拒絕的情況下可以繼續(xù)傳遞后續(xù)內(nèi)容
- 101: 客戶端請求變換協(xié)議,服務(wù)端收到確認
2xx: 請求成功,是否創(chuàng)建鏈接,請求是否接受,是否有內(nèi)容這些
- 200: (成功)服務(wù)器已成功處理了請求喘漏。
- 201: (已創(chuàng)建)請求成功并且服務(wù)器創(chuàng)建了新的資源。
- 202: (已接受)服務(wù)器已接受請求华烟，但尚未處理翩迈。
- 204: (無內(nèi)容)服務(wù)器成功處理了請求，但沒有返回任何內(nèi)容盔夜。
3XX: 一般用來判斷重定向和緩存
- 301: 所有請求已經(jīng)轉(zhuǎn)移到新的 url(永久重定向),會被緩存
- 302: 臨時重定向,不會被緩存
- 304: 本地資源暫未改動,優(yōu)先使用本地的(根據(jù)If-Modified-Since or If-Match去比對服務(wù)器的資源,緩存)
4XX: 一般用來確認授權(quán)信息,請求是否出錯,頁面是否丟失
- 400: 請求出錯
- 401: 未授權(quán),不能讀取某些資源
- 403: 阻止訪問,一般也是權(quán)限問題
- 404: 頁面丟失,資源沒找到
- 408: 請求超時
- 415: 媒介類型不被支持负饲，服務(wù)器不會接受請求。
5XX: 基本都是服務(wù)端的錯誤
- 500: 服務(wù)端錯誤
- 502: 網(wǎng)關(guān)錯誤
- 504: 網(wǎng)關(guān)超時

Q: HTTP的請求報文是怎么樣的,能大體的說下么?

HTTP 的請求報文 = 請求行 + 請求頭 + 請求體;

請求行: 這個好理解就是訪問的方法+ 協(xié)議+ 訪問的 URL 構(gòu)成
請求頭: 這個也好理解,比如 accept,content-type,user-agent這類值鍵對,服務(wù)端可以直接讀取的
請求體: 比如 POST 提交的一個表單,我們編碼后放在上面需要傳遞的

想深入了解的具體引擎搜索

Q: 請求報文知道,那你說說cookie是如何跟隨請求的?

Cookie 就是保存在 HTTP 協(xié)議的請求或者應(yīng)答頭部(Cookie 是由服務(wù)端生成),這樣一路漂泊...

Q: Cookie 隔離是什么,如何做;

cookie 隔離就是降低 header 的數(shù)據(jù)包含,以達到加快訪問速度的目的

方案: 靜態(tài)資源丟 CDN或者非主域來加載

Q: 瀏覽器緩存和服務(wù)端的緩存控制你了解多少,說說看?

文章鏈接

Q:有字符串 var test='abc345efgabcab'; 請根據(jù)提示實現(xiàn)對應(yīng)要求

去掉字符串中的 a,b,c 字符 ,形成結(jié)果'345efg';

test.replace(/[abc]/g,''); // "345efg"

將字符串的數(shù)字用括號括起來, 形成結(jié)果: abc[3][4][5]efg....'

test.replace(/\d/g,'[$&]');  // "abc[3][4][5]efgabcab"

// 若是有分組則按照$1, $2, $3的形式進行引用喂链，而 $& 則表示的是整個正則表達式匹配的內(nèi)容返十。

將字符串中的每個數(shù)字的值分別乘以2,輸出:'abc6810....'

var temp = test.split('').map(function(item){
  return /^\d$/.test(item) ? item * 2 : item;
}).join('');

// "abc6810efgabcab"

Q: Vue-Router的兩種模式主要依賴什么實現(xiàn)的

hash主要依賴location.hash來改動 URL,達到不刷新跳轉(zhuǎn)的效果.每次 hash 改變都會觸發(fā)hashchange事件(來響應(yīng)路由的變化,比如頁面的更換)
history主要利用了 HTML5的 historyAPI 來實現(xiàn),用pushState和replaceState來操作瀏覽歷史記錄棧

Q: MVVM 和 MVC 的差異? 聽說過 MVP?

這類的文章好多,三個開發(fā)模式的誕生都有前后,不是同時出現(xiàn)的.

傳送門:

MVC，MVP 和 MVVM 的圖示
淺析前端開發(fā)中的 MVC/MVP/MVVM 模式

Q: 你對基礎(chǔ)算法這塊掌握的如何....

來,這紙給你,寫個快排試試...

// 快排的大體思路是這樣的,
// 找個中位值,從原數(shù)組切割出來,
// 剩下的作為兩個數(shù)組,每次都去比較;
// 直到遞歸的結(jié)果出來, 平均復(fù)雜度O(nlog n)

function quickSort(arr) {
  //如果數(shù)組長度<=1,則直接返回
  if (arr.length <= 1) {
    return arr;
  }
  // 中間位(基準)取長度的一半向下取整
  var pivotIndex = Math.floor(arr.length / 2);
  //把中間位從原數(shù)組切割出來, splice 會改變原數(shù)組!!!!
  var pivot = arr.splice(pivotIndex, 1)[0];
  //定義兩個空數(shù)組來存放比對后的值
  var left = [];
  var right = [];

  //比基準小的放在left椭微，比基準大的放在right
  for (var i = 0 , j = arr.length; i < j; i++) {
    if (arr[i] <= pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  //遞歸下去  arr = [ left , pivot , right]
  // 怎么個遞歸法,就是比對后的數(shù)組還是會重復(fù)之前的取基準再切開比較..直到最后沒有可以切了
  return quickSort(left).concat([pivot], quickSort(right));
}