2019前端面試知識點彙總

前言：最近在找工做，本身整理了一些前端面試知識點，在此與你們分享一下！

1.前端須要注意哪些 SEO：
合理的 title、description、keywords：搜索對着三項的權重逐個減少，title 值強調重點便可，重要關鍵詞出現不要超過 2 次，並且要靠前，不一樣頁面 title 要有所不一樣；description 把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面 description 有所不一樣；keywords 列舉出重要關鍵詞便可
語義化的 HTML 代碼，符合 W3C 規範：語義化代碼讓搜索引擎容易理解網頁
重要內容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
重要內容不要用 js 輸出：爬蟲不會執行 js 獲取內容
少用 iframe：搜索引擎不會抓取 iframe 中的內容
非裝飾性圖片必須加 alt
提升網站速度：網站速度是搜索引擎排序的一個重要指標

2.<img>的title和alt有什麼區別：
title是global attributes之一，一般當鼠標滑動到元素上的時候顯示。
alt是<img>的特有屬性，是圖片內容的等價描述，用於圖片沒法加載時顯示，搜索引擎會重點分析。

3.什麼是 web 語義化,有什麼好處：
web 語義化是指經過 HTML 標記表示頁面包含的信息，包含了 HTML 標籤的語義化和 css 命名的語義化。 HTML 標籤的語義化是指：經過使用包含語義的標籤（如 h1-h6）恰當地表示文檔結構 css 命名的語義化是指：爲 html 標籤添加有意義的 class，id 補充未表達的語義：
去掉樣式後頁面呈現清晰的結構
盲人使用讀屏器更好地閱讀
搜索引擎更好地理解頁面，有利於收錄
便團隊項目的可持續運做及維護

4.HTTP method
一臺服務器要與 HTTP1.1 兼容，只要爲資源實現GET和HEAD方法便可
GET是最經常使用的方法，一般用於請求服務器發送某個資源。
HEAD與 GET 相似，但服務器在響應中值返回首部，不返回實體的主體部分
PUT讓服務器用請求的主體部分來建立一個由所請求的 URL 命名的新文檔，或者，若是那個 URL 已經存在的話，就用幹這個主體替代它
POST起初是用來向服務器輸入數據的。實際上，一般會用它來支持 HTML 的表單。表單中填好的數據一般會被送給服務器，而後由服務器將其發送到要去的地方。
TRACE會在目的服務器端發起一個環回診斷，最後一站的服務器會彈回一個 TRACE 響應並在響應主體中攜帶它收到的原始請求報文。TRACE 方法主要用於診斷，用於驗證請求是否如願穿過了請求/響應鏈。
OPTIONS方法請求 web 服務器告知其支持的各類功能。能夠查詢服務器支持哪些方法或者對某些特殊資源支持哪些方法。
DELETE請求服務器刪除請求 URL 指定的資源

5.從瀏覽器地址欄輸入 url 到顯示頁面的步驟(以 HTTP 爲例)
在瀏覽器地址欄輸入 URL
瀏覽器查看緩存，若是請求資源在緩存中而且新鮮，跳轉到轉碼步驟
若是資源未緩存，發起新請求
若是已緩存，檢驗是否足夠新鮮，足夠新鮮直接提供給客戶端，不然與服務器進行驗證。
檢驗新鮮一般有兩個 HTTP 頭進行控制Expires和Cache-Control：
HTTP1.0 提供 Expires，值爲一個絕對時間表示緩存新鮮日期
HTTP1.1 增長了 Cache-Control: max-age=,值爲以秒爲單位的最大新鮮時間
瀏覽器解析 URL獲取協議，主機，端口，path
瀏覽器組裝一個 HTTP（GET）請求報文
瀏覽器獲取主機 ip 地址
打開一個 socket 與目標 IP 地址，端口創建 TCP 連接，三次握手以下：

客戶端發送一個 TCP 的SYN=1，Seq=X的包到服務器端口
服務器發回SYN=1， ACK=X+1， Seq=Y的響應包
客戶端發送ACK=Y+1， Seq=Z

TCP 連接創建後發送 HTTP 請求
服務器接受請求並解析，將請求轉發到服務程序，如虛擬主機使用 HTTP Host 頭部判斷請求的服務程序
服務器檢查HTTP 請求頭是否包含緩存驗證信息若是驗證緩存新鮮，返回304等對應狀態碼
處理程序讀取完整請求並準備 HTTP 響應，可能須要查詢數據庫等操做
服務器將響應報文經過 TCP 鏈接發送回瀏覽器
瀏覽器接收 HTTP 響應，而後根據狀況選擇關閉 TCP 鏈接或者保留重用，關閉 TCP 鏈接的四次握手以下：

