1.前端與後端資料互動的格式有哪些，為什麼大部分現在都用json而不用xml。

答：XML：<person><name>小明</name><age>3歲</age></person>
JSON：{ name:”小明”,age:3}
JSON書寫方便節省位元組，更輕量，前後臺都有直接解析JSON的方法（JSON.stringfity/parse）使用方便。

2.Flex佈局熟悉嗎，說幾個常用的屬性。

答：這個幾乎每天都在用，還是挺熟悉的。
display：flex
align-items 多個
align-content：單個
justify-content
justify-items
flex-direction
flex-wrap：
flex-basic：初始盒子寬度 flex
flex-grow：增長因子 200 440=160 1,1,1,2 1/5

3.說一下CSS盒模型

答：CSS的盒模型包含了一下幾個內容margin,padding,border,content。
在計算盒子寬高的時候，IE和Chrome會有一些區別，IE算到border，Chrome的寬度只包含content區域，因此CSS3提供了box-sizing這個屬性來修改。

4.CSS常用選擇器，選擇器權重問題。

答：*(has，not，target，root。。。。)萬用字元， ID，class，attr屬性，element，子代（ > + ~ ）,
UI狀態偽類選擇器（hover,active,link,seceted..，checked），
結構性偽類選擇器(nth-child,fist-child,last,nth-of-type...before,after....)

  !important > style > id > class > elemnet > 偽類和屬性

5.請用5種方式實現元素垂直居中。

答：1、flex

2、Tranform

3、定位+margin負值（知道子節點寬高）

4、定位+margin:auto

5、JS動態計算top、left值

6.什麼是BFC？垂直margin重疊是為什麼？怎麼解決這個問題？

答：概念：BFC全稱Block Formatting Context ，中文意思為塊級格式上下文。
通俗的來說：BFC是一個獨立的佈局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子內部的元素無論如何翻江倒海，都不會影響到外部。轉換為BFC的理解則是：BFC中的元素的佈局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。比如清除浮動）並且在一個BFC中，塊元素與行元素都會垂直的沿著其父元素的邊框排列。

如何觸發 BFC

1.浮動元素，float 除 none 以外的值
2.position的值不為static或者relative
3.display不為none
4.overflow 除了 visible 以外的值

BFC的應用

1.解決浮動塌陷問題
2.自適應兩欄佈局（我們還可以運用BFC可以阻止元素被浮動元素覆蓋的特性來實現自適應兩欄佈局。方法：給沒有浮動的元素加overflow：hidden。）
3.解決設定margin值重疊問題。

總結：BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。它規定了元素與其他元素的關係和相互作用。

7.什麼是浮動，有什麼作用，有何副作用，以及如何清除浮動？

答：浮動是使用給節點新增float屬性，最初的設計是用來實現文字環繞的。
添加了float的節點脫離文件流，同時觸發節點的BFC，讓節點往一個方向靠，並排成一行。
當一個父節點的子節點全部浮動，就會造成父節點高度塌陷，
解決的辦法首先是可以給父節點主動新增高度值，再者利用只要有一個子節點不浮動原理來新增一個不浮動的節點（通常使用偽元素before，after），再者還可以觸發父節點的bfc，常用的定位，或者overflow：hidden。

8.CSS裡面有哪些相對單位？都是相對什麼的？

答：REM,EM,VW,VH等
REM：相對於根節點html的font-size
EM：父節點的font-size
VW：視口的寬度為 100VW，相對於把視口分為100份。
VH：視口高度為100VH，同理

以上單位都可以在移動端做頁面適配，但通常使用REM和VW

9.fixed是相對於誰定位的？如果加上transform會出現問題嗎？

答：fixed定位相對於瀏覽器視口來定位的
新增上transform以後，fixed定位會失效（現在這個bug已經不存在啦！
）。如果fixed元素的祖先有transform屬性,則fixed元素會相對與這個祖先計算,而不是視口（問題還在）。

10.為什麼不推薦用style內聯元素？內聯元素有什麼缺點？（css檔案可以快取）

答：首先是style是節點的屬性，不能被快取；程式碼的可讀性和可維護性相對弱一些，特別是多人協作開發的時候。但是如果一個頁面的style樣式足夠少的時候，可以使用style元素，因為一次請求最多攜帶14K的資料，如果足夠小，還可以節約一次請求。

11.簡單描述http或https協議，以及為什麼要三次握手？什麼是長連結

答：http（https）是超文字傳輸協議，基於TCP請求與相應的模式，無狀態的，是目前主流的web傳輸協議。一般包含請求頭，請求體，響應頭等
目前http協議已經發展到2.0階段，支援長連結Connection:keep-alive，斷點續傳，cache 快取策略，多路複用，伺服器推送等。
https相對於http更安全，增加了證書SSL加密，埠是433。

三次握手其實就是三次網路連線，客戶端攜帶SYN=1,Seq = x資訊給服務端，服務端接受到後，服務端就知道了，有一個客戶端要連結我，然後伺服器就會開啟一個TCP socket的埠，然後返回資料給前端也是SYN=1,SEQ=Y,ACK = x+1，客戶端接受到後，在發一個seq，和ACK+1.主要是為了防止開啟無用的連結，或者網路延遲丟包，伺服器無法確定到底客戶端有沒有收到訊息

