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

一、http狀態(tài)碼

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

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

2**：表示請(qǐng)求成功，

3**：表示重定向

4**：表示客戶端錯(cuò)誤

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

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

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

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

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

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

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

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

302（Moved-Temporarily），暫時(shí)性重定向

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

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

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

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

404（Not-Found），請(qǐng)求的資源沒(méi)有被找到

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

六、淺拷貝和深拷貝的問(wèn)題

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

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

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

4. 深拷貝，JSON.parse()和JSON.stringify()給了我們一個(gè)基本的解決辦法。但是函數(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()的事件綁定是只對(duì)當(dāng)前頁(yè)面選中的元素有效，對(duì)動(dòng)態(tài)創(chuàng)建的元素bind()事件，是沒(méi)有辦法達(dá)到效果的，而其余三個(gè)可以。

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

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