前端面試題及答案2020

1、前端面試題及答案20201.瀏覽器篇1.1常用那幾種瀏覽器測試？主流瀏覽器的內(nèi)核有哪些？Ql ： IE、Safari、ChrOmeS MOZiIla FirefOXX OPeraQ2:1、Trident 內(nèi)核代表產(chǎn)品為 Internet EXPIOrer, 乂稱其為 IE 內(nèi)核。Tndent （乂稱為 MSHTML）, 是微軟開發(fā)的一種排版引擎。2、GeCkO 內(nèi)核代表作品為MOZilla FirefOXO GeCkO是一套開放源代碼的、以C+編寫的網(wǎng)頁排 版引擎，是最流行的排版引擎之一，僅次于Tndento使用它的最著名瀏覽器有 FirefOXC3、WebKit 內(nèi)核代表作品有Safari、

2、ChrOmeO WebKit是一個開源項Ll,主要用于MaCOS系統(tǒng), 它的特點在于源碼結(jié)構(gòu)清晰、渲染速度極快。缺點是對網(wǎng)頁代碼的兼容性不高， 導致一些編寫不標準的網(wǎng)頁無法正常顯示。4、PreSto 內(nèi)核代表作品C）Pera。PreStO是山OPeraSOftWare開發(fā)的瀏覽器排版引擎,供OPera 7.0及以上使用。1.2說說你對瀏覽器內(nèi)核的理解?瀏覽器內(nèi)核主要包括以下三個技術(shù)分支：排版渲染引擎、JaVaSCriPt引擎，以 及其他。排版渲染引擎：主要負責取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等）、整理信息， 以及計算網(wǎng)頁的顯示方式，然后輸出至顯示器JaVaSCriPt引擎：是用來渲染Ja

3、VaSCriPt的，JaVaSCriPt的渲染速度越快，動態(tài) 網(wǎng)頁的展示也越快13 一個頁面從輸入URL到頁面加載顯示完成，這個過程中都 發(fā)生了什么？1 .瀏覽器根據(jù)請求的URL交給DNS域名解析，找到真實IP；2. 瀏覽器根據(jù)IP地址向服務器發(fā)起TCP連接，與瀏覽器建立TCP三次握手a. 客戶端向服務器發(fā)送一個建立連接的請求b. 服務器接到請求后發(fā)送同意連接的信號c. 客戶端接到同意連接的信號后，再次向服務器發(fā)送了確認信號，然后客戶端與 服務器的連接建立成功3. 瀏覽器發(fā)送HTTP請求瀏覽器根據(jù)URL內(nèi)容生成HTTP請求，請求中包含請求文件的位置、請求文 件的方式等等；4服務器處理請求并返回

4、HTTP報文（HTTP響應報文也是山三部分組成：狀態(tài) 碼，響應報頭和響應報文。）：a服務器接到請求后，會根據(jù)HTTP請求中的內(nèi)容來決定如何獲取相應的HTML文件；b. 服務器將得到的HTML文件發(fā)送給瀏覽器；c. 在瀏覽器還沒有完全接收HTML文件時便開始渲染、顯示網(wǎng)頁；d在執(zhí)行HTML中代碼時，根據(jù)需要，瀏覽器會繼續(xù)請求圖片、CSSJavsScript 等文件，過程同請求HTML。5. 斷開連接1.4瀏覽器緩存1 .sessi On StOrage優(yōu)點：可以臨時存儲，關(guān)閉頁面標簽自動回收，不支持跨頁面交互缺點：只能作為臨時存儲，不能存儲持久化2o CalStOrage優(yōu)點：用于長久保存整個網(wǎng)

5、站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時間，直到手動去刪 除。缺點：存在大小限制，IE8以上的IE版本才支持這個屬性；目前所有的瀏覽器 中都會把IOCalStOrage的值類型限定為String類型，這個在對我們?nèi)粘１容^常見 的JSON對象類型需要一些轉(zhuǎn)換3. cookie優(yōu)點：兼容性最好，兒乎所有的瀏覽器都支持缺點：大小有限制，而且每次發(fā)送請求，請求頭里會帶著COOkie -起發(fā)過去， 現(xiàn)在基本大多數(shù)登錄的合法性驗證都是用COOkie驗證的4. userData優(yōu)點：出現(xiàn)的時間比SeSSiOnStOrage要早缺點：IE專門的存儲方式，存儲大小有限，單個文件的大小限制是128KB, 一 個域名下總共可

