摘要：安全性請(qǐng)求可被緩存，請(qǐng)求保存在瀏覽器歷史記錄中則不能被緩存。與相比，的安全性較差，因?yàn)榘l(fā)送的數(shù)據(jù)是的一部分。

使用flex布局： 父元素設(shè)置display: flex，左右兩邊設(shè)置固定寬度，中間設(shè)置flex-grow: 1；
使用浮動(dòng)布局：左右兩邊設(shè)置固定寬度，而且分別設(shè)置float:left和right，這個(gè)方法有一個(gè)需要注意的是在HTML中，中間欄需要和右邊欄進(jìn)行對(duì)調(diào)；
使用絕對(duì)定位布局：左右兩邊設(shè)置固定寬度和position:absolute,而且分別設(shè)置left: 0和right: 0，中間欄只要設(shè)置左右margin為左右欄的寬度就可以了（需要注意的是左右兩邊需要設(shè)置 top: 0，不然右邊會(huì)被頂下來）

補(bǔ)充

其實(shí)還有表格布局，網(wǎng)格布局和圣杯布局，詳細(xì)請(qǐng)看三欄布局的5種解決方案及優(yōu)缺點(diǎn)

position元素已知寬度:

.dialog{
    position: relative;
    width: 500px;
    height: 500px;
    background: goldenrod
}
.dialog-content{
    width: 200px;
    height: 200px;
    background: rebeccapurple;
    position: absolute;
    top: 50%;
    left: 50%;
    margin:-100px 0 0 -100px;
}

transform 元素未知寬度

.dialog{
    position: relative;
    width: 500px;
    height: 500px;
    background: goldenrod
}
.dialog-content{
    width: 200px;
    height: 200px;
    background: rebeccapurple;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

flex布局

.dialog {
    width: 500px;
    height: 500px;
    background: goldenrod;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialog-content {
    width: 200px;
    height: 200px;
    background: rebeccapurple;
}

===為恒等符：當(dāng)?shù)忍?hào)兩邊的值為相同類型的時(shí)候，直接比較等號(hào)兩邊的值，值相同則返回true，若等號(hào)兩邊的值類型不同時(shí)直接返回false。
==為等值符： 當(dāng)?shù)忍?hào)兩邊的值為相同類型時(shí)比較值是否相同，類型不同時(shí)會(huì)發(fā)生類型的自動(dòng)轉(zhuǎn)換，轉(zhuǎn)換為相同的類型后再作比較。
a、如果一個(gè)是null、一個(gè)是undefined，那么[相等]。
b、如果一個(gè)是字符串，一個(gè)是數(shù)值，把字符串轉(zhuǎn)換成數(shù)值再進(jìn)行比較。
c、如果任一值是 true，把它轉(zhuǎn)換成 1 再比較；如果任一值是 false，把它轉(zhuǎn)換成 0 再比較。
d、如果一個(gè)是對(duì)象，另一個(gè)是數(shù)值或字符串，把對(duì)象轉(zhuǎn)換成基礎(chǔ)類型的值再比較。對(duì)象轉(zhuǎn)換成基礎(chǔ)類型，利用它的toString或者valueOf方法。 js核心內(nèi)置類，會(huì)嘗試valueOf先于toString；例外的是Date，Date利用的是toString轉(zhuǎn)換。非js核心的對(duì)象，令說（比較麻 煩，我也不大懂）
e、任何其他組合，都[不相等]。

30為數(shù)值類型，而"30"未字符串類型，因此等號(hào)兩邊的數(shù)據(jù)類型不相等，需要進(jìn)行轉(zhuǎn)換類型；
由于一個(gè)是數(shù)值，另一個(gè)字符串，所以需要將字符串轉(zhuǎn)換成數(shù)值再進(jìn)行比較，即"30"  => 30;
這時(shí)等號(hào)兩邊同樣為數(shù)值型數(shù)據(jù)，即30 == 30，所以返回true

for (var i=0; i<5; i++) {
 setTimeout( function timer() {
 console.log(i);
 }, 0 );
}

