前端面試筆試知識彙總3（含答案）

另外兩篇文章連結如下：

前端面試筆試知識彙總1（含答案）；

前端面試筆試知識彙總2（含答案）；

結合我的秋招面經來看，效果更佳：2017年秋季校招前端面經（百度，騰訊，網易，華為，樂視等）

以及各個公司校招筆試題回憶錄：各個公司前端筆試題回顧

48、擷取url後面的參數并變為對象

49、常用那幾種浏覽器測試？有哪些核心(Layout Engine)?

　　(Q1) 浏覽器：IE，Chrome，FireFox，Safari，Opera。

　　(Q2) 核心：Trident，Gecko，Presto，Webkit。

50. 說下行内元素和塊級元素的差別？行内塊元素的相容性使用？（IE8 以下）

　　(Q1) 行内元素：會在水準方向排列，不能包含塊級元素，設定width無效，height無效(可以設定line-height)，margin上下無效，padding上下無效。

塊級元素：各占據一行，垂直方向排列。從新行開始結束接着一個斷行。

　　(Q2) 相容性：display:inline-block;*display:inline;*zoom:1;

51.box-sizing常用的屬性有哪些？分别有什麼作用？

　　(Q1)box-sizing: content-box|border-box|inherit;

　　(Q2)content-box:寬度和高度分别應用到元素的内容框。在寬度和高度之外繪制元素的内邊距和邊框(元素預設效果)。

border-box:元素指定的任何内邊距和邊框都将在已設定的寬度和高度内進行繪制。通過從已設定的寬度和高度分别減去邊框和内邊距才能得到内容的寬度和高度。

52. Doctype作用？标準模式與相容模式各有什麼差別?

　　(Q1) <!DOCTYPE>告知浏覽器的解析器用什麼文檔标準解析這個文檔。DOCTYPE不存在或格式不正确會導緻文檔以相容模式呈現。

　　(Q2) 标準模式的排版和JS運作模式都是以該浏覽器支援的最高标準運作。在相容模式中，頁面以寬松的向後相容的方式顯示,模拟老式浏覽器的行為以防止站點無法工作。

53. HTML5 為什麼隻需要寫 <!DOCTYPE HTML>？

　　HTML5不基于 SGML，是以不需要對DTD進行引用，但是需要doctype來規範浏覽器的行為（讓浏覽器按照它們應該的方式來運作）。

而HTML4.01基于SGML,是以需要對DTD進行引用，才能告知浏覽器文檔所使用的文檔類型。

54. 介紹一下你對浏覽器核心的了解？

　　主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和js引擎。

　　渲染引擎：負責取得網頁的内容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或列印機。

　　浏覽器的核心的不同對于網頁的文法解釋會有不同，是以渲染的效果也不相同。所有網頁浏覽器、電子郵件用戶端以及其它需要編輯、顯示網絡内容的應用程式都需要核心。

　　JS引擎則：解析和執行javascript來實作網頁的動态效果。

　　最開始渲染引擎和JS引擎并沒有區分的很明确，後來JS引擎越來越獨立，核心就傾向于隻指渲染引擎。

55. html5有哪些新特性？如何處理HTML5新标簽的浏覽器相容問題？如何區分 HTML 和 HTML5？

(Q1)HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

　　(1)繪畫 canvas;

　　(2)用于媒介回放的 video 和 audio 元素;

　　(3)本地離線存儲 localStorage 長期存儲資料，浏覽器關閉後資料不丢失;

　　(4)sessionStorage 的資料在浏覽器關閉後自動删除;

　　(5)語意化更好的内容元素，比如 article、footer、header、nav、section;

　　(6)表單控件，calendar、date、time、email、url、search;

　　(7)新的技術webworker, websocket, Geolocation;

(Q2)IE8/IE7/IE6支援通過document.createElement方法産生的标簽，

　　可以利用這一特性讓這些浏覽器支援HTML5新标簽，

　　浏覽器支援新标簽後，還需要添加标簽預設的樣式。

　　當然也可以直接使用成熟的架構、比如html5shim，

<!--[if lt IE 9]>

　　<![endif]-->

56. 簡述一下你對HTML語義化的了解？

用正确的标簽做正确的事情。
html語義化讓頁面的内容結構化，結構更清晰，便于對浏覽器、搜尋引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜尋引擎的爬蟲也依賴于HTML标記來确定上下文和各個關鍵字的權重，利于seo;
使閱讀源代碼的人對網站更容易将網站分塊，便于閱讀維護了解。

57. 介紹js的基本資料類型

　　Undefined、Null、Boolean、Number、String

58. js有哪些内置對象？

　　資料封裝類對象：Object、Array、Boolean、Number 和 String

　　其他對象：Function、Arguments、Math、Date、RegExp、Error

59. this對象的了解

　　this總是指向函數的直接調用者（而非間接調用者）；

　　如果有new關鍵字，this指向new出來的那個對象；

　　在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window。

