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種方式實作元素垂直居中，
答：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等能自動縮放的單位，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/251552.html
標籤：Html/Css
上一篇：靜態頁面布局方法分享