6、以保存1024KB的文件，文件個數(shù)應該沒有限制。在受限站點里 這兩個值分別是64KB和640KB1.5. HTTP1.5.1 http狀態(tài)碼1.以2x為開頭的都表示請求成功響應.狀態(tài)碼含義200請求成功204請求處理成功，但是沒有資源可以返回206對資源某一部分進行響應，由COntent-Range指宦范圍的實體內(nèi)容。2以3x為開頭的都表示需要進行附加操作以完成請求狀態(tài) 碼含義301永久性重左向，該狀態(tài)碼表示請求的資源已經(jīng)重新分配URI,以后應該使用資源現(xiàn)有的URl302臨時性重圧向。該狀態(tài)碼表示請求的資源已被分配了新的URI,希望用戶（本次）能使用 新的URl訪問。303該狀態(tài)碼表示由于請求

7、對應的資源存在著另一個URI,應使用GET方法立向獲取請求的 資源。304該狀態(tài)碼表示客戶端發(fā)送附簾條件的請求時，服務器端允許請求訪問資源，但未滿足條件的 情況。307臨時重定向。該狀態(tài)碼與302 FOUnd有著相同的含義。3.以4XX的響應結(jié)果表明客戶端是發(fā)生錯誤的原因所在狀態(tài) 碼含義400該狀態(tài)碼表示請求報文中存在語法錯誤。當錯誤發(fā)生時，需修改請求的內(nèi)容后再次發(fā)送 請求。401該狀態(tài)碼表示發(fā)送的請求需要有通過HTTP認證（BASIC認證、DIGEST認證）的認 證信息。403該狀態(tài)碼表明對請求資源的訪問被服務器拒絕了。404該狀態(tài)碼表明服務器上無法找到請求的資源。4以5xx為開頭的響應標頭

8、都表示服務器本身發(fā)生錯誤狀態(tài)碼含義500該狀態(tài)碼表明服務器端在執(zhí)行請求時發(fā)生了錯誤。503該狀態(tài)碼表明服務器暫時處于超負載或正在進行停機維護，現(xiàn)在無法處理請求。1.5.2 URL和URl有什么區(qū)別？URl是統(tǒng)一資源標識符，相當于一個人身份證號碼Web上可用的每種資源如HTML文檔、圖像、視頻片段、程序等都是一個來URl 來定位的URl 般由三部組成 訪問資源的命名機制 存放資源的主機名 資源自身的名稱，山路徑表示，著重強調(diào)于資源。URL是統(tǒng)一資源定位符，相當于一個人的家庭住址URL是Internet上用來描述信息資源的字符串，主要用在各種WWW客戶程序 和服務器程序上，特別是著名的MOSaiC

9、O采用URL可以用一種統(tǒng)一的格式來描 述各種信息資源，包括文件、服務器的地址和目錄等。URL 一般由三部組成 協(xié)議（或稱為服務方式） 存有該資源的主機IP地址（有時也包括端口號） 主機資源的具體地址。如口錄和文件名等1.5.3 HTTP 和 HTTPS 的區(qū)別 HTTPS協(xié)議需要到CA （CertifiCateAuthority,證書頒發(fā)機構(gòu)）申請證 書，一般免費證書較少，因而需要一定費用 HTTP是超文本傳輸協(xié)議，信息是明文傳輸，HTTPS則是具有安全性的 SSL加密傳輸協(xié)議。 HTTP和HTTPS使用的是完全不同的連接方式，用的端口也不一樣， 前者是80,后者是443。 HTTP的連接很簡

10、單，是無狀態(tài)的。HTTPS協(xié)議是由SSL+HTTP協(xié)議 構(gòu)建的可進行加密傳輸、身份認證的網(wǎng)絡協(xié)議，比HTTP協(xié)議安全。（無狀 態(tài)的意思是其數(shù)據(jù)包的發(fā)送、傳輸和接收都是相互獨立的。無連接的意思是 指通信雙方都不長久的維持對方的任何信息。）2. HTML 篇2.1 DoCtyPe作用？標準模式與兼容模式各有什么區(qū)別？你知道多少種DOCtyPe文檔類型1. DOCtyPe 作用告知瀏覽器的解析器用什么文檔標準解析這個文檔。2. 標準模式與兼容模式各有什么區(qū)別？標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止 站點無

