美團(tuán)-前端開發(fā)面經(jīng)（十二）

一、功能不同

1、get是從服務(wù)器上獲取數(shù)據(jù)。

2、post是向服務(wù)器傳送數(shù)據(jù)。 

二、過程不同

1、get是把參數(shù)數(shù)據(jù)隊(duì)列加到提交表單的ACTION屬性所指的URL中，值和表單內(nèi)各個(gè)字段一一對(duì)應(yīng)，在URL中可以看到。

2、post是通過HTTP post機(jī)制，將表單內(nèi)各個(gè)字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址。用戶看不到這個(gè)過程。 

三、獲取值不同

1、對(duì)于get方式，服務(wù)器端用Request.QueryString獲取變量的值。

2、對(duì)于post方式，服務(wù)器端用Request.Form獲取提交的數(shù)據(jù)。 

四、傳送數(shù)據(jù)量不同

1、get傳送的數(shù)據(jù)量較小，不能大于2KB。

2、post傳送的數(shù)據(jù)量較大，一般被默認(rèn)為不受限制。但理論上，IIS4中最大量為80KB，IIS5中為100KB。 

五、安全性不同

1、get安全性非常低。

2、post安全性較高。 

如果沒有加密，他們安全級(jí)別都是一樣的，隨便一個(gè)監(jiān)聽器都可以把所有的數(shù)據(jù)監(jiān)聽到。

document.ready和onload的區(qū)別為：加載程度不同、執(zhí)行次數(shù)不同、執(zhí)行速度不同。

一、加載程度不同

1.document.ready：在DOM加載完成后就可以可以對(duì)DOM進(jìn)行操作。一般情況一個(gè)頁面響應(yīng)加載的順序是，域名解析-加載html-加載js和css-加載圖片等其他信息。那么Dom Ready應(yīng)該在“加載js和css”和“加載圖片等其他信息”之間，就可以操作Dom了。

2.onload：在document文檔加載完成后就可以可以對(duì)DOM進(jìn)行操作，document文檔包括了加載圖片等其他信息。那么Dom Load就是在頁面響應(yīng)加載的順序中的“加載圖片等其他信息”之后，就可以操作Dom了。

二、執(zhí)行次數(shù)不同

1.document.ready：document.ready可以寫多個(gè).ready，可以執(zhí)行多次，第N次都不會(huì)被上一次覆蓋。

2.onload：onload只能執(zhí)行一次，如果有多個(gè)，那么第一次的執(zhí)行會(huì)被覆蓋。

三、執(zhí)行速度不同

1.document.ready：onload除了要等待DOM被創(chuàng)建還要等到包括大型圖片、音頻、視頻在內(nèi)的所有外部資源都完全加載。如果加載圖片和媒體內(nèi)容花費(fèi)了大量時(shí)間，用戶就會(huì)感受到定義在onload事件上的代碼在執(zhí)行時(shí)有明顯的延遲。

2.onload：document.ready函數(shù)只需對(duì) DOM 樹的等待，而無需對(duì)圖像或外部資源加載的等待，從而執(zhí)行起來更快。

1.Vue 中的 key 到底有什么用？

  1.兩個(gè)相同的組件產(chǎn)生類似的DOM結(jié)構(gòu)，不同的組件產(chǎn)生不同的DOM結(jié)構(gòu)。

  2.同一層級(jí)的一組節(jié)點(diǎn)，他們可以通過唯一的id進(jìn)行區(qū)分。

key的作用主要是為了高效的更新虛擬DOM

key 是給每一個(gè) vnode(javaScript對(duì)象) 的唯一 id,依靠 key,我們的 diff 操作可以更準(zhǔn)確、更快速 (對(duì)于簡(jiǎn)單列表頁渲染來說 diff 節(jié)點(diǎn)也更快。

diff 算法的過程中,先會(huì)進(jìn)行新舊節(jié)點(diǎn)的首尾交叉對(duì)比,當(dāng)無法匹配的時(shí)候會(huì)用新節(jié)點(diǎn)的 key 與舊節(jié)點(diǎn)進(jìn)行比對(duì),從而找到相應(yīng)舊節(jié)點(diǎn)。

更準(zhǔn)確 : 因?yàn)閹?key 就不是就地復(fù)用了,在 一些節(jié)點(diǎn)函數(shù)中 以 a.key === b.key 對(duì)比中可以避免就地復(fù)用的情況。所以會(huì)更加準(zhǔn)確,