60. eval是做什麼的？

　　它的功能是把對應的字元串解析成JS代碼并運作；

　　應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。

　　由JSON字元串轉換為JSON對象的時候可以用eval，var obj =eval('('+ str +')')。

61. DOM怎樣添加、移除、移動、複制、建立和查找節點

建立新節點

　　　　createDocumentFragment() //建立一個DOM片段

　　　　createElement() //建立一個具體的元素

　　　　createTextNode() //建立一個文本節點

添加、移除、替換、插入

　　　　appendChild()

　　　　removeChild()

　　　　replaceChild()

　　　　insertBefore() //在已有的子節點前插入一個新的子節點

查找

　　　　getElementsByTagName() //通過标簽名稱

　　　　getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等于name值的)

　　　　getElementById() //通過元素Id，唯一性

62. null和undefined的差別？

　　null是一個表示"無"的對象，轉為數值時為0；undefined是一個表示"無"的原始值，轉為數值時為NaN。

undefined：

　　（1）變量被聲明了，但沒有指派時，就等于undefined。

　　（2) 調用函數時，應該提供的參數沒有提供，該參數等于undefined。

　　（3）對象沒有指派的屬性，該屬性的值為undefined。

　　（4）函數沒有傳回值時，預設傳回undefined。

null：

　　（1）作為函數的參數，表示該函數的參數不是對象。

　　（2）作為對象原型鍊的終點。

63. new操作符具體幹了什麼呢?

　　（1）建立一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型。

　　（2）屬性和方法被加入到 this 引用的對象中。

　　（3）新建立的對象由 this 所引用，并且最後隐式的傳回 this 。

64. JSON 的了解？

　　JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。它是基于JavaScript的一個子集。資料格式簡單, 易于讀寫, 占用帶寬小。

　　格式：采用鍵值對，例如：{'age':'12', 'name':'back'}

65. call() 和 apply() 的差別和作用？

　　apply()函數有兩個參數：第一個參數是上下文，第二個參數是參數組成的數組。如果上下文是null，則使用全局對象代替。

　　　　如：function.apply(this,[1,2,3]);

　　call()的第一個參數是上下文，後續是執行個體傳入的參數序列。

　　　　如：function.call(this,1,2,3);

66. 如何擷取UA？

67. HTTP狀态碼知道哪些？

　　100 Continue 繼續，一般在發送post請求時，已發送了http header之後服務端将傳回此資訊，表示确認，之後發送具體參數資訊

　　200 OK 正常傳回資訊

　　201 Created 請求成功并且伺服器建立了新的資源

　　202 Accepted 伺服器已接受請求，但尚未處理

　　301 Moved Permanently 請求的網頁已永久移動到新位置。

　　302 Found 臨時性重定向。

　　303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。

　　304 Not Modified 自從上次請求後，請求的網頁未修改過。

　　400 Bad Request 伺服器無法了解請求的格式，用戶端不應當嘗試再次使用相同的内容發起請求。

　　401 Unauthorized 請求未授權。

　　403 Forbidden 禁止通路。

　　404 Not Found 找不到如何與 URI 相比對的資源。

　　500 Internal Server Error 最常見的伺服器端錯誤。

　　503 Service Unavailable 伺服器端暫時無法處理請求（可能是過載或維護）。

68. 你有哪些性能優化的方法？

　　（1）減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖檔大小控制合适；網頁Gzip，CDN托管，data緩存，圖檔伺服器。

　　（2）前端模闆 JS+資料，減少由于HTML标簽導緻的帶寬浪費，前端用變量儲存ajax請求結果，每次操作本地變量，不用請求，減少請求次數

　　（3）用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。

　　（4）當需要設定的樣式很多時設定className而不是直接操作style。

　　（5）少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。

　　（6）避免使用CSS Expression（css表達式)又稱Dynamic properties(動态屬性)。

　　（7）圖檔預加載，将樣式表放在頂部，将腳本放在底部加上時間戳。

69. 什麼叫優雅降級和漸進增強？

　　優雅降級：web站點在所有新式浏覽器中都能正常工作，如果使用者使用的是老式浏覽器，則代碼會檢查以确認它們是否能正常工作。

由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支援功能的浏覽器增加候選方案，使之在舊式浏覽器上以某種形式降級體驗卻不至于完全失效。

　　漸進增強：從被所有浏覽器支援的基本功能開始，逐漸地添加那些隻有新式浏覽器才支援的功能,向頁面增加無害于基礎浏覽器的額外樣式和功能的。當浏覽器支援時，它們會自動地呈現出來并發揮作用。

70. 哪些常見操作會造成記憶體洩漏？

　　記憶體洩漏指任何對象在您不再擁有或需要它之後仍然存在。

　　垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那麼該對象的記憶體即可回收。

　　setTimeout 的第一個參數使用字元串而非函數的話，會引發記憶體洩漏。

　　閉包、控制台日志、循環（在兩個對象彼此引用且彼此保留時，就會産生一個循環）。