11、法工作。簡單的說，就是盡可能的顯示能顯示的東西給用戶看。3. 你知道多少種DOCtyPe文檔類型HTML 4.01中有3種DTD（文檔類型定義）聲明可以選擇:過渡的（TranSitionaI）、 嚴格的（StriCt）和框架的（FrameSet）2.2說說你對語義化的理解?語義化的優(yōu)點有: 代碼結(jié)構(gòu)清晰，易于閱讀，利于開發(fā)和維護 提高用于體驗，在樣式加載失敗時，頁面結(jié)構(gòu)清晰 方便其他設(shè)備解析（如屏幕閱讀器）根據(jù)語義渲染網(wǎng)頁。 有利于搜索引擎優(yōu)化（SEC）,搜索引擎爬蟲會根據(jù)不同的標簽來賦予 不同的權(quán)重語義化標簽主要有title,header, namai n,article,h1h6,ul,o

12、l,address,ca nv as,dialog,aside,secti on,figure,details,mark2.3 HTML與XHTML有什么區(qū)別？ 其基礎(chǔ)語言不同1、XHTML是基于du可擴展標記語言（XML）。2、HTML是基于標準通用標記語言（SGML）。 語法嚴格程度不同1、XHTML語法比較嚴格，存在DTD定義規(guī)則。2、HTML語法要求比較松散，這樣對網(wǎng)頁編寫者來說，比較方便。 可混合應用不同1、XHTML可以混合各種XML應用，比如MathML. SVGo2、HTML不能混合其它XML應用。 大小寫敏感度不同1、XHTML對大小寫敏感，標準的XHTML標簽應該使用小寫。

13、2、HTML對大小寫不敏感。 公布時間不同1、XHTML是2000年W3C公布發(fā)行的。2、HTML4.01是1999年W3C推薦標準。2.4頁導入樣式時,使用Iink和import有什么區(qū)別？1屬性差別。Iink屬于XHTML標簽，而import完全是CSS提供的語法規(guī)則。 Iink標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS,定 義rel連接屬性等，import就只能加載CSS To2加載順序的差別。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link 引用的CSS會同時被加載，而import引用的CSS會等到頁面全部被下載完 再被加載。所以有時候瀏覽import加

14、載CSS的貝面時開始會沒有樣式（就是 閃爍），網(wǎng)速慢的時候還挺明顯.3兼容性的差別。由于import是CSS2.1提出的所以老的瀏覽器不支持， import只有在IE5以上的才能識別，而Iink標簽無此問題。4使用dom控制樣式時的差別。使用javascript控制dom去改變樣式的時候, 只能使用Iink標簽，因為import不是dom可以控制的。2.5 HTlVIL5有哪些新特性?1.語義化標簽語義化標簽使得頁面的內(nèi)容結(jié)構(gòu)化，見名知義標簽描述定義了文檔的頭部區(qū)域定義了文檔的尾部區(qū)域定義文檔的導航定義文檔中的節(jié)（section、區(qū)段）定義頁面獨立的內(nèi)容區(qū)域定義頁面的側(cè)邊欄內(nèi)容用于描述文檔或文

15、檔某個部分的細節(jié)標簽包含details元素的標題定義對話框，比如提示框2 增強型表單新增表單InPUt輸入類型。這些新特性提供了更好的輸入控制和驗證。輸入類型描述COIOr主要用于選取顏色輸入類型描述date從一個日期選擇器選擇一個日期datetime選擇一個日期（UTC時間）datetime-local選擇一個日期和時間（無時區(qū)）包含e-mail地址的輸入域month選擇一個月份number數(shù)值的輸入域range一定范圍內(nèi)數(shù)字值的輸入域SearCh用于搜索域tel定義輸入電話號碼字段time選擇一個時間UrIURL地址的輸入域Week選擇周和年3 新增表單元素:表單元素描述元素規(guī)左輸入域的選

16、項列表，使用元素的IiSt屬性與元素的id綁定表單元素描述提供一種驗證用戶的可靠方法，標簽規(guī)左用于表單的密鑰對生成器字段。用于不同類型的輸岀新增表單屬性 PlaCehOder屬性，簡短的提示在用戶輸入值前會顯示在輸入域上。即我 們常見的輸入框默認提示，在用戶輸入后消失。 required屬性，是一個boolean屬性。要求填寫的輸入域不能為空 Pattern屬性，描述了一個正則表達式用于驗證元素的值。 min和max屬性，設(shè)置元素最小值與最大值。 SteP屬性，為輸入域規(guī)定合法的數(shù)字間隔。 height和Width屬性，用于image類型的標簽的圖像啟J度和寬度。 autofocus屬性，是一

