這裡總結一下 WEB 前端面試的常見問題，同時這些問題也是對一些基礎的技術概念和思想的理解。對這些基本知識的掌握程度和深度決定了你的技術層級。高級工程師是必須掌握本文列出的這些知識的，資深工程師則要對這些基本概念的縱向深度進行挖掘。文/YHSPY

前端開發，關鍵技術點雜燴

綜合技術方面:

1、網站和頁面性能優化

緩存：ETag Expire Last-Modified 三者合用，Expire 可以讓瀏覽器完全不發起 Http 請求，若 F5 發起請求，也可以通過判斷 ETag（對應瀏覽器字段 If-None-Match） 和 Last-Modified （對應瀏覽器字段 If-Modified-Since）字段是否需要更新資源還是使用 304(Not Modified) 的本地資源；

靜態資源：代碼壓縮合並、CSS雪碧圖、分析 FTTB 是否採用 CDN、服務器開啟 GZIP 壓縮、圖片壓縮、靜態資源使用獨立域名，防止域名汙染（靜態資源不需要攜帶 Cookie，又叫 Cookie 隔離）；

頁面結構：樣式表放頂部，JS 腳本放底部，不讓 JS 腳本阻礙 DOM 的加載；

代碼優化：縮短原型鏈，減少屬性和方法的查找時間；使用事件代理代替事件綁定；減少對 DOM 的直接操作，減少頁面重繪，使用 H5 新方法 requestAnimationFrame 來進行 DOM 動畫，使用 createElement 代替 innerHTML 進行 DOM 插入，因為它的速度更快；

其他方法：BigPipe 優化、BigRender 優化、Quickling 優化；

2、字體大小常用單位

絕對值：像素px 點pt = (DPI / 72) px；

相對值：一個字的大小em（默認值 1em = 16px，16px 也為瀏覽器的默認字體大小，繼承父元素的大小，為了計算通常設 html { font-size: 63%; }，即 1em = 10px） 相對於根節點的一個字大小rem；

3、CSS Reset

CSS Reset就是由於各種瀏覽器解釋 CSS 樣式的初始值有所不同，導致設計師在沒有定義某個 CSS 屬性時，不同的瀏覽器會按照自己的默認值來為沒有定義的樣式賦值，所以我們要先定義好一些 CSS 樣式，來讓所有瀏覽器都按照同樣的規則解釋 CSS，這樣就能避免發生這種問題。本質就是清除瀏覽器默認樣式，並且進行全局樣式定義，Reset 文件要在項目初期定好，這樣才不會產生後期的迴歸測試問題。

* {
vertical-align: baseline; 

font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}

4、彈性佈局、響應式、重構

彈性佈局：Flexbox 佈局模式，適用於多行多列自適應佈局。

響應式佈局：媒體查詢（Media Queries）和 Viewport（初始比例，最大比例，最大寬度，縮放控制）控制。

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

漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級：一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。

區別：優雅降級是從複雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶。

6、HTML5 主要增強了什麼

增加了很多利於網站 SEO 的語義化標籤如 header、footer、article、nav，功能性標籤 canvas、video、audio 使得瀏覽器可以進一步擺脫插件，websocket、localstorage、websql 等新功能特性，還有很多功能化的標籤屬性如 autocomplete、autofocus，和很常用的 datalist 標籤。

7、Node.js 主要解決了什麼問題

雖然單進程、單線程，但其事件環機制、非阻塞IO，可以高效的處理高併發請求，並且與前端腳本語言統一。

8、提高 CSS 性能

加載性能：壓縮樣式表，不要使用 @import（誕生於 CSS2），@import 使用在低網速下會存在頁面閃爍問題（link 是在加載頁面前把 css 加載完畢，而 @import 則是讀取到引用的文件之後再加載，會延長頁面的留白期）；

選擇器性能：可忽略不計。

渲染性能：用 createDocumentFragment 對象在內存裡操作 DOM、使用 class 替換來代替直接更改樣式、開啟GPU硬件加速；