回答： 直接輸出 5 5 5 5 5

首先這里涉及到setTimeout的執(zhí)行順序，頁面中所有由setTimeout定義的操作，都將放在同一個(gè)隊(duì)列中(這里涉及到兩種，微任務(wù)隊(duì)列和宏任務(wù)隊(duì)列，剛好下面問Promise的時(shí)候就問到了)依次執(zhí)行。

這個(gè)隊(duì)列執(zhí)行的時(shí)間，需要等待到函數(shù)調(diào)用棧清空之后才開始執(zhí)行。即所有可執(zhí)行代碼執(zhí)行完畢之后，才會(huì)開始執(zhí)行由setTimeout定義的操作。而這些操作進(jìn)入隊(duì)列的順序，則由設(shè)定的延遲時(shí)間來決定。
根據(jù)setTimeout定義的操作在函數(shù)調(diào)用棧清空之后才會(huì)執(zhí)行的特點(diǎn)，for循環(huán)里定義了5個(gè)setTimeout操作，這些setTimeout操作是在循環(huán)執(zhí)行完成后才開始執(zhí)行，這個(gè)時(shí)候i = 5，因?yàn)槊總€(gè)setTimeout操作的延遲時(shí)間一樣，所以按順序輸出 5 5 5 5 5 

修改this指向的辦法有三種：apply、call和bind
apply、call：通過傳入需要指向的對(duì)象，從而改變this的指向，指向傳入的第一個(gè)參數(shù);
bind：它會(huì)創(chuàng)建一個(gè)函數(shù)的實(shí)例，其this值會(huì)被綁定到傳給bind()函數(shù)的值。

window.color = "red";
var o = { color:"blue" };
function sayColor(){
    console.log(this.color);
}
var globalSaycolor = sayColor;
var objectSaycolor = sayColor.bind(o);
globalSaycolor();  // red
objectSaycolor();  // blue

補(bǔ)充

其實(shí)還有一種：new關(guān)鍵字改變this指向
因?yàn)樵?b>new的過程中，其中有一個(gè)步驟為將構(gòu)造函數(shù)內(nèi)部的this指向?qū)嵗龑?duì)象，所以通過new關(guān)鍵字也可以改變this的指向。

相同點(diǎn)：可以用來代替另一個(gè)對(duì)象調(diào)用一個(gè)方法，將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛蓆hisObj指定的新對(duì)象。
不同點(diǎn)：實(shí)際上，apply和call的功能是一樣的，只是傳入的參數(shù)列表形式不同。
apply：最多只能有兩個(gè)參數(shù)——新this對(duì)象和一個(gè)數(shù)組argArray。如果給該方法傳遞多個(gè)參數(shù)，則把參數(shù)都寫進(jìn)這個(gè)數(shù)組里面，當(dāng)然，即使只有一個(gè)參數(shù)，也要寫進(jìn)數(shù)組里。如果argArray不是一個(gè)有效的數(shù)組或arguments對(duì)象，那么將導(dǎo)致一個(gè)TypeError。如果沒有提供argArray和thisObj任何一個(gè)參數(shù)，那么Global對(duì)象將被用作thisObj，并且無法被傳遞任何參數(shù)。
call：它可以接受多個(gè)參數(shù)，第一個(gè)參數(shù)與apply一樣，后面則是一串參數(shù)列表。這個(gè)方法主要用在js對(duì)象各方法相互調(diào)用的時(shí)候，使當(dāng)前this實(shí)例指針保持一致，或者在特殊情況下需要改變this指針。如果沒有提供thisObj參數(shù)，那么 Global 對(duì)象被用作thisObj。

由于按鈕是異步生成的，所以我選擇將事件綁定在按鈕生成的父元素上，通過事件委托的機(jī)制，利用事件冒泡，把事件綁定在父元素上，可以通過判斷event.target按鈕是否已經(jīng)生成，從而實(shí)現(xiàn)相應(yīng)的事件。
科普補(bǔ)充：
事件冒泡可以形象地比喻為把一顆石頭投入水中，泡泡會(huì)一直從水底冒出水面。也就是說，事件會(huì)從最內(nèi)層的元素開始發(fā)生，一直向上傳播，直到document對(duì)象；
事件捕獲則跟事件冒泡相反，事件會(huì)從document對(duì)象開始發(fā)生，直到最具體的元素；