17、個boolean屬性。規(guī)定在頁面加載時，域自動地 獲得焦點。 multiple屬性，是一個boolean屬性。規(guī)定 元素中可選擇多個值。1. 新增視頻和音頻標簽2. CanVaS 繪圖3. SVG繪圖4. 地理定位5. 拖放APl6. Web WOrker7. Web StOrage8. WebSOCket2.6 iframe的優(yōu)缺點？優(yōu)點：1 Jframe能夠原封不動的把嵌入的網(wǎng)頁展現(xiàn)出來。2. 如果有多個網(wǎng)頁引用iframe,那么你只需要修改iframe的內(nèi)容，就可以實現(xiàn) 調(diào)用的每一個頁面內(nèi)容的更改，方便快捷。3. 網(wǎng)頁如果為了統(tǒng)一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用 ifr

18、ame來嵌套，可以增加代碼的可重用。4. 如果遇到加載緩慢的第三方內(nèi)容如圖標和廣告，這些問題可以ill iframe來解 決。缺點：1會產(chǎn)生很多頁面，不容易管理。2.iframe框架結(jié)構(gòu)有時會讓人感到迷惑，如果框架個數(shù)多的話，可能會出現(xiàn)上下、 左右滾動條，會分散訪問者的注意力，用戶體驗度差。3代碼復雜，無法被一些搜索引擎索引到，這一點很關(guān)鍵，現(xiàn)在的搜索引擎爬蟲 還不能很好的處理iframe中的內(nèi)容，所以使用iframe會不利于搜索引擎優(yōu)化。4.很多的移動設(shè)備（PDA手機）無法完全顯示框架，設(shè)備兼容性差。5.iframe框架頁面會增加服務器的http請求，對于大型網(wǎng)站是不可取的。2.7 img中

19、的alt與title屬性alt是圖片加載失敗時，顯示在網(wǎng)頁上的替代文字；title是鼠標放在圖片上面時顯示的文字，title是對圖片的描述與進一步說明；alt是img必要的屬性，而title不是；對于網(wǎng)站SeO優(yōu)化來說，title與alt還有最重要的一點：搜索引擎對圖片意思的判斷，主要靠alt屬性。所以在圖片alt屬性中以簡要的 文字說明，同時包含關(guān)鍵詞，也是頁面優(yōu)化的一部分。條件允許的話，可以在title 屬性里進一步對圖片說明。2.8 HTlVIL的中.如何寫一個值為a = b的屬性值？3. CSS 篇3.1行內(nèi)元素有哪些？塊級元素有哪些？ CSS的盒模型？3.2清除浮動有哪些方武?3.3

20、 CSS選擇符都有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？3.4 CSS3新増偽類有哪些?3.5如何居中div?3.6為什么要初始化CSS?3.7說說你對BFC規(guī)范的理解?一、什么是BFC?BFC全稱：塊級格式化上下文（blockformattingcontext）,簡單來說它就 是一種屬性，這種屬性會影響元素與元素之間的位置、間距二、形成BFC的條件1 float：給元素添加浮動（屬性值為left right,但none除外）2、POSition：給元素添加定位（屬性值為absolute或fixed）3、CIiSPlay：給元素添加 display 屬性（屬性值為 inline-bloc

21、k table-cell 或 table-capti On）4、OVerflow：給元素添加 OVerfIOW 屬性（屬性值為 hidden auto 或 scroll, 但ViSible除外）三、BFC形成后出現(xiàn)的常見問題1、margin重疊問題2、浮動相關(guān)問題3.8講講POSitiOn float display各有哪些取值,它們互相之間會如何影響？3.9純CSS實現(xiàn)三角形1.box 2Width:0px;3height:0px;4border-top:5px SOIid rgba(0j,6j);5border-right:50px SOIid rgba(0jjj);6border-bot

22、tom:50px SOIiCl red;7border-left:5px SOlid rgta(j6jj);84 JS 篇4.1面向?qū)ο?.2什么是閉包？閉包的特性是什么？閉包其實只是一個綁定了執(zhí)行環(huán)境的函數(shù)閉包的特性：1. 封閉性：外界無法訪問閉包內(nèi)部的數(shù)據(jù)，如果在閉包內(nèi)聲明變量，外界是無法 訪問的，除非閉包主動向外界提供訪問接口；2持久性：一般的函數(shù)，調(diào)用完之后，系統(tǒng)會自動注銷函數(shù)，而對于閉包來說， 在外部函數(shù)被調(diào)用之后，閉包依然存在。4.3繼承4.4 DOM操作（添加、移除.移動、復制.創(chuàng)建和查找節(jié)點）4.5介紹一下IWW操作符。NeW操作符具體干了什么？1創(chuàng)建一個空對象，并且this變