Repaint(重繪)：當在頁面上修改了一些不需要改變定位的樣式的時候（比如background-color,border-color,visibility)，瀏覽器只會將新的樣式重新繪製給元素（這就叫一次“重繪”或者“重新定義樣式”）。這時只需要屏幕的一部分要重畫。

Reflow(迴流重排)：當頁面上的改變影響了文檔內容、結構或者元素定位時，就會發生重排（或稱“重新佈局”）。

其他：去除空規則：｛｝；屬性值為0時，不加單位；屬性值為浮動小數0.**，可以省略小數點之前的0；標準化各種瀏覽器前綴：帶瀏覽器前綴的在前。標準屬性在後；

9、CSS 預處理

CSS 預處理器用一種專門的編程語言，在編寫 CSS 的過程中可以使用變量、循環、遞歸等特性，然後再編譯成正常的 CSS 文件，可以提高 CSS 編寫效率，常用的預編譯語言有 LESS SESS 等。

10、關於浮動的原理和工作方式

浮動本質就是個帶有方位的 display:inline-block 屬性；會打破同一行的 inline-box 模型；

11、浮動會產生什麼影響呢，要怎麼處理？

會產生高度塌陷，子元素均設置了浮動樣式，父元素會失去高度。

解決方案：父級 div 定義 overflow:hidden、結尾處加空 div 標籤 clear:both、父級 div 定義偽類 :after（最後一個子元素的後邊）和 zoom。

.clearfix{zoom:1;}
.clearfix:after{display:block; content:'.'; clear:both; line-height:0; visibility:hidden;}

12、你瞭解哪些常用 CSS 選擇器？以及這些選擇器的使用場景？

ID 選擇器、類選擇器、偽類選擇器、全局選擇器 ...

權值為1000：代表內聯樣式，如: style=""。

權值為100：代表ID選擇器，如：#content。

權值為10：代表類，偽類和屬性選擇器，如.content。

權值為1：代表類型選擇器和偽元素選擇器，如div p。

*通用選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）的權值都為0。

14、你瞭解哪些佈局？你平時有使用過什麼佈局實現？

彈性佈局（與流體佈局相似，大小單位使用 em）、固定佈局、混合佈局、絕對定位佈局、流體佈局（寬高以百分比計算，配合媒體查詢完成） ...

12、你常用的 JS 框架有哪些？

jQuery、Knockoutjs、VueJs、AngularJs、EmberJs、ReactJs ...（很多 MVVM 框架可以使用）

13、你從jQuery學到了什麼？

看了源碼中一些“類型檢測”函數的實現，jQuery 中的這些方法完成度非常高，實現很全面，性能也是很高的。

class2type = {};
jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) {
class2type["[object " + name + "]"] = name.toLowerCase();
}
type: function(obj) {
return obj == null ? String(obj) : class2type[Object.prototype.toString.call(obj)] || "object";
}
isFunction: function(obj) {
return jQuery.type(obj) === "function";
}
isArray: Array.isArray || function() {
return jQuery.type(obj) === "array";
}

（其他知識點還有很多，異步隊列，數據緩存，事件系統，異步請求等）

14、JS 有哪些數據類型？

null、undefined、數字、字符串、數組、對象、布爾。

15、JS 的數據類型中哪些是引用類型？

數組、對象。

16、原型鏈

（內容太多，請自行 Google）

函數表達式只有函數定義的提升，函數聲明則可以將函數定義和聲明同時提升；函數表達式可以放在任何地方，函數聲明則只能放到全局環境中；

18、什麼是閉包，為什麼要使用閉包？

可以簡單理解為“函數里的函數”，兩個常見作用：一可以讀取函數內部的變量、二讓這些變量的值始終保持在內存中。父函數定義的變量在子函數的作用域鏈中，子函數沒有被銷燬，其作用域鏈中所有變量和函數就會被維護，不會被銷燬。

