2020Web前端崗位面試題有哪些？這里有答案！

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

一、http狀態(tài)碼

http狀態(tài)碼是表示服務(wù)器對請求的響應(yīng)狀態(tài)，主要分為以下幾個部分

1**：這類響應(yīng)是臨時響應(yīng)，只包含狀態(tài)行和某些可選的響應(yīng)頭信息，并以空行結(jié)束

2**：表示請求成功，

3**：表示重定向

4**：表示客戶端錯誤

5**：表示服務(wù)器端錯誤

100（continue），客戶端應(yīng)當(dāng)繼續(xù)發(fā)送請求。這個臨時響應(yīng)是用來通知客戶端它的部分請求已經(jīng)被服務(wù)器接收

200（OK），表示請求成功，請求所希望的響應(yīng)頭或數(shù)據(jù)體將隨此響應(yīng)返回。

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

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

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

206（Partial-Content），服務(wù)器已經(jīng)成功處理了部分 GET 請求。

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

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

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

400（Bad-Reques），請求有誤，當(dāng)前請求無法被服務(wù)器理解。

401（Unauthorized），當(dāng)前請求需要用戶驗證。

403（Forbidden），服務(wù)器已經(jīng)理解請求，但是拒絕執(zhí)行它。

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

500（Interval Server Error），服務(wù)器內(nèi)部錯誤

502（Bad GateWay），網(wǎng)關(guān)出錯

503（Service Unavailable），由于臨時的服務(wù)器維護(hù)或者過載，服務(wù)器當(dāng)前無法處理請求。

504（Gateway Timeout），作為網(wǎng)關(guān)或者代理工作的服務(wù)器嘗試執(zhí)行請求時，未能及時從上游服務(wù)器（URI標(biāo)識出的服務(wù)器，例如HTTP、FTP、LDAP）或者輔助服務(wù)器（例如DNS）收到響應(yīng)。

二、HTTP請求發(fā)起和響應(yīng)

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

用戶輸入URL到瀏覽器顯現(xiàn)給用戶頁面經(jīng)過了什么過程

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

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

根據(jù)解析出的IP地址+端口，瀏覽器（應(yīng)用層）發(fā)起HTTP請求，請求中攜帶（請求頭header（也可細(xì)分為請求行和請求頭）、請求體body）

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

到網(wǎng)絡(luò)層， 網(wǎng)絡(luò)層通過ARP尋址得到接收方的Mac地址，IP協(xié)議把在傳輸層被分割成一個個數(shù)據(jù)包傳送接收方。

數(shù)據(jù)到達(dá)數(shù)據(jù)鏈路層，請求階段完成

接收方在數(shù)據(jù)鏈路層收到數(shù)據(jù)包之后，層層傳遞到應(yīng)用層，接收方應(yīng)用程序就獲得到請求報文。

接收方收到發(fā)送方的HTTP請求之后，進(jìn)行請求文件資源（如HTML頁面）的尋找并響應(yīng)報文

發(fā)送方收到響應(yīng)報文后，如果報文中的狀態(tài)碼表示請求成功，則接受返回的資源（如HTML文件），進(jìn)行頁面渲染。

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

（body包含請求的內(nèi)容）

三、流式布局如何實現(xiàn)，響應(yīng)式布局如何實現(xiàn)？

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

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

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

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

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

缺點：現(xiàn)在網(wǎng)站的JS都會進(jìn)行壓縮，一些文件用了嚴(yán)格模式，而另一些沒有。這時這些本來是嚴(yán)格模式的文件，被merge后，這個串就到了文件的中間，不僅沒有指示嚴(yán)格模式，反而在壓縮后浪費了字節(jié)。

五、link和@import的區(qū)別

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

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

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

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

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

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

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

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

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

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

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

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

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

以上就是我總結(jié)的Web前端面試時經(jīng)常問道以及部分難點。如果還有對Web前端面試抱有疑問的小伙伴，可以持續(xù)關(guān)注我哦！

注：部分內(nèi)容來源于網(wǎng)絡(luò)！