我處理過的跨域有兩種情況：

一種是在頁面中嵌入了一個(gè)iframe，因此父子iframe間產(chǎn)生了跨域，要解決這個(gè)問題，只需要把document.domain設(shè)置成相同的值就可以在兩個(gè)頁面里進(jìn)行相應(yīng)的操作了；
另外一種情況是用Vue開發(fā)涉及到的跨域問題，這個(gè)問題只需要修改config文件夾下的index.js中的dev:{}部分中修改proxyTable參數(shù)即可，相當(dāng)于對(duì)跨域的url進(jìn)行了代理，從而可以順利訪問。

另外說了一下自己比較熟悉的一種跨域解決方案：JSONP
JSONP解決跨域問題的本質(zhì)其實(shí)就是

共同點(diǎn)： 都是從客戶端緩存中讀取資源
不同點(diǎn)： 強(qiáng)緩存不會(huì)發(fā)送請(qǐng)求；協(xié)商緩存會(huì)發(fā)請(qǐng)求。

Promise 有三個(gè)狀態(tài)Pending、Fulfilled和Rejected，只能從Pending轉(zhuǎn)換為Fulfilled，和Pending轉(zhuǎn)換為Rejected，狀態(tài)一旦改變就不能再次變化。

如果Promise和setTimeout同時(shí)存在的話，一般是先執(zhí)行Promise之后再執(zhí)行setTimeout。因?yàn)檫@里涉及到微任務(wù)隊(duì)列(Microtasks)和宏任務(wù)隊(duì)列(Macrotasks)。
microtasks queue中的內(nèi)容經(jīng)常是為了需要直接在當(dāng)前腳本執(zhí)行完后立即發(fā)生的事，所以當(dāng)同步執(zhí)行完之后就調(diào)用隊(duì)列中的內(nèi)容，然后把異步隊(duì)列中的setTimeout放入執(zhí)行棧中執(zhí)行。

理解 JavaScript 中的 macrotask 和 microtask
Tasks, microtasks, queues and schedules

首先可以在beforecreate中添加一個(gè)loading，然后在created中結(jié)束這個(gè)loading，還做一些初始化，實(shí)現(xiàn)函數(shù)自執(zhí)行；
可以在mounted中向后臺(tái)請(qǐng)求數(shù)據(jù)，進(jìn)行頁面的渲染；
可以update中對(duì)data中的數(shù)據(jù)進(jìn)行檢測(cè)，實(shí)現(xiàn)對(duì)頁面的修改。

如果把數(shù)據(jù)獲取放在created中，如果數(shù)據(jù)量很大，會(huì)出現(xiàn)頁面加載緩慢的結(jié)果……
這兩個(gè)問題回答的不是非常的好，希望有人可以幫忙解答一下嗎？

經(jīng)典問題，具體參考剖析Vue原理&實(shí)現(xiàn)雙向綁定MVVM

重繪：當(dāng)元素的一部分屬性發(fā)生變化，如外觀背景色不會(huì)引起布局變化而需要重新渲染的過程；
回流： 當(dāng)render樹中的一部分或者全部因?yàn)榇笮∵吘嗟葐栴}發(fā)生改變而需要重建的過程；
回流一定會(huì)發(fā)生重繪，重繪不一定引發(fā)回流。

瀏覽器解析HTML文件構(gòu)建DOM樹；
解析CSS文件構(gòu)建Style Rules；
兩者合并生成Render Tree；
Layout 根據(jù)Render Tree計(jì)算每個(gè)節(jié)點(diǎn)的信息；
Painting 根據(jù)計(jì)算好的信息繪制整個(gè)頁面；

P.S 當(dāng)文檔加載過程中遇到JS文件，HTML文檔會(huì)掛起渲染過程，不僅要等到文檔中JS文件加載完畢還要等待解析執(zhí)行完畢，才會(huì)繼續(xù)HTML的渲染過程

