最近看到很多互聯網公司發布招聘web前端的公告。小編看了一下崗位要求，個人認為要求不難，但稍微繁瑣。今天，為了幫助即使面試web前端的求職者順利進入大廠，準備了一些易被問道以及部分難點的前端面試題，希望可以幫助大家更加順利完成求職，找到自己滿意的工作。

一、http狀態碼

http狀態碼是表示服務器對請求的響應狀態，主要分為以下幾個部分

1**：這類響應是臨時響應，只包含狀態行和某些可選的響應頭信息，并以空行結束

2**：表示請求成功，

3**：表示重定向

4**：表示客戶端錯誤

5**：表示服務器端錯誤

100（continue），客戶端應當繼續發送請求。這個臨時響應是用來通知客戶端它的部分請求已經被服務器接收

200（OK），表示請求成功，請求所希望的響應頭或數據體將隨此響應返回。

202（Accepted），服務器已接受請求，但尚未處理。

204（No-Content），服務器成功處理了請求，但不需要返回任何實體內容

205（Reset-Content），服務器成功處理了請求，且沒有返回任何內容。但是與204響應不同，返回此狀態碼的響應要求請求者重置文檔視圖。該響應主要是被用于接受用戶輸入后，立即重置表單，以便用戶能夠輕松地開始另一次輸入。

206（Partial-Content），服務器已經成功處理了部分 GET 請求。

301（Moved-Permanently），永久性重定向

302（Moved-Temporarily），暫時性重定向

304（Not-Modified），瀏覽器端緩存的資源依然有效

400（Bad-Reques），請求有誤，當前請求無法被服務器理解。

401（Unauthorized），當前請求需要用戶驗證。

403（Forbidden），服務器已經理解請求，但是拒絕執行它。

404（Not-Found），請求的資源沒有被找到

500（Interval Server Error），服務器內部錯誤

502（Bad GateWay），網關出錯

503（Service Unavailable），由于臨時的服務器維護或者過載，服務器當前無法處理請求。

504（Gateway Timeout），作為網關或者代理工作的服務器嘗試執行請求時，未能及時從上游服務器（URI標識出的服務器，例如HTTP、FTP、LDAP）或者輔助服務器（例如DNS）收到響應。

二、HTTP請求發起和響應

在一個web程序開發中，一般都有前端和后端之分，前端負責向后端請求數據和展示頁面，后端負責接收請求和做出響應發回給前端，他們之間的協作橋梁是API，而API其實就是一個URL，作為HTTP連接的一種具體載體。

用戶輸入URL到瀏覽器顯現給用戶頁面經過了什么過程

用戶輸入URL，瀏覽器獲取到URL

瀏覽器(應用層)進行DNS解析（直接輸入IP地址既跳過該步驟）

根據解析出的IP地址+端口，瀏覽器（應用層）發起HTTP請求，請求中攜帶（請求頭header（也可細分為請求行和請求頭）、請求體body）

請求到達傳輸層，tcp協議為傳輸報文提供可靠的字節流傳輸服務，它通過三次握手等手段來保證傳輸過程中的安全可靠。通過對大塊數據的分割成一個個報文段的方式提供給大量數據的便攜傳輸。

到網絡層， 網絡層通過ARP尋址得到接收方的Mac地址，IP協議把在傳輸層被分割成一個個數據包傳送接收方。

數據到達數據鏈路層，請求階段完成

接收方在數據鏈路層收到數據包之后，層層傳遞到應用層，接收方應用程序就獲得到請求報文。

接收方收到發送方的HTTP請求之后，進行請求文件資源（如HTML頁面）的尋找并響應報文

發送方收到響應報文后，如果報文中的狀態碼表示請求成功，則接受返回的資源（如HTML文件），進行頁面渲染。

（header：1、請求的方法（get、post、put..）2、協議（http、https、ftp、sftp…）3目標url（具體的請求路徑已經文件名）4一些必要信息（緩存、cookie之類）。)

（body包含請求的內容）

三、流式布局如何實現，響應式布局如何實現？

流式布局：也叫fluid，當上面一行的空間不夠容納新的TextView時候才開辟下一行的空間。場景：主要用于關鍵詞搜索或者熱門標簽等場景；他主要是按照頁面元素的寬度按照屏幕分辨率進行適配調整，但整體布局不變，使用%百分比定義寬度，高度大都是用px來固定，可以根據可視區域和父元素的實時尺寸來調整，盡可能適應各種分辨率。

響應式布局：主要是實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式，通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗；首先設置meta標簽，通過媒體查詢來設置樣式Media Queries，然后再設置多種試圖寬度。

四、什么是“use strict”，好處和壞處是什么？

ECMAscript 5添加了第二種運行模式：“嚴格模式”（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下運行。

好處：消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為；消除代碼運行的一些不安全之處，保證代碼運行的安全；提高編譯器效率，增加運行速度；為未來新版本的 Javascript 做好鋪墊。注：經過測試IE6，7，8，9均不支持嚴格模式。

缺點：現在網站的JS都會進行壓縮，一些文件用了嚴格模式，而另一些沒有。這時這些本來是嚴格模式的文件，被merge后，這個串就到了文件的中間，不僅沒有指示嚴格模式，反而在壓縮后浪費了字節。

五、link和@import的區別

兩者都是外部引用 CSS 的方式，但是存在一定的區別：

（1）link是XHTML標簽，除了能夠加載CSS，還可以定義RSS等其他事務；而@import屬于CSS范疇，只可以加載CSS。

（2）link引用CSS時，在頁面載入時同時加載；@import需要頁面完全載入以后再加載。

（3）link是XHTML標簽，無兼容問題；@import則是在CSS2.1提出的，低版本的瀏覽器不支持。

（4）link支持使用Javascript控制DOM改變樣式；而@import不支持。

六、淺拷貝和深拷貝的問題

1. 深拷貝和淺拷貝是只針對Object和Array這樣的復雜類型的

2. 也就是說a和b指向了同一塊內存，所以修改其中任意的值，另一個值都會隨之變化，這就是淺拷貝

3. 淺拷貝， ”Object.assign() 方法用于將所有可枚舉的屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象

4. 深拷貝，JSON.parse()和JSON.stringify()給了我們一個基本的解決辦法。但是函數不能被正確處理

七、jquery如何綁定事件，有幾種類型和區別？

jquery 綁定事件的方法分別是：bind()，live()，delegate()和 on()，像bind()，live()，delegate()，隨著jquery版本的更新，已經被移除。注意：bind()是在3.0版本之后被移除的，現在用的最多的是on()，on()既可以綁定單事件，也可以綁定多事件，還可以進行事件委托。

區別：bind()的事件綁定是只對當前頁面選中的元素有效，對動態創建的元素bind()事件，是沒有辦法達到效果的，而其余三個可以。

以上就是我總結的Web前端面試時經常問道以及部分難點。如果還有對Web前端面試抱有疑問的小伙伴，可以持續關注我哦！

注：部分內容來源于網絡！