這章主要是總結一下我在春招面試中遇到的一些常考的基礎知識點。本篇主要總結一些前端基礎和理論相關問題。
下面引用一張牛客網的前端面試考點圖，其中JS問的問題比較多，在我春招面試中的時候基本上5成問題都是關于js的。是以js我會将其放到專門一個系列中總結。
一、盒子模型
标準盒子模型：width = content;
怪異盒子模型(IE):width = content + padding + border;
如何設定這兩種模型：
box-sizing:content-box; /*标準模型*/
box-sizing:border-box; /*怪異模型*/ 二、浏覽器核心
| 浏覽器 | 核心 |
| IE、百度浏覽器 | Trident核心、俗稱IE核心 |
| Chrome浏覽器 | 以前是Webkit核心、現在是Blink核心 |
| Safari浏覽器 | Webkit核心 |
| Opera浏覽器 | 最初是Presto、後來是Webkit、現在是Blink核心 |
| 360浏覽器、獵豹浏覽器 | IE+Chrome雙核心 |
| 搜狗、遨遊、QQ浏覽器 | Trident(相容模式)+Webkit(高速模式) |
| Firefox浏覽器 | Gecko核心 |
css3對不同核心浏覽器舊版本的相容性支援
webkit核心: -webkit- Gecko核心: -moz- Presto核心: -o- Trident核心: -ms-
三、MVC和MVVM
MVC（Model-View-Controller）
MVC是比較直覺的架構模式，使用者操作->View(負責接受使用者的輸入操作)->Controller(業務邏輯處理)->Model(資料持久化)->View(将結果回報給View)
MVVM（Model-View-ViewModel）
MVVM是在MVC上進一步改進，它将“資料模型資料雙向綁定”的思想作為核心，Model和ViewModel之間的互動是雙向的，視圖資料的變化會同時修改資料源，二資料源資料的變化也會立即反應view。
總的來說MVVM比MVC精簡很多，一定程度上簡化了界面與業務的依賴性，也解決了資料的頻繁更新問題。
四、資料交換格式
XML：可擴充标記語言。
優點：1.格式統一、符合标準
2.容易與其他系統進行遠端互動，資料共享比較友善
缺點：1.XML檔案龐大、檔案格式複雜、傳輸占帶寬
2.伺服器端和用戶端都需要花費大量代碼來解析XML，導緻伺服器端和用戶端代碼變得異常複雜不易維護
3.用戶端不同浏覽器之間解析XML的方式不一緻，需要重複編寫很多代碼
JSON：輕量級的文本資料交換格式
優點：1.資料格式比較簡單，易于讀寫，格式都是壓縮的，占用帶寬小；
2.易于解析，用戶端可以通過簡單的eval_r()進行JSON格式的讀取；
3.支援多種語言解析
4.簡化代碼開發量且易于維護
缺點：1.沒有XML通用性強
2.json片段的建立和驗證過程比一般XML稍顯複雜。
五、Content-Type類型
常見的媒體格式類型：
text/html：HTML格式
text/plain：純文字格式
text/xml：XML格式
image/jpeg：jpg圖檔格式
image/pmg：png圖檔格式
以application開頭的媒體格式類型：
application/xhtml+xml：XHTML格式
application/xml：XML資料格式
application/atom+xml：Atom XML聚合格式
application/json：JSON資料格式
application/pdf：pdf格式
application/msword：Word文檔格式
application/octet-stream：二進制流資料
application/x-www-form-urlencoded：表單預設送出資料格式（以key/value格式發送）
媒體上傳檔案格式
multipart/form-data：表單中檔案上傳格式
五、垂直水準居中方法
1.寬度和高度已知：直接計算
2.寬度和高度未知：
position:absolute; left:0; right:0; top:0;bottom:0;margin:auto;
3.利用flex布局：
父元素: display:flex; justify-content:center;align-items:center;
4.平移 定位+transform：
position:absolute; top:50%; left:50%;transform:translate(-50%,-50%);
5.table-cell布局
父元素: display:table-cell; vertical-align:middle; 子元素:margin:0 auto;
(table-cell中不要與float:left; position:absolute;一起使用，其對元素高度寬度敏感，不要使用百分比);
六、頁面從輸入URL到展現頁面過程。
1.浏覽器位址欄輸入URL并按下回車
2.浏覽器查找目前URL是否存在緩存，并比較緩存是否過期
3.DNS解析URL對應的IP。
4.根據IP和伺服器建立TCP連接配接。（三次握手）
5.HTTP發起請求。
6.伺服器處理請求并傳回封包，浏覽器接受HTTP響應。
7.渲染頁面，建構DOM樹。
8.關閉TCP連接配接。（四次揮手）
注：HTTPS在傳輸資料之前需要用戶端與伺服器進行握手（TLS/SSL握手）,在握手過程中将确立雙方加密傳輸資料的密碼資訊。
七、适配移動端頁面meta設定
<meta name="viewport" content="width=device-width,user-scalable=no,initail-scale=1.0,maxinum-scale=1.0,mininim-scale=1.0"> 注釋：
width=device-width 寬度=裝置寬度
user-scalable=no 使用者縮放=不允許
initail-scale=1.0 初始化比例=1
maxinum-scale=1.0 最大比例=1
mininum-scale=1.0 最小比例=1
八、type=hidden隐藏域有什麼作用
1.隐藏域對使用者是不可見的，在表單中插入隐藏域的目的在于收集或發送資訊，利于處理和發送表單中的資訊。
2.可以用于驗證發送方身份，防止csrf攻擊。
3.一個form中有多個送出按鈕，可以用來區分哪個送出按鈕送出上來的。
4.頁面中有多個form，可以在form中添加隐藏域來是他們聯系起來。
九、link和@import的差別
差別一：link是XHTML标簽，除了加載css，還可以定義rss等其他事物；@import屬于css提供的方式，隻能加載css。
差別二：link引用CSS時，在頁面載入時同時加載；@import需要在頁面載入後才加載。
差別三：link是XHTML标簽，無相容問題；@import是在css2.1提出，低版本浏覽器不支援
差別四：link支援使用javascript課控制DOM去改變樣式，二@import不支援。
十、src和href的差別
src指向外部資源的位置，指向的内容回嵌入到文檔中目前位置，請求時，豈會将資源下載下傳并應用到文檔中，并且下載下傳中會展廳其他資源的下載下傳和處理。（js、img、iframe等元素）
href指向網絡資源所在位置，建立于目前元素（錨點）或目前文檔（連結）之間的連結，并行下載下傳資源并不會停止對目前文檔的處理。
十一、TCP三向交握過程
第一次握手：用戶端發送syn包（seq=x）到伺服器，并進入SYN_SEND狀态，等待伺服器确認。
第二次握手：伺服器受到syn包，必須确認客戶的SYN（ack=x+1），同時自己也要發送一個SYN包（seq=y），既SYN+ACK包，此時伺服器進入SYN_RECE狀态；
第三次握手：用戶端收到伺服器的SYN+ACK包，向伺服器發送确認包ACK（ack=y+1），此包發送完畢，用戶端和用戶端進入ESTABLISHED狀态，完成三次握手。
十二、TCP四次揮手過程
第一次揮手：主動關閉方發送一個FIN，用來關閉主動方到被動方的資料傳送，也就是主動關閉方告訴被動關閉方：我已經不會再發資料了（當然，在fin包之前發送出去的資料，如果沒有收到對應的ack确認封包，主動關閉方依然會重發這些資料），但此時主動關閉方還可以接受資料。
第二次揮手：被動關閉方收到FIN包後，發送一個ACK給對方，确認序号為收到序号+1（與SYN相同，一個FIN占用一個序号）。
第三次揮手：被動關閉方發送一個FIN，用來關閉被動關閉方到主動關閉方的資料傳送，也就是告訴主動關閉方，我的資料也發送完了，不會再給你資料了。
第四次揮手：主動關閉方收到FIN後，發送一個ACK給被動關閉方，确認序号為收到序号+1，至此，完成四次揮手。
十三、304狀态碼的了解
304狀态碼：告訴浏覽器可以從緩存中擷取請求的資源。
詳解：
用戶端在請求一個檔案的時候，發現自己緩存的檔案有Last Modified，那麼在請求中會包含If Modified Since，這個時間就是緩存檔案的Last Modified。是以，如果請求中包含If Modified Since，就說明已經有緩存在用戶端。服務端隻要判斷這個時間和目前請求的檔案的修改時間就可以确定是傳回304還是200狀态碼。
靜态檔案伺服器回自動完成Last Modified和If Modified Since的比較，完成緩存或者更新。但對于動态頁面，往往沒有包含Last Modified資訊，這樣浏覽器、網關等都會做緩存，也就是每次請求的時候都是完成一個200的請求。
十四、HTTP2.0和HTTP1.0的差別
HTTP2.0主要目标是改進傳輸性能，更有效利用網絡資源，實作低延遲和高吞吐量。
特點：
1.二進制分幀： HTTP2.0的所有幀都是采用二進制編碼。
2.多路複用： 允許同時通過單一的HTTP2.0連接配接發起多重的請求-響應資訊。
3.header壓縮： HTTP2.0使用encoder來減少需要傳輸的header大小。
4.服務端推送： 服務端可以對一個用戶端發送響應，推送資源無需用戶端明确請求，但遵守同源政策和請求-響應的循環，隻能接請求的響應推送。
詳細參考：https://blog.csdn.net/g6U8W7p06dCO99fQ3/article/details/78906348
十五、DOM和BOM的差別
DOM：Document Object Model 文檔對象模型
DOM是為了操作文檔出現的API，document是其的一個對象
DOM和文檔有關，這裡的文檔指的是網頁，也就是html文檔。DOM和浏覽器無關，他關注的是網頁本身的内容。
BOM：Browser Object Model 浏覽器對象模型
BOM是為了操作浏覽器出現API，window是其的一個對象
window對象既為javascript通路浏覽器提供API，同時在ECMAScript中充當Global對象