前端實習面試題答案自解(二)--持續更新

時間 2020-03-20

原文原文鏈接

百度第二次

一面

1.閉包css

對我而言，閉包其實就是防止某些數據被js自動回收。能夠重複利用。html

那麼閉包的用處也就產生了，其實就是將有可能被回收的數據進行重複的利用。前端

var arr=[];
var demo = ()=>{
  for(var i=0;i<3;i++){
    arr[i]=function inc(){
      console.log(i);
    }
  }
}
demo();
arr[0]();//3
arr[1]();//3
arr[2]();//3

以上這個錯誤例子使咱們正常使用代碼的時候產生的錯誤。由於js內存回收的機制，因此致使全部的都被回收了。也就發生了這樣的錯誤。那麼咱們可使用閉包來避免vue

var arr=[];
var demo = ()=>{
  for(var i=0;i<3;i++){
    arr[i]=(function inc(){
      console.log(i);
    })()
  }
}
demo();
arr[0];//0
arr[1];//1
arr[2];//2

順便說一下，在es6中提供了新的方式來解決這類問題，就是使用let類型聲明變量java

var arr=[];
var demo = ()=>{
  for(let i=0;i<3;i++){
    arr[i]=function inc(){
      console.log(i);
    }
  }
}
demo();
arr[0]();//0
arr[1]();//1
arr[2]();//2

具體爲何看我上一個答案自解裏面有let的相關解釋就能夠了。node

2.做用域鏈webpack

所謂的做用域鏈就是查找數據變量的數據css3

如下是很簡單的代碼，一旦碰到console.log(a)，會自動找a變量，那麼在demo對象裏面聲明的a是最近的，那麼顯示的變量就是2。nginx

var a=1
var demo = ()=>{
  var a=2
  console.log(a);
}
demo();//2

看一個更多的git

var a=1
var demo = ()=>{
  var b=2;
  (function demo1(){
    (function demo2(){
      console.log(a);
    })()
  })()
}
demo();

這個很明顯輸出的必定是1。咱們都知道一個方法就是一個做用域，那麼在最內層的做用域中沒有那麼就往它更外部的查找，直到找到此種變量或者出現錯誤的時候纔會中止。

那麼咱們可使用棧的方式來解釋這個現象

window對象

demo

window對象

demo

demo1

window對象

demo

demo1

demo2

以相似棧的形式來解釋這個。當咱們在demo2中查找的時候就會從最上層一直查找到window，若是找不到那麼就報錯。內存回收的時候就是從上層一個一個進行回收，每當回收的時候，內部所定義的方法或者變量除非外部有引用，不然就會被銷燬不存在。

3.垃圾回收制

2題內最後部分。。。說的可能不是特別清楚，不過大概應該仍是能夠看懂的

4.垃圾回收制的循環引用問題

關於這個問題。。。。說真的看完解釋之後發現這個真的是一個比較古老的問題了。

首先要肯定一下倆個空間裏面分別存儲的都是什麼。

棧內存存儲的是基本的數據類型，好比undefined、null、boolean、number、string。

堆內存存儲的是引用類型的值。、

棧內存使用的一級緩存，因此數據都會被調用以後直接被釋放。

堆內存使用的二級內存，生命週期是須要某些垃圾回收的算法來進行釋放。因此通常它使用的速度比較慢。

垃圾回收算法大約有倆種

1.mark and sweep(標記清除)

如今大部分瀏覽器都使用這種方式來進行內存的回收。大概就是變量進入執行環境的時候進行標記(標記爲進入環境)，變量離開環境的時候(函數執行結束)標記爲離開環境。那麼在給全部變量都進行標記以後，每次都去掉被標記的變量。

2.reference counting(引用計數)

這種方式大多在低版本的IE使用這種方式，這種也是很容易發生內存泄露的問題。若是某個變量聲明以後將一個引用類型賦值給變量時該值的引用次數加1，當這個變量指向一個其餘的值的時候那麼該值的引用次數減1。當他的引用次數減小到0的時候會被系統回收。