71. 線程與程序的差別

　　一個程式至少有一個程序,一個程序至少有一個線程。

　　線程的劃分尺度小于程序，使得多線程程式的并發性高。

　　另外，程序在執行過程中擁有獨立的記憶體單元，而多個線程共享記憶體，進而極大地提高了程式的運作效率。

　　線程在執行過程中與程序還是有差別的。每個獨立的線程有一個程式運作的入口、順序執行序列和程式的出口。但是線程不能夠獨立執行，必須依存在應用程式中，由應用程式提供多個線程執行控制。

　　從邏輯角度來看，多線程的意義在于一個應用程式中，有多個執行部分可以同時執行。但作業系統并沒有将多個線程看做多個獨立的應用，來實作程序的排程和管理以及資源配置設定。這就是程序和線程的重要差別。

72、JavaScript 運作機制詳解

具體可以參考阮一峰的博文《JavaScript 運作機制詳解：再談Event Loop》

一、JavaScript是單線程？

　　JavaScript的單線程，與它的用途有關。作為浏覽器腳本語言，JavaScript的主要用途是與使用者互動，以及操作DOM。這決定了它隻能是單線程，否則會帶來很複雜的同步問題。比如，假定JavaScript同時有兩個線程，一個線程在某個DOM節點上添加内容，另一個線程删除了這個節點，這時浏覽器應該以哪個線程為準？

是以，為了避免複雜性，從一誕生，JavaScript就是單線程，這已經成了這門語言的核心特征，将來也不會改變。

二、任務隊列

　　JavaScript語言的設計者意識到，這時主線程完全可以不管IO裝置，挂起處于等待中的任務，先運作排在後面的任務。等到IO裝置傳回了結果，再回過頭，把挂起的任務繼續執行下去。于是，所有任務可以分成兩種，一種是同步任務（synchronous），另一種是異步任務

三、事件和回調函數

　　"任務隊列"是一個事件的隊列（也可以了解成消息的隊列），IO裝置完成一項任務，就在"任務隊列"中添加一個事件，表示相關的異步任務可以進入"執行棧"了。主線程讀取"任務隊列"，就是讀取裡面有哪些事件。

　　"任務隊列"中的事件，除了IO裝置的事件以外，還包括一些使用者産生的事件（比如滑鼠點選、頁面滾動等等）。隻要指定過回調函數，這些事件發生時就會進入"任務隊列"，等待主線程讀取。

四、Event Loop

　　主線程從"任務隊列"中讀取事件，這個過程是循環不斷的，是以整個的這種運作機制又稱為Event Loop（事件循環）

五、定時器

　　除了放置異步任務的事件，"任務隊列"還可以放置定時事件，即指定某些代碼在多少時間之後執行。這叫做"定時器"（timer）功能，也就是定時執行的代碼。

73、Css渲染機制

　　當我們的浏覽器獲得html檔案後，會自上而下的加載，并在加載過程中進行解析和渲染。

　　加載說的就是擷取資源檔案的過程，如果在加載的過程中，遇到外部css檔案和圖檔，浏覽器會另外發出一個請求，來擷取css檔案和相應的圖檔，這個請求是異步的，并不會影響html檔案。

　　但是如果遇到JavaScript檔案，html檔案會挂起渲染的線程，等待javascript加載完畢後，html檔案再繼續渲染。

　　為什麼html需要等待javascript呢？因為javascript可能會修改DOM，導緻後續的html資源白白加載，是以html必須等待javascript檔案加載完畢後，再繼續渲染。這也就是為什麼javascript檔案要寫在底部body标簽前的原因。

　　好了，接下來我們介紹渲染的細節，html的渲染過程就是将html代碼按照深度優先周遊來生成DOM樹。

　　css檔案下載下傳完後也會進行渲染，生成相應的CSSOM。

　　當所有的css檔案下載下傳完且所有的CSSOM建構結束後，就會和DOM一起生成Render Tree。

　　接下來，浏覽器就會進入Layout環節，将所有的節點位置計算出來。

　　最後，通過Painting環節将所有的節點内容呈現到螢幕上。

　　我們了解的重排和重繪也就是分别觸發了Layout環節和Painting環節。

74、在網頁中的應該使用奇數還是偶數的字型？為什麼呢？

偶數字号相對更容易和 web 設計的其他部分構成比例關系。比如：當我用了 14 px 的正文字号，我可能會在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的标題字号。
Windows 自帶的點陣宋體（中易宋體）從 Vista 開始隻提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px 時用的是小一号的點陣（即每個字占的空間大了 1 px，但點陣沒變），于是略顯稀疏。

75、水準豎直居中的方法

1、使用flex

2、使用transform

3、塊的大小都知道

前面兩種在不知道容器的大小可以使用，下面這種事需要知道大小的

樹林美麗、幽暗而深邃，但我有諾言尚待實作，還要奔行百裡方可沉睡。 -- 羅伯特·弗羅斯特