主動方發送Fin=1， Ack=Z， Seq= X報文
被動方發送ACK=X+1， Seq=Z報文
被動方發送Fin=1， ACK=X， Seq=Y報文
主動方發送ACK=Y， Seq=X報文

瀏覽器檢查響應狀態嗎：是否爲 1XX，3XX， 4XX， 5XX，這些狀況處理與 2XX 不一樣
若是資源可緩存，進行緩存
對響應進行解碼（例如 gzip 壓縮）
根據資源類型決定如何處理（假設資源爲 HTML 文檔）
解析 HTML 文檔，構件 DOM 樹，下載資源，構造 CSSOM 樹，執行 js 腳本，這些操做沒有嚴格的前後順序，如下分別解釋
構建 DOM 樹：

解析過程當中遇到圖片、樣式表、js 文件，啓動下載
構建CSSOM 樹：

根據 DOM 樹和 CSSOM 樹構建渲染樹:

從 DOM 樹的根節點遍歷全部可見節點，不可見節點包括：1）script,meta這樣自己不可見的標籤。2)被 css 隱藏的節點，如display: none
對每個可見節點，找到恰當的 CSSOM 規則並應用
發佈可視節點的內容和計算樣式

js 解析以下：

瀏覽器建立 Document 對象並解析 HTML，將解析到的元素和文本節點添加到文檔中，此時document.readystate 爲 loading
HTML 解析器遇到沒有 async 和 defer 的 script 時，將他們添加到文檔中，而後執行行內或外部腳本。這些腳本會同步執行，而且在腳本下載和執行時解析器會暫停。這樣就能夠用 document.write()把文本插入到輸入流中。同步腳本常常簡單定義函數和註冊事件處理程序，他們能夠遍歷和操做 script 和他們以前的文檔內容
當解析器遇到設置了async屬性的 script 時，開始下載腳本並繼續解析文檔。腳本會在它下載完成後儘快執行，可是解析器不會停下來等它下載。異步腳本禁止使用 document.write()，它們能夠訪問本身 script 和以前的文檔元素
當文檔完成解析，document.readState 變成 interactive
全部defer腳本會按照在文檔出現的順序執行，延遲腳本能訪問完整文檔樹，禁止使用 document.write()
瀏覽器在 Document 對象上觸發 DOMContentLoaded 事件
此時文檔徹底解析完成，瀏覽器可能還在等待如圖片等內容加載，等這些內容完成載入而且全部異步腳本完成載入和執行，document.readState 變爲 complete,window 觸發 load 事件

顯示頁面（HTML 解析過程當中會逐步顯示頁面）

6.HTTP request 報文結構是怎樣的
首行是Request-Line包括：請求方法，請求 URI，協議版本，CRLF（回車換行）
首行以後是若干行請求頭，包括general-header，request-header或者entity-header，每一個一行以 CRLF 結束
請求頭和消息實體之間有一個CRLF 分隔
根據實際請求須要可能包含一個消息實體

7.HTTP response 報文結構是怎樣的
首行是狀態行包括：HTTP 版本，狀態碼，狀態描述，後面跟一個 CRLF
首行以後是若干行響應頭，包括：通用頭部，響應頭部，實體頭部
響應頭部和響應實體之間用一個 CRLF 空行分隔
最後是一個可能的消息實體

8.如何進行網站性能優化
content 方面
減小 HTTP 請求：合併文件、CSS 精靈、inline Image
減小 DNS 查詢：DNS 查詢完成以前瀏覽器不能從這個主機下載任何任何文件。方法：DNS 緩存、將資源分佈到恰當數量的主機名，平衡並行下載和 DNS 查詢
避免重定向：多餘的中間訪問
使 Ajax 可緩存
非必須組件延遲加載
將來所需組件預加載
減小 DOM 元素數量
將資源放到不一樣的域下：瀏覽器同時從一個域下載資源的數目有限，增長域能夠提升並行下載量
減小 iframe 數量
不要 404

Server 方面
使用 CDN
添加 Expires 或者 Cache-Control 響應頭
對組件使用 Gzip 壓縮
配置 ETag
Flush Buffer Early
Ajax 使用 GET 進行請求
避免空 src 的 img 標籤

