前端面試常見問答

介紹了面試前端工程師時候的常見問題，有部分沒有答案，各位閒暇之餘可以思考一下這些問題

1. 常用那幾種瀏覽器測試？有哪些核心(Layout Engine)?

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

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

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

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

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

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

3. 清除浮動有哪些方式？比較好的方式是哪一種？

(Q1)

（1）父級div定義height。

（2）結尾處加空div標籤clear:both。

（3）父級div定義偽類:after和zoom。

（4）父級div定義overflow:hidden。

（5）父級div定義overflow:auto。

（6）父級div也浮動，需要定義寬度。

（7）父級div定義display:table。

（8）結尾處加br標籤clear:both。

(Q2) 比較好的是第3種方式，好多網站都這麼用。

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

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

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

border-box:元素指定的任何內邊距和邊框都會在已設定的寬度和高度內進行繪製。透過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

5. Doctype作用？標準模式與相容模式各有什麼區別?

(Q1) 告知瀏覽器的解析器用什麼文檔標準解析這個文檔。 DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。

(Q2) 標準模式的排版和JS運作模式都是以此瀏覽器支援的最高標準運作。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止網站無法運作。

6. HTML5 為什麼只需要寫 ？

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

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

7. 頁面匯入樣式時，使用link和@import有什麼差別？

（1）link屬於XHTML標籤，除了載入CSS外，還能用來定義RSS, 定義rel連結屬性等作用；而@import是CSS提供的，只能用於載入CSS;

（2）當頁面被載入的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題。

8. 介紹一下你對瀏覽器核心的理解？

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

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

瀏覽器的核心的差異對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件用戶端以及其它需要編輯、顯示網頁內容的應用程式都需要內核。

JS引擎則：解析並執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎。

9. 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，

10. 簡述一下你對HTML語義化你對HTML語義化的理解？

用正確的標籤做正確的事情。

html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;

即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;

搜尋引擎的爬蟲也依賴HTML標記來確定上下文和各個關鍵字的權重，利於seo;

使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

JavaScript

1. 介紹js的基本資料型別

Undefined、Null、Boolean、Number、String

Undefined、Null、Boolean、Number、String

2 js裡有哪些物件？

其他物件：Function、Arguments、Math、Date、RegExp、Error

3. this物件的理解

3. this物件的理解

的直接呼叫者（而非間接呼叫者）；

4. eval是做什麼的？

它的功能是把對應的字串解析成JS程式碼並運行；

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

5. DOM如何添加、移除、移動、複製、創建和查找節點

// 创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
// 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
// 查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

6. null和undefined的區別？

null：

7. new操作符具體乾了什麼呢?

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

8. JSON 的了解？

9. call() 和 apply() 的區別和作用？

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

如：function.call(this,1,2,3);10. 如何取得UA？

function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}

1. HTTP狀態碼知道哪些？

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

（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） 圖片預先加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。

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

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

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

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

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

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

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

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

閉包、控制台日誌、循環（在兩個物件彼此引用且彼此保留時，就會產生一個循環）。

5. 執行緒與進程的區別

一個程式至少有一個行程,一個行程至少有一個執行緒。

執行緒的劃分尺度小於進程，使得多執行緒程式的並發性高。

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

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

從邏輯角度來看，多執行緒的意義在於一個應用程式中，有多個執行部分可以同時執行。但作業系統並沒有將多個執行緒看做多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和執行緒的重要區別。

HTML

1.Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?

HTML5 為什麼只需要寫 ？

行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

頁面匯入樣式時，使用link和@import有什麼差別？

介紹一下你對瀏覽器核心的理解？

常見的瀏覽器內核有哪些？

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？

簡述一下你對HTML語意化的理解？

HTML5的離線儲存怎麼使用，運作原理能不能解釋一下？

瀏覽器是怎麼對HTML5的離線儲存資源進行管理與載入的呢？

請描述 cookies，sessionStorage 和 localStorage 的差別？

iframe有那些缺點？

Label的作用是什麼？是怎麼用的？ （加 for 或 包裹）

HTML5的form如何關閉自動完成功能？

如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

webSocket如何相容於低瀏覽器？ (阿里)

頁可見度（Page Visibility）API 可以有哪些用途？

如何在頁面上實現一個圓形的可點擊區域？

實作不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能維持相同效果。

網頁驗證碼是幹嘛的，是為了解決什麼安全問題？

tite與h1的區別、b與strong的區別、i與em的區別？

CSS

介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？

CSS選擇符有哪些？哪些屬性可以繼承？

CSS優先權演算法如何計算？

css3新增偽類有那些？

如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

display有哪些值？說明他們的作用。

position的值relative和absolute定位原點是？

CSS3有哪些新特性？

請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

用純CSS創造一個三角形的原理是什麼？

一個滿屏 品 字佈局 如何設計?

常見相容性問題？