所謂的垃圾回收循環利用的方式就會在引用計數的這種方式中發生，

var a=document.getElementById('element');
var b={};
a.pro = b;
b.pro = a;

這樣dom元素就會始終都綁定在上面了,因此致使它一直在處於引用位置，那麼也就發生了內存泄露。

5.原型鏈

對於js原型鏈實際上就是一個相似查找的一個路徑。prototype原型的引用有多個須要說的點。

總的來講這個圖片就囊括了全部的原型鏈的知識。

首先要明白，在js中萬物皆對象。第二個咱們須要知道__proto__、prototype和constructor這三個名詞。

constructor(構造函數)、__proto__(隱式原型)、prototype(顯示原型)

function Foo() {};
var f1 = new Foo;

以上面這個方法聲明當作例子。

function Foo() {};
var f1 = new Foo;
console.log(f1.constructor===Foo);

以上部分其實就相似java中的類聲明。Foo就是一個構造函數。f1就是咱們聲明的實例對象。那麼也就是很好理解constructor(構造函數)的含義了。

function Foo() {};
var f1 = new Foo;
console.log(f1.__proto__===Foo.prototype);//true

以上部分就是Foo的原型指向的其實就是實例對象所具備的__proto__指向的是原型對象

function Foo() {};
Object.prototype.a=1
var f1 = new Foo;
console.log(f1.a);//1

那麼原型鏈依據剛剛的圖就很容易理解了。相似上述代碼。咱們想使用f1的實例對象查找到a的值，可是咱們在Foo構造函數中沒有聲明該種變量的值，因此就須要沿着原型鏈取查你想找的數據，在js中全部對象的最終指向都是Object(經過__proto__查找)。固然若是沒有查找到的話那麼就直接報錯。

6.瀏覽器的兼容（說幾個CSS說幾個JS）

對於css3的兼容屬性不太好。例如屬性的動畫等，大多都須要加上-webkit-(chrome瀏覽器等)、-moz(火狐瀏覽器等)-、-o(opera)-等。還有3d變換中的聲明2d或者3d的動畫。對於css還有不一樣瀏覽器的默認外邊距不一樣。也就是說咱們在開始的時候須要使用*進行一下初步設定。

js的對於兼容我記得最清楚的就應該算是ajax的開始的對象聲明瞭。不一樣瀏覽器的確實聲明不一樣。還有就是對於咱們想取出當前觸發事件的對象event 須要使用var e = event || window.event。還有對scrolltop的獲取。

對於這個問題實在是我以爲回答起來很費勁，由於這個問題實在是太過籠統。給個人感受就是對你的項目或者敲得代碼的問題，或者乾脆面試官暫時沒想到什麼問題問你。。。。

7.PromiseA+規範

promiseA+規範實際上就是相似一個規則。

通常它是由如下組成的。

1.無論任何操做，最後都會返回一個promise對象，這個對象中必定會有一些固有的方法好比在es6中的promise內部就存在then，catch等方法。

2.存在三種狀態，未完成狀態、已完成狀態、出錯狀態(失敗)。

3.對於如今的promise就是使用then來進行promise內部成功的代碼，catch用來捕獲發生的錯誤。

var msg = "";
var msg1 = ""; 
getJSON(url){
      var promise = new Promise((resolve, reject) => {
        var client = new XMLHttpRequest();
        client.open("GET", url,true);
        client.onreadystatechange = handler;
        client.send(null);

        function handler() {
          if(this.readyState==4){
            if (this.status === 200) {
              resolve(this.responseText);
            } else {
              reject(new Error(this.statusText));
            }
          }
          
        };
      });
      return promise;
    }
    ineer(){
      getJSON("src/1.txt").then((json) => {
        msg=json;
        msg1=json;
      }).then(() => {
        this.getJSON("src/2.txt");
      }).then((json1) => {msg1 = json1+msg1;})

　　　　.catch((error) => { console.error('出錯了', error); }); } inner();

