前端面試題 HTML（一）

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/540 flex
flex-shrink :縮減因子 200 60*4=240

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種方式實現元素垂直居中。

答：一、flex

二、Tranform

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

四、定位+margin:auto

五、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基本已經中止使用了，因此儘可能不要說這方面的兼容性。
有些瀏覽器支持的，有些呢 不支持；或者是支持的方式不一致。
一、不一樣瀏覽器的默認margin和padding不一致
二、圖片的默認間距不一致
三、獲取視口的寬高window.innerheight/width
四、CSS3的動畫，過渡，漸變，flex也有，grid
五、Canvas，SVG
六、IE9如下不能的opacity，使用filter: alpha(opacity = 50);
七、event.offsetX/Y
八、綁定事件IE9才支持（addEventListener）

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

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

http緩存機制：一、Expires：經過設置最大緩存時間，當時間超過了就去服務器下載，
二、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等能自動縮放的單位。