li與li之間有看不見的空白間隔是什麼原因造成的？有什麼解決辦法？

常遇到的瀏覽器的相容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？

為什麼要初始化CSS樣式。

absolute的containing block計算方式跟正常流有什麼不同？

CSS裡的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼差別？

position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

對BFC規範(區塊層級格式化上下文：block formatting context)的理解？

CSS權重優先權是如何計算的？

請解釋為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式

行動端的佈局用過媒體查詢嗎？

使用 CSS 預處理器嗎？喜歡那個？

CSS最佳化、提升效能的方法有哪些？

瀏覽器是怎麼解析CSS選擇器的？

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

margin和padding分別適合什麼場景使用？

抽離樣式模組怎麼寫，說出思路，有無實踐經驗？ [阿里航旅的面試題]元素垂直的百分比設定是相對於容器的高度嗎？

全螢幕滾動的原理是什麼？用到了CSS的那些屬性？

什麼是響應式設計？響應式設計的基本原理是什麼？如何相容於低版本的IE？

視差滾動效果，如何為每頁做不同的動畫？ （回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）

::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。

如何修改chrome記住密碼後自動填入表單的黃色背景 ？

你對line-height是如何理解的？

設定元素浮動後，該元素的display值為何？ （自動變成display:block）

怎麼讓Chrome支援小於12px 的文字？

讓頁裡的字體變得清晰，變細用CSS怎麼做？ （-webkit-font-smoothing: antialiased;）

font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？

position:fixed;在Android下無效怎麼處理？

如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？ （阿里）

display:inline-block 什麼時候會顯示間隙？ (攜程)

overflow: scroll時不能平滑滾動的問題怎麼處理？

有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。

png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？

什麼是Cookie 隔離？ （或者說：請求資源的時候不要讓它帶cookie怎麼做）

style標籤寫在body後與body前有什麼區別？

JavaScript

介紹JavaScript的基本資料類型。

說說寫JavaScript的基本規格？

JavaScript原型，原型鏈 ? 有什麼特色？

JavaScript有幾種類型的值？ （堆：原始資料型別和 棧：引用資料型別），你能畫一下他們的記憶體圖嗎？

Javascript如何實現繼承？

Javascript創建物件的幾種方式？

Javascript作用鏈域?

談談This對象的理解。

eval是做什麼的？

什麼是window物件? 什麼是document物件?

null，undefined的差別？

寫一個通用的事件偵聽器函數(機試題)。

[“1”, “2”, “3”].map(parseInt) 答案是多少？

關於事件，IE與火狐的事件機制有什麼不同？ 如何阻止冒泡？

什麼是閉包（closure），為什麼要用它？

javascript 程式碼中的”use strict”;是什麼意思 ? 使用它區別是什麼？

如何判斷一個物件是否屬於某個類別？

new操作符具體做了什麼?

用原生JavaScript的實作過什麼功能嗎？

Javascript中，有一個函數，執行時物件尋找時，永遠不會去找原型，這個函數是？

對JSON的了解？

[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1

js延遲載入的方式有哪些？

Ajax 是什麼? 如何創建一個Ajax？

同步和非同步的區別?

如何解決跨域問題?

頁面編碼和被要求的資源編碼如果不一致如何處理？

模組化開發怎麼做？

AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

requireJS的核心原理是什麼？ （如何動態載入的？如何避免多次載入的？如何 快取的？）

讓你自己設計實作一個requireJS，你會怎麼做？

談一談你對ECMAScript6的了解？

ECMAScript6 怎麼寫class麼，為什麼會出現class這種東西?

非同步載入的方式有哪些？

documen.write和 innerHTML的區別?

DOM操作——怎麼添加、移除、移動、複製、創建和查找節點?

.call() 和 .apply() 的含義和區別？

數組和物件有哪些原生方法，要列舉一下？

JS 怎麼實作一個類別。怎麼實例化這個類別

JavaScript中的作用域與變數宣告提升？

如何寫出高效能的Javascript？

那些操作會造成記憶體洩漏？

JQuery的源碼看過嗎？能不能簡單概況一下它的實作原理？

jQuery.fn的init方法回傳的this指的是什麼物件？為什麼要回this？

jquery中如何將陣列轉換為json字串，然後再轉換回來？

jQuery 的屬性拷貝(extend)的實作原理是什麼，如何實現深拷貝？

jquery.extend 與 jquery.fn.extend的差別？

jQuery 的隊列是如何實現的？隊列可以用在哪些地方？

談談Jquery中的bind(),live(),delegate(),on()的差別？

JQuery一個物件可以同時綁定多個事件，這是如何實現的？

是否知道自訂事件。 jQuery裡的fire函式是什麼意思，什麼時候用？

jQuery 是透過哪個方法和 Sizzle 選擇器結合的？ （jQuery.fn.find()進入Sizzle）

針對 jQuery效能的最佳化方法？

Jquery與jQuery UI有啥差別？

JQuery的源碼看過嗎？能不能簡單說一下它的實作原理？

jquery 中如何將陣列轉換為json字串，然後再轉換回來？

jQuery和Zepto的差別？各自的使用場景？

針對 jQuery 的最佳化方法？

Zepto的點透問題如何解決？

jQueryUI如何自訂元件?

需求：實作一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確回應。給出你的技術實現方案？

如何判斷目前腳本是運行在瀏覽器還是node環境中？ （阿里）

行動端最小觸控區域是多大？

jQuery 的slideUp動畫，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反覆執行，該如何處理呢?

把Script 標籤放在頁面的最底部的body封閉之前和封閉之後有什麼差別？瀏覽器會如何解析它們？

行動端的點擊事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？ （click 有300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）

知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)麼?能講出他們各自的優點和缺點麼?