// 此處在綁定函數時的 i 是沒有問題的，從 0 到 elements.length - 1；只是在子函數中的 i 是一直保持對父環境對象中的 i 的引用的，所以在調用時一直會輸出 elements.length；
for(var i = 0; i < elements.length; i++) {
elements[i].onclick = function() {
alert(i);
}
}
// 用 IIFE 隔離外部環境對象，使父環境對象可以及時釋放；IIFE 中定義的任何變量和函數，都會在執行結束時被銷燬；
for(var i = 0; i < elements.length; i++) {
(function(n){
elements[n].onclick = function() { 

alert(n);
}
})(i);
}

19、DOM 中 Property 和 Attribute 的區別

Attribute 就是 DOM 節點自帶的屬性，例如 div 中常用的 id、class 等；Property 是這個 DOM 元素作為對象，其附加的內容，例如 childNodes、firstChild 等；

自定義的 Attribute 不會附加到 Property 上，對於屬性 Property 的賦值在IE中可能會引起循環引用，內存洩漏。

操作 Attribute 時使用 setAttribute() 和 getAttribute() 來操作，由於 getAttribute() 可能會有瀏覽器兼容性問題，所以在 jQuery 中，會對該方法進行測試：

div1.className = 'a';
var judge = div1.getAttribute("className") === 'a';

對於 style 和 onclick，它們的 Property 和 Attribute 分別是對象和字符串，與其他有所區別。

20、JS 作用域鏈

在一些類 C 的語言中有“塊級作用域”，即花括號的每一段代碼都有自己的獨立作用域，而 JS 只有函數級作用域；JS 作用域鏈的第一個對象始終是當前執行代碼所在環境的變量對象（VO），聲明函數在全局作用域，此時作用域鏈只有一個環境對象；運行函數時作用域鏈頂端加入了函數內的環境對象，運行完畢時頂端環境對象被銷燬，以此類推。

JS 在查找變量時會從鏈的頂端（就近原則）一直向下查找。如果一個跨作用域的對象被引用了一次以上，則先把它存儲到局部變量裡再使用。全局變量總是存在於運行期上下文作用域鏈的最末端，因此在標識符解析的時候，查找全局變量是最慢的。

（最好和閉包一起理解）

21、你對前端有什麼理解？

前端工程化、組件化 ...

22、你覺得前端體系應該是怎樣的？

開發工具、代碼質量、前端框架、前端開發標準、部署流程、代碼組織、代碼安全、移動 Web 開發、前沿技術社區、計算機網絡體系、軟件工程、可視化、瀏覽器、編程語言。

23、Hybrid App

Hybrid App 底層依賴於 Native 提供的容器（UIWebview），上層使用傳統前端技術做業務開發，底層透明化、上層多樣化，這種場景非常有利於前端介入，非常適合業務快速迭代。（詳情需深入研究，筆者這方面研究不多）

24、IFC、BFC、GFC、FFC

IFC：內聯格式化上下文（display:block），容器裡面的子元素不會影響到外面的元素，表示盒子從左到右的水平排列方式；

BFC：塊級格式化上下文（display:inline），表示盒子從上到下的垂直排列方式；

GFC：網格佈局格式化上下文（display:grid）；

FFC：自適應格式化上下文（display:flex）；

Box: CSS佈局的基本單位

Box 是 CSS 佈局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。

Formatting Context

Formatting Context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。最常見的 Formatting Context 有 Block Fomatting Context (簡稱BFC)和 Inline Formatting Context (簡稱 IFC)。

BFC佈局規則

內部的 Box 會在垂直方向，一個接一個地放置。

Box 垂直方向的距離由 margin 決定。屬於同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊。

每個元素的 margin box 的左邊， 與包含塊 border box 的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。

BFC的區域不會與 float box 重疊。

BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。

計算 BFC 的高度時，浮動元素也參與計算。

哪些元素會生成 BFC

