2020前端最新面試知識點匯總

前言：最近在找作業，自己整理了一些前端面試知識點，在此與大家分享一下！

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.什么閉包,閉包有什么用
閉包是在某個作用域內定義的函式，它可以訪問這個作用域內的所有變數，閉包作用域鏈通常包括三個部分：

函式本身作用域，
閉包定義時的作用域，
全域作用域，
閉包常見用途：

創建特權方法用于訪問控制
事件處理程式及回呼

標籤：HTML5

上一篇：Html5 小游戲 俄羅斯方塊

下一篇：Bootstrap4 本地編譯運行