一. CSS中避免回流

二. JS操作避免回流

在面完第一面之后，本來以為終于結(jié)束了，沒想到迎來的是第二技術(shù)面，后面面試官介紹說其實(shí)本來是應(yīng)該兩個(gè)人同時(shí)面我的，因?yàn)橛幸粋€(gè)面試官?zèng)]空，所以就錯(cuò)開了，就有了"二面"了，其實(shí)本質(zhì)上還是一面而已。

1XX系列：指定客戶端應(yīng)相應(yīng)的某些動(dòng)作，代表請(qǐng)求已被接受，需要繼續(xù)處理;
2XX系列：代表請(qǐng)求已成功被服務(wù)器接收、理解、并接受;
3XX系列：代表需要客戶端采取進(jìn)一步的操作才能完成請(qǐng)求，這些狀態(tài)碼用來重定向，后續(xù)的請(qǐng)求地址（重定向目標(biāo)）在本次響應(yīng)的 Location 域中指明;
301：被請(qǐng)求的資源已永久移動(dòng)到新位置;
302：請(qǐng)求的資源臨時(shí)從不同的URI響應(yīng)請(qǐng)求，但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請(qǐng)求;
 304：資源找到但是不符合請(qǐng)求條件，不會(huì)返回任何主體（用于協(xié)商緩存，表示瀏覽器緩存資源未改變，仍然可用）；
4XX系列：表示請(qǐng)求錯(cuò)誤。代表了客戶端看起來可能發(fā)生了錯(cuò)誤，妨礙了服務(wù)器的處理。
5xx系列：代表了服務(wù)器在處理請(qǐng)求的過程中有錯(cuò)誤或者異常狀態(tài)發(fā)生，也有可能是服務(wù)器意識(shí)到以當(dāng)前的軟硬件資源無法完成對(duì)請(qǐng)求的處理。

兩者的區(qū)別主要是最后的 *和+,
+ 出現(xiàn)一次或多次（至少出現(xiàn)一次），等價(jià)于{1, }
* 出現(xiàn)零次或多次（任意次），等價(jià)于{0, }
最后再借助正則可視化對(duì)比就很明顯了

visibility:hidden：所占據(jù)的空間位置仍然存在，僅為視覺上的完全透明；
visibility:hidden變化不會(huì)觸發(fā)reflow。
display:none ： 不為被隱藏的對(duì)象保留其物理空間。
display:none變化時(shí)將觸發(fā)reflow;

CSS魔法堂：display:none與visibility:hidden的恩怨情仇

可參考一面的第一和第二個(gè)問題。

li{
    display: inline-block;
    background: red;
    width: 300px;
    height: 100px;
}

    

      
1
      
2
      
3
      
4
     

瀏覽器會(huì)把inline元素間的空白字符（空格、換行、Tab等）渲染成一個(gè)空格。而為了美觀。我們通常是一個(gè)
放在一行，這導(dǎo)致
換行后產(chǎn)生換行字符，它變成一個(gè)空格，占用了一個(gè)字符的寬度。
解決：
方法一：為
設(shè)置float: left。不足：有些容器是不能設(shè)置浮動(dòng)，如左右切換的焦點(diǎn)圖等。
方法二：將所有
寫在同一行。不足：代碼不美觀。
方法三：將
內(nèi)的字符尺寸直接設(shè)為0，即font-size: 0。不足：
中的其他字符尺寸也被設(shè)為0，需要額外重新設(shè)定其他字符尺寸，且在Safari瀏覽器依然會(huì)出現(xiàn)空白間隔。
方法四：消除
的字符間隔letter-spacing: -8px，而這也設(shè)置了
內(nèi)的字符間隔，因此需要將
內(nèi)的字符間隔設(shè)為默認(rèn)letter-spacing: normal。

有多種方法解決

使用一個(gè)空的 Vue 實(shí)例作為中央事件總線
使用Vuex
使用localStorage和SessionStorage