Cookie 方面
減少 cookie 大小
引入資源的域名不要包含 cookie

css 方面
將樣式表放到頁面頂部
不使用 CSS 表達式
使用不使用@import
不使用 IE 的 Filter

Javascript 方面
將腳本放到頁面底部
將 javascript 和 css 從外部引入
壓縮 javascript 和 css
刪除不須要的腳本
減小 DOM 訪問
合理設計事件監聽器

圖片方面
優化圖片：根據實際顏色須要選擇色深、壓縮
優化 css 精靈
不要在 HTML 中拉伸圖片
保證 favicon.ico 小而且可緩存

移動方面
保證組件小於 25k
Pack Components into a Multipart Document

9.什麼是漸進加強
漸進加強是指在 web 設計時強調可訪問性、語義化 HTML 標籤、外部樣式表和腳本。保證全部人都能訪問頁面的基本內容和功能同時爲高級瀏覽器和高帶寬用戶提供更好的用戶體驗。核心原則以下:

全部瀏覽器都必須能訪問基本內容
全部瀏覽器都必須能使用基本功能
全部內容都包含在語義化標籤中
經過外部 CSS 提供加強的佈局
經過非侵入式、外部 javascript 提供加強功能

10.web開發中會話跟蹤的方法有哪些
cookie
session
url重寫
隱藏input
ip地址

11.doctype是什麼,舉例常見doctype及特色
<!doctype>聲明必須處於HTML文檔的頭部，在<html>標籤以前，HTML5中不區分大小寫
<!doctype>聲明不是一個HTML標籤，是一個用於告訴瀏覽器當前HTMl版本的指令
現代瀏覽器的html佈局引擎經過檢查doctype決定使用兼容模式仍是標準模式對文檔進行渲染，一些瀏覽器有一個接近標準模型。
在HTML4.01中<!doctype>聲明指向一個DTD，因爲HTML4.01基於SGML，因此DTD指定了標記規則以保證瀏覽器正確渲染內容
HTML5不基於SGML，因此不用指定DTD

12.如何進行網站性能優化
content方面：
減小HTTP請求：合併文件、CSS精靈、inline Image
減小DNS查詢：DNS查詢完成以前瀏覽器不能從這個主機下載任何任何文件。方法：DNS緩存、將資源分佈到恰當數量的主機名，平衡並行下載和DNS查詢
避免重定向：多餘的中間訪問
使Ajax可緩存
非必須組件延遲加載
將來所需組件預加載
減小DOM元素數量
將資源放到不一樣的域下：瀏覽器同時從一個域下載資源的數目有限，增長域能夠提升並行下載量
減小iframe數量
不要404

Server方面：
使用CDN
添加Expires或者Cache-Control響應頭
對組件使用Gzip壓縮
配置ETag
Flush Buffer Early
Ajax使用GET進行請求
避免空src的img標籤

Cookie方面：
減少cookie大小
引入資源的域名不要包含cookie

css方面：
將樣式表放到頁面頂部
不使用CSS表達式
不使用@import
不使用IE的Filter

Javascript方面：
將腳本放到頁面底部
將javascript和css從外部引入
壓縮javascript和css
刪除不須要的腳本
減小DOM訪問
合理設計事件監聽器

圖片方面：
優化圖片：根據實際顏色須要選擇色深、壓縮
優化css精靈
不要在HTML中拉伸圖片
保證favicon.ico小而且可緩存

移動方面：
保證組件小於25k
Pack Components into a Multipart Documentary

13.HTTP狀態碼及其含義
1XX：信息狀態碼
2XX：成功狀態碼
200 OK：請求成功，請求所但願的響應頭或數據體將隨此響應返回
3XX：重定向
4XX：客戶端錯誤
400 Bad Request:
401 Unauthorized:
402 Payment Required:
403 Forbidden:
404 Not Found:
5XX: 服務器錯誤
500 Internal Server Error:

14.css sprite是什麼,有什麼優缺點
概念：將多個小圖片拼接到一個圖片中。經過background-position和元素尺寸調節須要顯示的背景圖案。
優勢：
減小HTTP請求數，極大地提升頁面加載速度
增長圖片信息重複度，提升壓縮比，減小圖片大小
更換風格方便，只需在一張或幾張圖片上修改顏色或樣式便可實現
缺點：
圖片合併麻煩
維護麻煩，修改一個圖片可能須要重新佈局整個圖片，樣式

