前端面試題（七）

目錄

1.浏覽器輸入URL發生了什麼？

2.new會發生什麼？

3.token能放在cookie中嗎？

4.盒模型

5.元件通信的方式

6.v-if 和 v-show差別

1.說一下浏覽器輸入URL發生了什麼？

輸入位址，浏覽器查找域名的IP位址。浏覽器向該IP位址的web伺服器發送一個HTTP請求，在發送請求之前浏覽器和伺服器建立TCP的三次握手，判斷是否是HTTP緩存，如果是強制緩存且在有效期内，不再向伺服器發請求，如果是HTTP協商緩存向後端發送請求且和後端伺服器對比，在有效期内，伺服器傳回304，直接從浏覽器擷取資料，如果不在有效期内伺服器傳回200，傳回新資料。請求發送出去伺服器傳回重定向，浏覽器再按照重定向的位址重新發送請求。如果請求的參數有問題，伺服器端傳回404，如果伺服器端挂了傳回500。如果有資料一切正常，當浏覽器拿到伺服器的資料之後，開始渲染頁面同時擷取HTML頁面中圖檔、音頻、視訊、CSS、JS，在這期間擷取到JS檔案之後，會直接執行JS代碼，阻塞浏覽器渲染，因為渲染引擎和JS引擎互斥，不能同時工作，是以通常把Script标簽放在body标簽的底部。 渲染過程就是先将HTML轉換成dom樹，再将CSS樣式轉換成stylesheet，根據dom樹和stylesheet建立布局樹，對布局樹進行分層，為每個圖層生成繪制清單，再将圖層分成圖塊，緊接着光栅化将圖塊轉換成位圖，最後合成繪制生成頁面。

2.說一說new會發生什麼？

`new`關鍵字會進行如下的操作：1.建立一個空對象（即`{}`）；2.為新建立的對象添加屬性`__proto__`，将該屬性連結至構造函數的原型對象；3.将新建立的對象作為`this`的上下文；4.如果該函數沒有傳回對象，則傳回`this`。`new`關鍵字後面的構造函數不能是箭頭函數。

3.說一下token能放在cookie中嗎？

能。token一般是用來判斷使用者是否登入的，它内部包含的資訊有：uid（使用者唯一的身份辨別）、time（目前時間的時間戳）、sign（簽名，token的前幾位以雜湊演算法壓縮成的一定長度的十六進制字元串）。token可以存放在Cookie中，token是否過期，一般由後端來判斷，是以token存儲在cookie中隻要不設定cookie的過期時間就可以，如果token失效，就讓後端在接口中傳回固定的狀态表示token失效，需要重新登入，再重新登入的時候，重新設定cookie中的token就行。

token認證流程：1.用戶端使用使用者名跟密碼請求登入。2. 服務端收到請求，去驗證使用者名與密碼。3.驗證成功後，服務端簽發一個token，并把它發送給用戶端。4.用戶端接收token以後會把它存儲起來，比如放在cookie裡或者localStorage裡。5.用戶端每次發送請求時都需要帶着服務端簽發的token（把token放到HTTP的Header裡）。6.服務端收到請求後，需要驗證請求裡帶有的token，如驗證成功則傳回對應的資料。

4.說一說盒模型？

CSS盒模型定義了盒的每個部分包含margin，border，padding，content。根據盒子大小的計算方式不同盒模型分成了兩種，标準盒模型和怪異盒模型。标準模型，給盒設定 width和height，實際設定的是content box。padding和border再加上設定的寬高一起決定整個盒子的大小。怪異盒模型，給盒設定width和height，包含padding和border，設定的width和height就是盒子實際的大小，預設情況下，盒模型都是标準盒模型。設定标準盒模型：`box-sizing:content-box`；設定怪異盒模型：`box-sizing:border-box`。

5.說一說元件通信的方式？

12種方式實作vue元件通信 - 簡書我們知道vue元件通信有很多種，這裡我把自己所知道12種vue元件通信總結出來 1：父子元件通信 ，（v-bind和props實作父子傳值） parent.vue child...https://www.jianshu.com/p/23b97e324b50

6.說一說 v-if 和 v-show差別？

作用：都是控制元素隐藏和顯示的指令。

差別：v-show：控制的元素無論是true還是false，都被渲染出來了，通過display：none控制元素隐藏；v-if：控制的元素是true，進行渲染，如果是false不渲染，在dom樹結構中不顯示。應用：v-show：适合使用在頻繁切換顯示/隐藏的元素上；v-if：适合使用在切換不頻繁，且元素内容很多，渲染一次性能消耗很大的元素上。