根元素、float 屬性不為 none、position 為 absolute 或 fixed、display 為 inline-block, table-cell, table-caption, flex, inline-flex、overflow 不為 visible。

25、JS 垃圾回收機制

標記清除：跟蹤環境對象，即跟蹤作用域鏈，GC 會把那些沒有作用域影響的內存清除掉；

引用計數：即跟蹤記錄每個值被引用的次數，但可能會有“循環引用”的問題；

26、Ajax 流程

// 獲取 XHR 對象
// 設置回調函數
xmlhttp.onreadystatechange = callback;
// 打開一個 XHR 鏈接
xmlhttp.open("GET", url, true);
// POST 請求要設置編碼類型
// xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// 發送請求
xmlhttp.send(null);
function callback() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
console.log(xmlhttp.responseText);
}
}
}

27、Gulp 和 Grunt 的異同點？

Gulp 基於“流”的概念，只有一次 IO 過程，類似於 Linux 裡的管道，又像 jQuery 的鏈式調用；Gulp 更易用；

28、瀏覽器可以並行下載多少個資源？

在 HTTP/1.1 協議下一般是6個，最多不超過8個；

29、你覺得哪些網站前端技術比較好，這些網站的架構怎樣？

舉例：淘寶網，用來很多 H5 的語義化標籤；降級兼容做的很好，對禁用腳本的瀏覽器提供友好的選項；雲客服使用 WS 代替 Ajax 輪詢等；

30、淘寶網上的商品項，如圖片，滾動到了才加載，是怎麼實現的？

應該是 PipeRender 技術的一種，BigRender 的原理是通過某種方式，將首屏不需要的 HTML 代碼先存放起來。渲染好首屏後，再將存儲好的 HTML 代碼逐步渲染出來。

31、你瞭解後端技術麼，前後端一般是怎麼配合的？

筆者公司用的是 CakePHP 和 Laravel 兩套 PHP 框架，Laravel 本身有自己的模板引擎，同時可以與 Gulp 進行無縫銜接；模板會預留出需要替換的變量位置，前後端分離處理；前端模板可以進行模板的繼承與嵌套；

32、安卓上如何實現 1px 像素線？

因為 Retine 屏的分辨率始終是普通屏幕的2倍，導致原本 1px 的細線在手機上顯示為 2px；

IOS8 及以上可以直接使用 border-width: 0.5px; 來設置 1px 的線段，其他平臺可以用 transform 將細線高度縮小一半：

.hairlines li:after {
content: '';
position: absolute;
left: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

33、流應用是什麼？

流應用，結合了原生 App 和 Web App 的優勢，又消除了各自的缺點。流應用建立在 H5+ 這一突破性技術之上，通過強化 HTML5 使其達到原生 App 的功能和體驗，並輔以類似流媒體的邊用邊下發行技術，這2項技術是流應用誕生的關鍵。

34、移動設備瀏覽器的 click 事件 300毫秒延遲

來源於最初的 iOS Safari 瀏覽器在用戶點擊屏幕時會等待 300 毫秒，以判斷用戶是想進行單擊還是進行雙擊縮放。其他瀏覽器也借鑑 Safari 的特性，導致了這一問題。

基本解決：禁用縮放（）、設置（touch-action: none）

完美結局：FastClick 的實現原理是在檢測到 touchend 事件的時候，會通過 DOM 自定義事件立即出發模擬一個 click 事件，並把瀏覽器在300ms之後的 click 事件阻止掉。

34、touchstart 的點擊穿透問題

因為在移動端瀏覽器，事件執行的順序是 touchstart > touchend > click，而 click 事件有300ms的延遲，當 touchstart 事件把B元素隱藏之後，隔了300ms，瀏覽器觸發了 click 事件，但是此時B元素不見了，所以該事件被派發到了A元素身上。如果A元素是一個鏈接，那此時頁面就會意外地跳轉。

閱讀更多 螞蟻大喇叭 的文章

關鍵字: 軟件 Linux CSS