Underscore 對哪些JS 原生物件進行了擴展以及提供了哪些好用的函數方法？

解釋JavaScript中的作用域與變數宣告提升？

那些操作會造成記憶體洩漏？

JQuery一個物件可以同時綁定多個事件，這是如何實現的？

Node.js的適用場景？

(如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering麼?

解釋一下 Backbone 的 MVC 實作方式？

什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?

知道什麼是webkit麼? 知道怎麼用瀏覽器的各種工具來調試和debug代碼麼?

如何測試前端程式碼麼?知道BDD, TDD, Unit Test麼?知道怎麼測試你的前端工程麼(mocha, sinon, jasmin, qUnit..)?

前端templating(Mustache, underscore, handlebars)是乾嘛的, 怎麼用?

簡述一下Handlebars 的基本用法？

簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？

用js實現千位分隔符號?(來源：前端農民工，提示：正規+replace)

檢測瀏覽器版本版本有哪些方式？

我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲

其他問題

原來公司工作流程是怎麼樣的，如何與其他人協作的？如何誇大部門合作的？

你遇到過比較難的技術問題是？你是如何解決的？

設計模式 知道什麼是singleton, factory, strategy, decrator麼?

常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或元件？

頁重構怎麼操作？

列舉IE與其他瀏覽器不一樣的特性？

99%的網站都需要被重構是那本書上寫的？

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

是否了解公鑰加密和私鑰加密。

WEB應用從伺服器主動推送Data到客戶端有那些方式？

對Node的優點和缺點提出了自己的看法？

你有用過哪些前端效能最佳化的方法？

http狀態碼有那些？分別代表是什麼意思？

一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼事？ （流程說的越詳細越好）

部分地區用戶反應網站很卡，請問有哪些可能性的原因，以及解決方法？

從打開app到刷新出內容，整個過程中都發生了什麼，如果感覺慢，怎麼定位問題，怎麼解決?

除了前端以外還了解什麼其它技術麼？你最厲害的技能是什麼？

你用的得心應手用的熟練地編輯器&開發環境是什麼樣子？

對前端介面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

你怎麼看待Web App 、hybrid App、Native App？

你行動端前端開發的理解？ （和 Web 前端開發的主要區別是什麼？）

你對加班的看法？

平常如何管理你的專案？

說說最近最流行的一些東西吧？常去哪些網站？

如何設計突發大規模並發架構？

說說最近最流行的一些東西吧？常去哪些網站？

是否了解開源的工具 bower、npm、yeoman、Grunt、gulp，一個 npm 的套件裡的 package.json 具備的必要的字段都有哪些？ （名稱、版本號，依賴）

每個模組的程式碼結構都應該比較簡單，每個模組之間的關係也應該非常清晰，隨著功能和迭代次數越來越多，你會如何去保持這個狀態的？

Git知道branch, diff, merge麼?

如何設計突發大規模並發架構？

當團隊人手不足，把功能代碼寫完已經需要加班的情況下，你會做前端程式碼的測試嗎？

說說最近最流行的一些東西吧？平常常去哪些網站？

知道什麼是SEO並且怎麼優化麼? 知道各種meta data的含義麼?

移動端（Android ios）怎麼做好用戶體驗?

簡單描述一下你做過的移動APP項目研發流程？

你在現在的團隊處於什麼樣的角色，起到了什麼明顯的作用？

你認為怎麼才是全階工程師（Full Stack developer）？

介紹一個你最得意的作品吧？

你有自己的技術部落格嗎，用了哪些技術？

對前端安全有什麼看法？

是否了解Web注入攻擊，說下原理，最常見的兩種攻擊（XSS 和 CSRF）了解什麼程度？

計畫中遇到國哪些印象深刻的技術難題，具體是什麼問題，怎麼解決？ 。

最近在學什麼？

你的優點是什麼？缺點是什麼？

如何管理前端團隊?

最近在學什麼？可以談談你未來3，5年給自己的規劃嗎？