15.display: none;與visibility: hidden;的區別
聯繫：它們都能讓元素不可見
區別：
display:none;會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續佔據空間，只是內容不可見
display: none;是非繼承屬性，子孫節點消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；visibility: hidden;是繼承屬性，子孫節點消失因爲繼承了hidden，經過設置visibility: visible;可讓子孫節點顯式
修改常規流中元素的display一般會形成文檔重排。修改visibility屬性只會形成本元素的重繪。
讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

16.css hack原理及經常使用hack
原理：利用不一樣瀏覽器對CSS的支持和解析結果不同編寫針對特定瀏覽器樣式。常見的hack有1）屬性hack。2）選擇器hack。3）IE條件註釋

17.link與@import的區別
link是HTML方式， @import是CSS方式
link最大限度支持並行下載，@import過多嵌套致使串行下載，出現FOUC
link能夠經過rel="alternate stylesheet"指定候選樣式
瀏覽器對link支持早於@import，可使用@import對老瀏覽器隱藏樣式
@import必須在樣式規則以前，能夠在css文件中引用其餘文件
整體來講：link優於@important

18.PNG,GIF,JPG的區別及如何選擇正確的圖片格式
GIF:
8位像素，256色
無損壓縮
支持簡單動畫
支持boolean透明
適合簡單動畫
JPEG：
顏色限於256
有損壓縮
可控制壓縮質量
不支持透明
適合照片
PNG：
有PNG8和truecolor PNG
PNG8相似GIF顏色上限爲256，文件小，支持alpha透明度，無動畫
適合圖標、背景、按鈕

19.什麼是FOUC?如何避免
Flash Of Unstyled Content：用戶定義樣式表加載以前瀏覽器使用默認樣式顯示文檔，用戶樣式加載渲染以後再重新顯示文檔，形成頁面閃爍。解決方法：把樣式表放到文檔的head

20.sessionStorage,localStorage,cookie區別
都會在瀏覽器端保存，有大小限制，同源限制
cookie會在請求時發送到服務器，做爲會話標識，服務器可修改cookie；web storage不會發送到服務器
cookie有path概念，子路徑能夠訪問父路徑cookie，父路徑不能訪問子路徑cookie
有效期：cookie在設置的有效期內有效，默認爲瀏覽器關閉；sessionStorage在窗口關閉前有效，localStorage長期有效，直到用戶刪除
共享：sessionStorage不能共享，localStorage在同源文檔之間共享，cookie在同源且符合path規則的文檔之間共享
localStorage的修改會促發其餘文檔窗口的update事件
cookie有secure屬性要求HTTPS傳輸
瀏覽器不能保存超過300個cookie，單個服務器不能超過20個，每一個cookie不能超過4k。web storage大小支持能達到5M

20.javascript跨域通訊
同源：兩個文檔同源需知足
協議相同
域名相同
端口相同
跨域通訊：js進行DOM操做、通訊時若是目標與當前窗口不知足同源條件，瀏覽器爲了安全會阻止跨域操做。跨域通訊一般有如下方法
若是是log之類的簡單單項通訊，新建<img>,<script>,<link>,<iframe>元素，經過src，href屬性設置爲目標url。實現跨域請求
若是請求json數據，使用<script>進行jsonp請求
現代瀏覽器中多窗口通訊使用HTML5規範的targetWindow.postMessage(data, origin);其中data是須要發送的對象，origin是目標窗口的origin。window.addEventListener('message', handler, false);handler的event.data是postMessage發送來的數據，event.origin是發送窗口的origin，event.source是發送消息的窗口引用
內部服務器代理請求跨域url，而後返回數據
跨域請求數據，現代瀏覽器可以使用HTML5規範的CORS功能，只要目標服務器返回HTTP頭部Access-Control-Allow-Origin: *便可像普通ajax同樣訪問跨域資源

21.javascript有哪幾種數據類型
六種基本數據類型

undefined
null
string
boolean
number
symbol(ES6)
一種引用類型

Object

22.什麼閉包,閉包有什麼用
閉包是在某個做用域內定義的函數，它能夠訪問這個做用域內的全部變量。閉包做用域鏈一般包括三個部分：

函數自己做用域。
閉包定義時的做用域。
全局做用域。
閉包常見用途：

建立特權方法用於訪問控制事件處理程序及回調