更快速 : key 的唯一性可以被 Map 數(shù)據(jù)結(jié)構(gòu)充分利用,相比于遍歷查找的時(shí)間復(fù)雜度 O(n),Map 的時(shí)間復(fù)雜度僅僅為 O(1),

源碼如下:

    function createKeyToOldIdx(children, beginIdx, endIdx) {              let i, key;              const map = {};              for (i = beginIdx; i <= endIdx; ++i) {                  key = children[i].key;                  if (isDef(key)) map[key] = i;                }            return map;        }

2.vue中使用v-for時(shí)為什么不能用index作為key？

更新DOM的時(shí)候會(huì)出現(xiàn)性能問題

會(huì)發(fā)生一些狀態(tài)bug

React 中的 key 也是如此

1）index作為key，其實(shí)就等于不加key

2）index作為key，只適用于不依賴子組件狀態(tài)或臨時(shí) DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出（這是vue官網(wǎng)的說明）

說明：當(dāng)以數(shù)組的下標(biāo)index作為key值時(shí) 其中一個(gè)元素發(fā)生了變化 就有可能導(dǎo)致所有元素的key值發(fā)生改變 diff算法是比較同級(jí)之間的不同 以key來進(jìn)行關(guān)聯(lián) 當(dāng)對(duì)數(shù)組進(jìn)行下標(biāo)的變換時(shí)，比如刪除第一條數(shù)據(jù)，那么以后所有的Index都會(huì)發(fā)生改變，那么key自然也跟著全部發(fā)生改變， 所以index作為key值是不穩(wěn)定的，這種不穩(wěn)定性有可能導(dǎo)致性能的浪費(fèi) 導(dǎo)致diff無法關(guān)聯(lián)起上一次一樣的數(shù)據(jù) 因此 能不用Index作為key就不要用Index

手段：v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素；v-show是通過設(shè)置DOM元素的display樣式屬性控制顯隱

編譯過程：v-if切換有一個(gè)局部編譯/卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件；v-show只是簡(jiǎn)單的基于css切換

編譯條件：v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯被緩存？編譯被緩存后，然后再切換的時(shí)候進(jìn)行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素保留

性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗

使用場(chǎng)景：v-if適合運(yùn)營(yíng)條件不大可能改變；v-show適合頻繁切換

相同點(diǎn)：v-show 都可以動(dòng)態(tài)控制著dom元素的顯示隱藏

不同點(diǎn)：v-if 的顯示隱藏是將DOM元素整個(gè)添加或刪除，v-show 的顯示隱藏是為DOM元素添加css的樣式display，設(shè)置none或者是block，DOM元素是還存在的

在渲染多個(gè)元素的時(shí)候，可以把一個(gè) 元素作為包裝元素，并使用v-if 進(jìn)行條件判斷，最終的渲染不會(huì)包含這個(gè)元素，v-show是不支持 語法

Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以被設(shè)定為Flex布局，容器分為兩種塊Flex和行內(nèi)Flex。

Flex布局有兩層，采用Flex布局的元素稱為flex容器，其子元素則自動(dòng)成為flex item，即flex項(xiàng)目。

注意：設(shè)定為Flex布局之后，子元素的float，clear和vertical-align都會(huì)失效。

Flex容器屬性

容器默認(rèn)存在兩根軸：水平方向的主軸（main axis）和垂直方向的交叉軸（cross axis），主軸的開始位置叫做main start，結(jié)束位置叫做main end。交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。

容器的6個(gè)屬性：

1.flex-direction屬性

flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。

.flex-box {

  flex-direction: row | row-reverse | column | column-reverse;

}

2.flex-wrap屬性

默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下時(shí)，如何換行。

.flex-box {

  flex-wrap: nowrap | wrap | wrap-reverse;

}

3.flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。

.flex-box {

  flex-flow: <flex-direction> || <flex-wrap>;

}

4.justify-content屬性

justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。

.flex-box {

 justify-content: flex-start | flex-end | center | space-between | space-around;

}

5.align-items屬性

align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。

.flex-box {

 align-items: flex-start | flex-end | center | baseline | stretch;

}

6.align-content屬性

align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

.flex-box {

 align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}