23、量引用該對象，同時還繼承了該函數(shù)的原型。 2屬性和方法被加到this引用的對象中。3. 新創(chuàng)建的對象由this所引用，并且最后隱式的返回thiso4.6 HTlVIL5離線存儲4.7 JS的數(shù)據(jù)類型基本數(shù)據(jù)類型：Number、String Boolean、Null、Undefined SymbOl （ES6）, 引用數(shù)據(jù)類型：ObjeCt（在JS中除了基本數(shù)據(jù)類型以外都是對象）詳細請查看：typeof操作符檢測變量的數(shù)據(jù)類型4.8 null 和 Undefined 的區(qū)別4.9 CallO和 appy的區(qū)別傳參方式不同1 fun.call(thisArgjargljarg2jarg3j.);2

24、 fun.apply(thisArg,argl,arg2,arg3,.)4.10深拷貝和淺拷貝4.11 ajax4.12數(shù)組去重4.13 this 對象4.14 eva01 .eval的功能是把對應的字符串解析成JS代碼并運行2. 應該避免使用eval,不安全，而且非常消耗性能（2次，一次是解析成js語句, 一次是執(zhí)行）3. l JSON字符串轉(zhuǎn)換為JSON對象的時候可以用eval（）1 Iet Obj = eval( + Str + )t);4.15什么是UA?4.16什么是事件委托？4.17 PrOmiSePrOmiSe是JaVaSCriPt語言提供的一種標準化的異步管理方式，它的總體思想

25、 是，需要進行io、等待或者其它異步操作的函數(shù)，不返回真實結(jié)果，而返回一 個“承諾”，函數(shù)的調(diào)用方可以在合適的時機，選擇等待這個承諾兌現(xiàn)（通過PrOmiSe的then方法的回調(diào)）。4.18 WindOW.onload 和 documentready 的區(qū)別？哪一個 先執(zhí)行？般情況一個頁面響應加載的順序是，域名解析-加載html-l載js和CSS-加載 圖片等其他信息。WindOW.onload是在DOM文檔樹加載完和所有文件加載完之后執(zhí)行一個函數(shù), 也就是在頁面響應加載的順序中的“加載圖片等其他信息”之后，可以操作DOMO 只能執(zhí)行一次，如果有多個，那么第一次的執(zhí)行會被覆蓋document.r

26、eady是在DOM加載完成后就可以可以對DOM進行操作，也就是 在在“加載js和css”和“加載圖片等其他信息”之間，就可以操作DOM To可以 執(zhí)行多次所以，document.ready函數(shù)只需對DOM樹的等待，而無需對圖像或外部資源 加載的等待，從而執(zhí)行起來更快4.19 Var. Iet和COnSt有什么區(qū)別1. var定義的變量可以跨塊作用域訪問，不可以跨函數(shù)作用域訪問。2.let定義的變量，只能在塊作用域里訪問，不能跨塊訪問，也不能跨函數(shù)訪問； 不允許在相同作用域內(nèi)，重復聲明同一個變量。3. const定義的常量，初始化時必須賦值，只能在塊作用域里使用，不能修改。 詳細請査看：VarX

27、 let、COnSt三者的區(qū)別4.20 JaVaSCriPt啟動后，內(nèi)存中有多少個對象？如何用代碼來 獲得這些信息?5. 前端安全問題5.1 XSS跨站腳本攻擊（XSS）通常指的是通過利用網(wǎng)頁開發(fā)時留下的漏洞，通過巧妙的 方法注入惡意指令代碼到網(wǎng)頁，使用戶加載并執(zhí)行攻擊者惡意制造的網(wǎng)頁程序。 常用的XSS攻擊手段和目的有：1、盜用cookie,獲取敏感信息。2、利用植入Flash,通過CrOSSdorrlain權(quán)限設(shè)置進一步獲取更苛權(quán)限；或者利用JaVa等得到類似的操作。3、利用iframes frame、XMLHttPReqUeSt或上述FlaSh等方式，以（被攻擊） 用戶的身份執(zhí)行一些管理動作，或執(zhí)行一些一般的如發(fā)微博、加好友、發(fā)私信等 操作。4