以上是使用promise規範來寫一個ajax異步提取文本數據的代碼。

8.HTTP狀態碼

http狀態碼是比較多的。所有的能夠直接百度。我記下的其實也不是不少。

好比最基本的200是表明成功。404代碼表明服務器沒法找到資源。408請求超時。400請求有錯誤。

另外還能夠大範圍記一些。不須要知道到底在哪裏出錯了。可是大體錯誤知道。例如

1打頭的三位數狀態碼。表明請求已經被接受，須要繼續操做。

2打頭的三位數狀態碼。表明請求已經成功被服務器接受，理解。

3打頭的三位數狀態碼。表明客戶端須要採起進一步操做才能完成請求。大多用來重定向中。

4打頭的三位數狀態碼，表明出現錯誤了。

五、6打頭的三位數狀態碼，表明服務器發生了錯誤。

9.HTTP首部有哪些關於緩存的字段

關於http首部的字段仍是比較多的，除了請求頭以外，還存在響應頭部。雖然我知道的也不是不少，因此就直接上網查詢了一下全部的，在此記錄一下。

請求頭：瀏覽器向服務器發送請求的數據，資源。

響應頭：服務器向瀏覽器響應數據，告訴瀏覽器我是誰，我要你作什麼。

常見的請求頭：

Accept: text/html,image/* 瀏覽器能夠接收的類型

Accept-Charset: ISO-8859-1 瀏覽器能夠接收的編碼類型

Accept-Encoding: gzip,compress 瀏覽器能夠接收壓縮編碼類型

Accept-Language: en-us,zh-cn 瀏覽器能夠接收的語言和國家類型

Host: www.lks.cn:80 瀏覽器請求的主機和端口

If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT 某個頁面緩存時間

Referer: http://www.lks.cn/index.html 請求來自於哪一個頁面

User-Agent: Mozilla/4.0 compatible; MSIE 5.5; Windows NT 5.0 瀏覽器相關信息

Cookie：瀏覽器暫存服務器發送的信息

Connection: close1.0/Keep-Alive1.1 HTTP請求的版本的特色

Date: Tue, 11 Jul 2000 18:23:51GMT 請求網站的時間

Allow:GET 請求的方法 GET 常見的還有POST

Keep-Alive：5 鏈接的時間；5

Connection：keep-alive 是不是長鏈接

Cache-Control：max-age=300 緩存的最長時間 300s

常見的響應頭：

Location: http://www.lks.cn/index.html 控制瀏覽器顯示哪一個頁面

Server:apache nginx 服務器的類型

Content-Encoding: gzip 服務器發送的壓縮編碼方式

Content-Length: 80 服務器發送顯示的字節碼長度

Content-Language: zh-cn 服務器發送內容的語言和國家名

Content-Type: image/jpeg; charset=UTF-8 服務器發送內容的類型和編碼類型

Last-Modified: Tue, 11 Jul 2000 18:23:51GMT 服務器最後一次修改的時間

Refresh: 1;url=http://www.lks.cn 控制瀏覽器1秒鐘後轉發URL所指向的頁面

Content-Disposition: attachment; filename=lks.jpg 服務器控制瀏覽器發下載方式打開文件

Transfer-Encoding: chunked 服務器分塊傳遞數據到客戶端

Set-Cookie:SS=Q0=5Lb_nQ; path=/search 服務器發送Cookie相關的信息

Expires: -1 資源的過時時間，提供給瀏覽器緩存數據,-1永遠過時

Cache-Control: no-cache 告訴瀏覽器，必定要回服務器校驗，無論有沒有緩存數據。

Pragma: no-cache 服務器控制瀏覽器不要緩存網頁

Connection: close/Keep-AliveHTTP 請求的版本的特色

Date: Tue, 11 Jul 2000 18:23:51 GMT 響應網站的時間

ETag：「ihfdgkdgnp98hdfg」資源實體的標識(惟一標識，相似md5值，文件有修改md5就不同)

以上就是http的頭部信息。其中具備關於緩存的大概是：

Expires：一個GMT時間，告訴瀏覽器，在此時間內，能夠信任而且使用對應的緩存數據。可是通常會獲取客戶端的時間，可能會致使錯誤。

Pragma：服務端控制瀏覽器不要緩存。

Cache-Control:

更加詳細的能夠查看http://blog.csdn.net/zhsh87/article/details/8186753

10.服務器怎麼判斷304

HTTP 304:Not Modified 請求後讀取本地緩存的文件。

解釋：客戶端有緩存的文檔併發出一個條件性的請求。服務器告訴客戶端，原來的緩衝的文件能夠繼續使用。

大體的瀏覽器工做原理：

1.在咱們使用瀏覽器的時候不少時候會在緩存中直接獲取內容。好比。前一頁、後一頁等瀏覽器操做，不會事瀏覽器在expires和max-age過時時間以內訪問瀏覽器，而是直接去緩存中去獲取內容。(expires和max-age是用來記錄文件是否緩存過時的請求頭部信息)

2.訪問服務器，根據服務器響應來獲取內容。固然須要結合相應的頭部信息來一塊兒起做用。例如no-cache的時候由於不緩存，Last-Modified、Etag、must-revalited有些特殊，不直接受瀏覽器行爲影響，它們必須訪問服務器以後，再由服務器判斷是直接發送新的資源，仍是使用304讓瀏覽器使用緩存中的資源。

304大體狀況以下：

客戶端在請求文件的時候，若是本身已經緩存的文件中有last modified，那麼就會在請求中添加If Modified Since，這個就是一個時間，和last modified相同。故而若是在相應的後端接收到請求的時候，判斷If Modified Since與請求的文件在服務端的修改時間就能夠最後肯定返回的是304，又或者是200。對於css、圖片，服務器會自動完成比較。可是對於動態網頁則有一些問題，動態產生的頁面，大多沒有last modified信息，這樣瀏覽器就不會緩存，因此每次都是200。

二面

1.進程與線程的區別

1.進程是資源分配的最小單位，線程是程序執行的最小單位。

2.進程有本身的獨立地址空間，每啓動一個進程，系統就會爲它分配地址空間，創建數據表來維護代碼段、堆棧段和數據段，這種操做很是昂貴。而線程是共享進程中的數據的，使用相同的地址空間，所以CPU切換一個線程的花費遠比進程要小不少，同時建立一個線程的開銷也比進程小不少。

3.線程之間的通訊更方便，同一線程下得進程共享全局變量、靜態變量等數據，而進程之間的通訊須要以通訊的方式（IPC）進行。不過如何處理好同步與互斥是編寫多線程程序的難點。

4.可是多進程程序更健壯，多線程程序只要有一個線程死掉，整個進程也死掉了，而一個進程死掉並不會對另一個進程形成影響，由於進程有本身獨立的地址空間。

2.SQL中事務的概念

事物實際上就是一種機制的存在，例如咱們須要操做數據庫，有一系列的命令操做，那麼這組命令實際上就是就是一個事務，另外這組命令要不都不執行，要麼就都執行一遍。

事務屬性：

1.原子性：事務是一個完整的操做。

2.一致性：當事務完成的時候，數據必須處於一致狀態。

3.隔離性：對數據進行修改的全部併發事務是彼此隔離的。

4.持久性：事務完成之後，它對系統的影響是永久的。

3.死鎖

死鎖實際上就是假設倆個進程a1和a2都須要使用B1和B2倆個資源。a1持有B1後等待B2，而a2正好持有B2等待B1，倆者都不想放棄手中的現有資源，這就出現了死鎖。

固然還要明確計算機哪些資源是能夠搶佔的、有些事不能夠搶佔的。

可搶佔：主存、cpu等可共享的資源。

不可搶佔：打印機，光驅等不可共享的資源。

4.產生死鎖的條件

好像上面已經答了。。。

還有一些比較詳細的：

1.互斥條件：某個資源只能被一個進程使用，其餘的進程請求該資源時候，只能等待，直到資源使用完畢後釋放該資源。

2.請求和保持條件：進程已經保持了至少一個資源，可是又提出了新的要求，而這個資源被其餘進程佔用，本身佔用的資源卻不放。

3.不可搶佔條件：進程已經得到的資源沒有使用完，不能被搶佔。

4.循環等待條件：必然存在一個循環鏈

5.CHAR和VARCHAR的區別

首先要知道這倆者都是數據庫的存儲數據類型，而且都是字符串類型的數據類型。

區別在於，若是咱們規定該列數據的類型爲char且長度爲10，那麼若是咱們輸入'abcd'，這時的字符串其實是4的長度。那麼它在數據庫中依舊按照10的長度存儲，會有6的浪費。

而varchar不會有這樣的問題，假如上面的條件都不改變，僅改變數據的類型，那麼實際上它佔有的長度就是字符串的長度4。這樣就達到了節省資源的目的。

可是！char的存取速度是要比varchar快不少的。由於長度固定，方便程序的存儲和查找，可是char也付出了空間的浪費的代價。

而且還有一個區別就是char對於每個英文字符佔用1個字節，漢字佔用倆個字節。varchar都是佔用2個字節。

8.前端安全

ok。這又回到xss攻擊和csrf攻擊模式上面了。

這回再說一遍個人理解吧。

首先說一下xss攻擊是指什麼，在個人理解裏面，實際上它就是一種html注入式攻擊，簡單來講，若是咱們使用的是一個相似csdn或者博客園這種，咱們若是加上<script>alert(aaa)</script>，那麼實際上顯示的時候可能會彈出一個對話框，那麼若是咱們更深一步，在script特定標籤內部使用某種特殊的帶有危害性性質的東西，例如發送cookie或者一些其餘的問題，就會致使不安全的事件發生。解決起來其實不是特別麻煩，咱們須要對用戶的輸入進行一些詳細的限制例如將<>都轉化爲實體字符的形式存在。

第二個就是csrf上面了，一樣在個人理解裏面他是一種能夠盜取用戶的cookie的並假借用戶的名義進行一次請求的發送。咱們在一些特殊的網頁，例如銀行等等，咱們須要使用cookie等記錄登陸狀態，假如咱們此時再打開一個危險的網頁，這時候這個危險網頁可能會讀取另外一個特殊的網頁內部的cookie並模擬發送請求，這樣就會有安全問題的產生了。解決辦法就是能夠驗證http頭部帶有的一個特殊的Referer來驗證是否這個請求是規範的本身的請求，固然這個也是能夠模擬的，除此以外還可使用驗證碼的形式。

10.重定向怎麼實現

redirect。node帶有一個請求的返回response.redirect()。

11.離開確認怎麼實現

onbeforeunload js自帶的驗證是否離開

12.並行和併發

並行能夠解釋爲：假設倆組排隊的人都要打咖啡，每組都有本身的咖啡機，倆組人互不干擾。

併發能夠解釋爲：假設倆組排隊的人都要打咖啡，可是隻有一個咖啡機，倆組人須要進行競爭。

因此說，併發意味着多個執行的實體須要競爭資源，不可避免產生競爭和同步的關係。而並行則是不一樣的執行實體擁有各自的資源，相互之間互不干擾。

美團

一面

1.Vue雙向數據綁定
2.diff算法
3.vue計算屬性如何實現
4.vdom優缺點
5.SPA原理
6.webpack用過那些loader
7.gitHub
8.angular髒檢查
9.export看代碼說結果（好像babel轉碼的export和node裏的不太同樣）
10.let、const
11.箭頭函數
12.localStorage缺點
13.手寫算法，求二叉樹中兩個標記的節點之間的最短路徑吧，（相似迪杰特斯拉算法吧）