一，面試基礎 HTML和CSS ps：這倆面試答不上來的，基本就可以回去了，以下是HTML題，一般來說這地方不會出太多題，面試官也不願意花太多時間在這上面。 1，HTML語義化，如何理解語義化？ 讓人更容易懂（增加代碼的可讀性） 讓搜索引擎更容易懂，有利於爬蟲抓取 在沒有css的情況下，頁面也能更好 ...
一，面試基礎 HTML和CSS
ps：這倆面試答不上來的，基本就可以回去了，以下是HTML題，一般來說這地方不會出太多題，面試官也不願意花太多時間在這上面。
1，HTML語義化，如何理解語義化？
讓人更容易懂（增加代碼的可讀性）
讓搜索引擎更容易懂，有利於爬蟲抓取
在沒有css的情況下，頁面也能更好的展現出其內容結構，代碼·結構
2，script 標簽中 defer 和 async 的區別？
script：會阻礙HTML解析，只有下載好並執行完腳本才會繼續解析HTML
async：解析HTML的過程中會非同步下載腳本，下載成功後立即執行，可能會阻斷HTML的解析
defer：完全不會阻斷HTML解析，解析完成之後在按順序執行腳本
圖解 script 標簽中的 async 和 defer 屬性
3，從瀏覽器地址欄輸入 url 到請求返回發生了什麼
3.1，輸入url之後，會解析出主機，埠，路徑，協議等信息，構造一個HTTP請求
3.2，DNS功能變數名稱解析
3.3，TCP鏈接，http請求
3.4，伺服器處理請求並返回HTTP報文
3.5，瀏覽器渲染（HTML解析，css解析，js解析，render樹）
從上到下依次閱讀
4，HTTP和HTTPS的區別
http：
-
-
- 不安全
- 協議對客戶端沒有狀態存儲【沒有狀態】
- 每次請求需要TCP三次握手四次揮手，和伺服器重新建立連接【沒有連接】
- 基本的特性，由客戶端發起請求，服務端響應
- 簡單快速、靈活
- 使用明文、請求和響應不進行確認
-
https：
-
-
- 安全
- HTTP安全版本，通過SSL或TLS提供加密處理數據、驗證對方身份以及數據完整性保護
- 採用混合加密技術，傳輸過程無法直接查看明文內容【傳輸加密】
- 通過證書認證客戶端訪問的是自己的伺服器【身份認證】
- 傳輸過程防止被篡改【數據完整】
-
ps：以下是css的面試題，打不出來的話可能會有非常不好的印象
5，css盒子模型的介紹
css3中盒子模型有兩種，一種是W3C標準盒子模型，一種是IE盒子模型
兩種盒子模型都是由content，margin，padding，border構成，其大小都是由content，padding，border決定的，但是盒子內容卻有所不同：
-
-
- 標準盒模型：只包含
content。 - IE（替代）盒模型：
content + padding + border。
- 標準盒模型：只包含
-
可以通過 box-sizing 來改變元素的盒模型：
-
-
box-sizing: content-box：標準盒模型（預設值）。box-sizing: border-box：IE（替代）盒模型。
-
6，css選擇器
| 選擇器 | 權重 | 使用示例 |
|---|---|---|
| !important | 1111 | * {color: '#00f' !important} |
| 行內 | 1000 | <span style={color:'#00f'} /> |
| id | 0100 | #id{color:'#00f} |
| class | 0010 | .calssName{color:'#00f} |
| 標簽 | 0001 | div{color:'#00f} |
| 子選擇 | 0001 | div > span{color:'#00f} |
| 偽類 | 0001 | a:hover {color:'#00f}> |
優先順序的計算規則：
相信每位寫過CSS的朋友都知道，CSS選擇器的優先順序關係是: 內聯 > ID選擇器 > 類選擇器 > 標簽選擇器
但是，瀏覽器具體的優先順序演算法是怎樣的？可能還有些人不知道 。《CSS REFACTORING》 中提到了演算法的過程
A specificity is determined by plugging numbers into (a, b, c, d): If the styles are applied via the style attribute, a=1; otherwise, a=0. b is equal to the number of ID selectors present. c is equal to the number of class selectors, attribute selectors, and pseudoclasses present. d is equal to the number of type selectors and pseudoelements present.
簡單來說就是通過，A,B,C,D四個值來確定，具體的規則如下：
如果存在內聯樣式，那麼 A = 1，否則 A = 0 ；
B 的值等於 ID選擇器（#id） 出現的次數；
C 的值等於 類選擇器（.class） 和 屬性選擇器（a[href="https://example.org"]） 和 偽類（:first-child） 出現的總次數；
D 的值等於 標簽選擇器（h1,a,div） 和 偽元素（::before,::after） 出現的總次數。
而比較規則是: 從左往右依次進行比較 ，較大者勝出，如果相等，則繼續往右移動一位進行比較 。如果4位全部相等，則後面的會覆蓋前面的
舉個慄子：
<div class="nav-list" id="nav-list"> <div class="item">nav1</div> <div class="item">nav2</div> </div> #nav-list .item { color: #f00; } .nav-list .item { color: #0f0; }
上邊代碼，算出 #nav-list .item 的優先順序是（0，1，1，0） 算出 .nav-list .item 的優先順序是（0，0，2，0）
首先比較第一位都是0，相等，往右邊找第二位，#nav-list .item的優先順序第二位是1，.nav-list .item 優先順序的第二位是0，所以#nav-list .item的優先順序大於.nav-list .item
7，重排（reflow）和重繪（repaint）的區別
兩種概念：
-
-
- 重排：無論通過什麼方式影響了元素的幾何信息(元素在視口內的位置和尺寸大小)，瀏覽器需要重新計算元素在視口內的幾何屬性，這個過程叫做重排。
- 重繪：：通過構造渲染樹和重排（迴流）階段，我們知道了哪些節點是可見的，以及可見節點的樣式和具體的幾何信息(元素在視口內的位置和尺寸大小)，接下來就可以將渲染樹的每個節點都轉換為屏幕上的實際像素，這個階段就叫做重繪。
-
如何減少重排和重繪
最小化重繪和重排，比如樣式集中改變，使用添加新樣式類名 .class 或 cssText
批量操作 DOM，比如讀取某元素 offsetWidth 屬性存到一個臨時變數，再去使用，而不是頻繁使用這個計算屬性；又比如利用 document.createDocumentFragment() 來添加要被添加的節點，處理完之後再插入到實際 DOM 中
使用 **absolute** 或 **fixed** 使元素脫離文檔流，這在製作複雜的動畫時對性能的影響比較明顯
開啟 GPU 加速，利用 css 屬性 transform 、will-change 等，比如改變元素位置，我們使用 translate 會比使用絕對定位改變其 left 、top 等來的高效，因為它不會觸發重排或重繪，transform 使瀏覽器為元素創建⼀個 GPU 圖層，這使得動畫元素在一個獨立的層中進行渲染。當元素的內容沒有發生改變，就沒有必要進行重繪作者：vortesnail
瀏覽器渲染的過程
- 解析HTML生成DOM樹，解析CSS生成CSSOM樹
- 將DOM樹和CSSOM樹結合，生成渲染樹（Render Tree）
- Layout(迴流):根據生成的渲染樹，進行迴流(Layout)，得到節點的幾何信息（位置，大小）
- Painting(重繪):根據渲染樹以及迴流得到的幾何信息，得到節點的絕對像素
- Display:將像素髮送給GPU，展示在頁面上。
為了構建渲染樹，瀏覽器主要完成了以下工作：
- 從DOM樹的根部開始遍歷出每個可見的節點 （不可見的節點有：script、meta、link等。還有一些通過css進行隱藏的節點。比如display:none）
- 對每個可見的節點，找到CSSOM樹上對應的規則，並應用他們
- 根據每個可見節點以及其對應的樣式，組合生成渲染樹
註意：渲染樹只包含可見的節點
註意，利用visibility和opacity隱藏的節點，還是會顯示在渲染樹上的。只有display:none的節點才不會顯示在渲染樹上
從上邊的例子我們可以看到span標簽的樣式有一個display:none，它最終並沒有在渲染樹上
迴流（Layout）
我們通過構造渲染樹，將可見DOM節點以及它對應的樣式結合起來，可是我們還需要計算它們在設備視口(viewport)內的確切位置和大小，這個計算的階段就是迴流
為了弄清每個對象在網站上的確切大小和位置，瀏覽器從渲染樹的根節點開始遍歷，舉個慄子：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
我們可以看到，第一個div將節點的顯示尺寸設置為視口寬度的50%，第二個div將其尺寸設置為父節點的50%
而在迴流這個階段，我們就需要根據視口具體的寬度，將其轉為實際的像素值
重繪（Painting）
最終，我們通過構造渲染樹和迴流階段，知道了那些元素是可見的，以及可見節點的樣式和具體的幾何圖像信息（也就是在頁面上的位置，大小）那麼我們就可以將渲染樹的每個節點都轉換為屏幕上的實際像素，這個階段就叫做重繪節點
何時會發生迴流重繪？
既然前邊我們都知道了，迴流這一階段主要是計算節點的位置和幾何信息，那麼當頁面佈局和幾何信息發生變化的時候，就需要迴流。舉幾個慄子：
-
-
-
- 添加或刪除可見的DOM元素
- 元素的位置發生變化
- 元素的尺寸發生變化（包括外邊距、內邊框、邊框大小、高度和寬度等）
- 內容發生變化，比如文本變化或圖片被另一個不同尺寸的圖片所替代。
- 頁面一開始渲染的時候（這肯定避免不了）
- 瀏覽器的視窗尺寸變化（因為迴流是根據視口的大小來計算元素的位置和大小的）
-
-
註意：迴流一定會觸發重繪，而重繪不一定會迴流
根據改變的範圍和程度，渲染樹中或大或小的部分需要重新計算，有些改變會觸發整個頁面的重排，比如，滾動條出現的時候或者修改了根節點
推薦騰訊 IVWEB 團隊的這篇文章：你真的瞭解迴流和重繪嗎
8，對BFC的理解
全程 block format contex 塊級格式上下文，就是一塊獨立渲染區域，不影響文檔流
創建 BFC 的方式：
-
-
- 絕對定位元素（
position為absolute或fixed）。 - 行內塊元素，即
display為inline-block。 overflow的值不為visible。
- 絕對定位元素（
-
推薦文章：可能是最好的 BFC 解析了...
9，實現兩欄佈局（左側固定，右側自適應）
DOM結構：
<div class="outer"> <div class="left">左側</div> <div class="right">右側</div> </div>
方法一：
利用浮動，左邊元素寬度固定，右邊元素的margin-left固定，註意：右邊元素的width是auto，跟隨父級自動撐滿
.outer { height: 100px; } .left { float: left; width: 200px; height: 100%; background: lightcoral; } .right { margin-left: 200px; height: 100%; background: lightseagreen; }
方法二：
同樣利用浮動，將左邊元素寬度固定，然後給右邊元素加上overflow：hidden，這樣就觸發了 BFC ，BFC的區域不會與浮動元素髮生重疊，所以兩側就不會發生重疊
.outer { height: 100px; } .left { float: left; width: 200px; height: 100%; background: lightcoral; } .right { overflow: hidden; height: 100%; background: lightseagreen; }
方法三：
利用 flex佈局，左邊元素固定寬度，右邊的元素設置 flex: 1
.outer { display: flex; height: 100px; } .left { width: 200px; height: 100%; background: lightcoral; } .right { flex: 1; height: 100%; background: lightseagreen; }
方法四：
利用定位，給父級元素相對定位，給左邊元素絕對定位，固定左邊元素的寬度，右邊元素margin-left 留出位置
.outer { position: relative; height: 100px; } .left { position: absolute; width: 200px; height: 100%; background: lightcoral; } .right { margin-left: 200px; height: 100%; background: lightseagreen; }
方法五：
也是定位，給右邊元素絕對定位，給父級相對定位，然後固定左邊元素的寬度，給右邊元素設置 left 留出位置，剩餘的全為0
.outer { position: relative; height: 100px; } .left { width: 200px; height: 100%; background: lightcoral; } .right { position: absolute; left: 200px; top: 0; right: 0; bottom: 0; height: 100%; background: lightseagreen; }
10，實現聖杯佈局和雙飛翼佈局（經典的三欄佈局）
詢問聖杯佈局和雙飛翼佈局的目的：
- 三欄佈局，中間的內容一定要優先渲染（內容最重要）
- 兩邊固定，中間的隨著頁面自適應
- 用於pc端頁面
技術總結：
- 使用 float 佈局
- 兩側使用
margin負值，以便和中間內容橫向重疊 - 防止中間內容被兩側覆蓋，聖杯佈局用
padding，雙飛翼佈局用margin
聖杯佈局：
<div id="container" class="clearfix"> <p class="center">我是中間</p> <p class="left">我是左邊</p> <p class="right">我是右邊</p> </div>
css樣式：
#container { padding-left: 200px; padding-right: 150px; overflow: auto; } #container p { float: left; } .center { width: 100%; background-color: lightcoral; } .left { width: 200px; position: relative; left: -200px; margin-left: -100%; background-color: lightcyan; } .right { width: 150px; margin-right: -150px; background-color: lightgreen; } .clearfix:after { content: ""; display: table; clear: both; }
雙飛翼佈局：
<div id="main" class="float"> <div id="main-wrap">main</div> </div> <div id="left" class="float">left</div> <div id="right" class="float">right</div>
css樣式：
.float { float: left; } #main { width: 100%; height: 200px; background-color: lightpink; } #main-wrap { margin: 0 190px 0 190px; } #left { width: 190px; height: 200px; background-color: lightsalmon; margin-left: -100%; } #right { width: 190px; height: 200px; background-color: lightskyblue; margin-left: -190px; }
11，水平垂直居中
方法一：flex 佈局
.box{ display: flex; justify-content: center; align-items: center; }
方法二：利用絕對定位，left：50% top：50% 然後再通過 margin-left 和 margin-top 設置負值實現
.father { position: relative; } .son { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; }
方法三：和上邊的方法差不多，但用了css3新增的屬性 translate 來實現
.father { position: relative; } .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
方法四：利用絕對定位，子元素所有方向都為 0 ，將 margin 設置為 auto ，由於寬高固定，對應方向實現平分，註意：該方法必須盒子有寬高
.father { position: relative; } .son { position: absolute; top: 0; left: 0; right: 0; bottom: 0px; margin: auto; height: 100px; width: 100px; }
關於div居中的方法還有很多這裡推薦一篇：面試官：你能實現多少種水平垂直居中的佈局（定寬高和不定寬高）
12，flex佈局
Flex 是 Flexible Box 的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 Flex 佈局
推薦閱讀：Flex 佈局教程
13，line-height 如何繼承？
-
-
- 父元素的
line-height寫了具體數值，比如30px，則子元素line-height繼承該值 - 父元素的
line-height寫了比例，比如1.5 或 2，則子元素line-height也是繼承該比例 - 父元素的
line-height寫了百分比，比如200%，則子元素line-height繼承的是父元素font-size * 200%計算出來的值
- 父元素的
-