在使用長連線的情況下，當一個網頁開啟完成後，客戶端和伺服器之間用於傳輸HTTP資料的TCP連線不會關閉，客戶端再次訪問這個伺服器時，會繼續使用這一條已經建立的連線。
Keep-Alive不會永久保持連線，它有一個保持時間，可以在不同的伺服器軟體（如Apache）中設定這個時間。實現長連線需要客戶端和服務端都支援長連線。
為何需要長連結?長連線可以省去較多的TCP建立和關閉的操作，減少浪費，節約時間。

12.http常見狀態碼有哪些？301和302的區別是什麼？304是指什麼？

答： 404：找不到資源；
500：伺服器內部錯誤；
200：請求成功，並返回資料；
301：永久重定向；
302：臨時移動，可使用原有URI；
304：資源未修改，可使用快取；
400：請求語法錯誤（一般為引數錯誤）；
403：沒有許可權訪問。。。等

13.瀏覽器頁面渲染的流程是什麼（輸入url後頁面發生什麼）？

答： 首先dns解析IP，建立tcp連結下載資源，構建dom樹，當遇到link標籤，會下載並執行解析css（不會阻止dom樹的構建）當遇到script標籤的是，dom樹構建會暫停，下載並執行完js才會繼續（defer（下載延遲執行），async（非同步下載並執行）） 然後再佈局和繪製（layout,paint）最後在 render

14.什麼是reflow與repain？哪些操作會觸發reflow，如何避免

答：reflow：迴流，當元素的尺寸、DOM結構發生改變時，瀏覽器會重新渲染頁面，稱為迴流。
repain：重繪，當元素的樣式（佈局不發生，color，opacity，visibility）發生改變的時候。

   以下常見操作都會觸發：

瀏覽器視窗大小改變
元素尺寸、位置、內容發生改變
元素字型大小變化
新增或者刪除可見的 dom 元素
啟用 CSS 偽類（例如：:hover）等

通過class的方式集中改樣式，documentFragment快取節點，避免使用table、calc，做動畫的節點脫離文件流（新建立圖層）。總結：減少DOM操作！

15.HTML5常用的特性（API）有哪些？你用過哪些？

答：語義化標籤(header,nav等)，video、audio，獲取dom的方式（queryselector），websocket
Canvas，svg，requestAnimationFrame，Geolocation，stroage ，notification，file API，Orientation API用於檢測手機的擺放方向等

16.請列舉出幾個常見的瀏覽器相容性問題？

答：現在市面上IE678基本已經停止使用了，所以儘量不要說這方面的相容性。
有些瀏覽器支援的，有些呢 不支援；或者是支援的方式不一致。
1、不同瀏覽器的預設margin和padding不一致
2、圖片的預設間距不一致
3、獲取視口的寬高window.innerheight/width
4、CSS3的動畫，過渡，漸變，flex也有，grid
5、Canvas，SVG
6、IE9以下不能的opacity，使用filter: alpha(opacity = 50);
7、event.offsetX/Y
8、繫結事件IE9才支援（addEventListener）

17.什麼是瀏覽器快取（知道什麼是強快取和協商快取）？

答：當瀏覽器訪問過後的資源，會被瀏覽器快取的本地，當下次在訪問頁面的時候，如果沒有過期，直接讀取快取，加快瀏覽器的載入效率。

http快取機制：1、Expires：通過設定最大快取時間，當時間超過了就去伺服器下載，
2、http1.1，cache-control：max-age = time ，當time過期後，檢測etag 帶上etag往伺服器發請求，如果etag沒變，直接告訴瀏覽器讀本地快取，如果沒有etag 就會 檢測 Last-Modified，判斷 如果 上一次更改的時候，距離本次訪問時間比較久，說明檔案沒有發生改變，返回304。

強快取就是當前訪問時間還在設定的最大時間範圍內。
協商快取就是時間過了，通過檢查etag或者last-modifed來使用快取的機制。

18.說一下瀏覽器垃圾回收機制

答： 老：標記清除演算法，GC會檢測當前物件有沒有被變數所引用，如果沒有就回收。
新： Scavenge ，把記憶體空間分為兩部分，分別為 From 空間和 To 空間。當一個空間滿了以後，會把空間中活動物件轉移到另外一個空間，這樣互換。

19.什麼是事件委託

答：事件委託本質上是利用了瀏覽器事件冒泡的機制。因為事件在冒泡過程中會上傳到父節點，並且父節點可以通過事件物件獲取到目標節點，因此可以把子節點的監聽函式定義在父節點上，由父節點的監聽函式統一處理多個子元素的事件，這種方式稱為事件代理。使用事件代理我們可以不必要為每一個子元素都繫結一個監聽事件，這樣減少了記憶體上的消耗，也是常見的JS效能優化的一個點。

20.什麼是響應式佈局？如何實現

答：書寫一套CSS樣式適配PC和移動端，讓PC和移動端都能正常的瀏覽器頁面。
使用mate 控制viewport，再配合media query 的 screen 來設定斷點樣式。
注意：做相應式 不能使用固定單位，要使用max-width、min-width等能自動縮放的單位。