面試總結（三）
1.語義化
HTML中不同的元素代表不同的含義，使用具有含義的元素來書寫HTML文檔，即是語義化。
選擇合適的語義標籤搭建的HTML文檔，不僅便於開發着閱讀、維護，也能讓瀏覽器爬蟲技術輕鬆解析。
可訪問性、可檢索性、國際化、複用性。
常見的h5語義化標籤：https://blog.csdn.net/mafan121/article/details/80649634
注意事項：
- 儘量少使用div和span標籤，如果語義不明顯的時候儘量用p標籤代替div。
- 儘量不要使用純樣式標籤，如：
b、font、u等,使用css設置樣式。也可用strong代替b，用em代替i - 不用用標籤來代替樣式實現，例如：
h1~h6 <figure>和<figcaption/>可用於給圖片加圖注效果。- 表格的每個部分都有明確的語義化標籤，不可混淆。
- 表單內容應該包含在
<filedset/>分組中，並使用<lengend>定義表單分組下的標題。 - 表單元素應該和
<label>關聯,明確表單元素的語義表示
2.瀏覽器對象
瀏覽器對象包括：Winodw、Navigator、Screen、History、Location。
Window:瀏覽器打開的窗口。Navigator:瀏覽器基本信息。Screen:瀏覽器顯示屏幕的信息。History:用戶訪問過的URL歷史記錄Location:當前URL相關信息。
HTML DOM對象包括：Document、Element、Attribute、Event
Document:每個HTML文檔都有Document對象，可以對頁面元素進行訪問。Element：HTML元素對象，代表一個元素節點。Attribute:表示HTML的屬性。Event：表示HTML的事件。
JavaScript引用對像包含：Array、Date、Math、Regexp、Function
3.CSS3
- 過渡（
transition） - 動畫（
animation） - 形態轉換（
transform、transform-origin） - 陰影（
box-shadow） - 邊框（
border-image、border-radius） - 背景（
background-clip、background-origin、background-size） - 濾鏡（
filter） - 盒子模型（
box-sizing） - 媒體查詢（
@media） - 柵格（
grid） - 彈性盒子（
flex） - 漸變（
-webkit-linear-gradient） - 顏色（
rgba、hsla） - 文字（
work-break、word-wrap、text-overflow、text-shadow） - 倒影（
-webkit-box-reflect）
可參考：https://juejin.im/post/5a0c184c51882531926e4294#heading-31
flex佈局：https://blog.csdn.net/mafan121/article/details/78518793
4.ES6
箭頭函數、Map/Set、let/const、字符串模板、類支持、默認參數、模塊化、解構、循環、Promise、Symbol、對象擴展。
參考：https://blog.csdn.net/mafan121/article/details/59726295
5.call、apply、bind的區別
三者都是可以用來修改上下文的引用指針（this）。
call、apply立即執行，bind返回一個新的函數，且修改函數的內部this。
參考:https://blog.csdn.net/mafan121/article/details/52922149
6. 數組的常用方法
| 方法 | 描述 |
|---|---|
| concat() | 連接兩個或更多的數組，並返回結果。 |
| join() | 把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。 |
| pop() | 刪除並返回數組的最後一個元素 |
| push() | 向數組的末尾添加一個或更多元素，並返回新的長度。 |
| reverse() | 顛倒數組中元素的順序。 |
| shift() | 刪除並返回數組的第一個元素 |
| slice() | 從某個已有的數組返回選定的元素 |
| sort() | 對數組的元素進行排序 |
| splice() | 刪除元素，並向數組添加新元素。 |
| toSource() | 返回該對象的源代碼。 |
| toString() | 把數組轉換爲字符串，並返回結果。 |
| toLocaleString() | 把數組轉換爲本地數組，並返回結果。 |
| unshift() | 向數組的開頭添加一個或更多元素，並返回新的長度。 |
| valueOf() | 返回數組對象的原始值 |
ES6相關方法：find、findIndex、filter、some、every、map、forEach、fill、includes、keys、values、entries、reduce、form、of。
參考：https://www.cnblogs.com/sqh17/p/8529401.html
7.js類型判斷的方法
常用的js類型判斷有4種方法：
-
typeof
數組和null判斷不準確，都將返回object
-
instanceof
主要用於判斷一個對象是否是某個引用類型的實例，無法判斷基礎類型，例如string、number
-
constructor
可以判斷所有內型，但是如果對象的原型被修改了，那麼將判斷不準確。
-
Object.prototype.toString.call()
可以對所有的數據類型做判斷，推薦使用
8.websocket協議
websocket是一個應用層協議，它必須依賴http協議進行一次握手，握手成功後數據即可從TCP通道傳輸。
websocket由HTTP握手+TCP雙工連接組成。
輪詢：客戶端發送一次請求，服務端返回一次響應，連接中斷。
長輪詢：客戶端發起一次請求，服務端服務掛起，當客戶端再來請求，直接響應，連接不中斷。
websocket：客戶端發起一次請求，服務端建立連接，協議切換，此時服務端可主動向客戶端推送消息，而長輪詢不行。
參考：https://blog.csdn.net/mafan121/article/details/51067593
9.HTML頁面優化
-
減少請求數量，合併請求
-
減小請求文件的體積大小
壓縮css、js等資源文件
-
合理利用緩存
Cache-control、Expires、ETag、Last-Modified -
異步加載資源/預加載資源
可將js放在body中，避免加載阻塞。css放在head中避免頁面變形。
對於圖片可採用懶加載的方式，另外也可對圖片進行合併處理做成雪碧圖。
head中的代碼都是同步加載，且
<Style>中的代碼將阻塞頁面渲染，所有應儘量少用style。 -
減少DNS查找，避免重定向
瀏覽器同域名下的最大連接數爲4或6，如果資源分佈在不同域名下，將增加dns的查找時間
10.頁面渲染
-
瀏覽器將 HTML 解析成
DOM 樹，當前節點的所有子節點都構建好後纔會去構建當前節點的下一個兄弟節點。從上至下依次解析。 -
解析
DOM Tree的同時也會將CSS 解析成CSS Rule Tree。 -
當
DOM Tree和CSS Rule Tree都解析完成後，纔會2者合併生成Render Tree。display:none 不會被掛載到 Render Tree 上面
-
計算出每個節點在屏幕中的位置,繪製頁面。
注意：
-
默認情況下，css被視爲阻塞渲染資源，遇到阻塞的Css時，將會延遲JavaScript的執行和頁面渲染
-
<script>和<Style>都將阻塞DOM樹構建，所以<script>的引用位置相當重要，一般放在body末尾加速dom解析。 -
我們可以使用
defer和async來改變script加載阻塞狀態。defer：可視爲將資源放在了頁面底部。
async：當資源下載完成後立即執行，有可能會在
DOMContentLoaded前執行從而導致解析錯誤。
重繪和重排
-
重繪（repaint或redraw）：指一個元素外觀的改變所觸發的瀏覽器行爲，瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。
觸發重繪的條件：改變元素外觀屬性。如：color，background-color等。
-
重排（重構/迴流/reflow）：當渲染樹中的一部分(或全部)因爲元素的規模尺寸，佈局，隱藏等改變而需要重新構建, 這就稱爲迴流(reflow)。每個頁面至少需要一次迴流，就是在頁面第一次加載的時候。
在迴流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成迴流後，瀏覽器會重新繪製受影響的部分到屏幕中，該過程稱爲重繪。
11. 清除浮動
爲父級元素添加如下樣式：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 爲兼容IE6,IE7，因爲ie6,ie7不能用after僞類 */
.clearfix{
zoom:1;
}
BFC:塊級格式化上下文。它是塊級盒佈局出現的區域，也是浮動層元素交互的區域。
能造成塊級格式化上下文的方式有如下幾種：
- 根元素或其它包含它的元素
- 浮動元素 (元素的 float 不是 none)
- 絕對定位元素 (元素具有 position 爲 absolute 或 fixed)
- 內聯塊 (元素具有 display: inline-block)
- 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
- 表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
- 具有overflow 且值不是 visible 的塊元素，
- display: flow-root
- column-span: all 應當總是會創建一個新的格式化上下文，即便具有 column-span: all 的元素並不被包裹在一個多列容器中。
- 一個塊格式化上下文包括創建它的元素內部所有內容，除了被包含於創建新的塊級格式化上下文的後代元素內的元素。
bfc的作用：
- 使bfc內部元素不會到處跑，
- 和浮動元素產生邊界