小編最近在面試，順便總結了一下面試前端中常見的問題。并沒有涉及到一些框架面試，合適初級程序員面試的問題，歡樂前端大佬多多指教。
JS部分
1、JavaScript是一門什么樣的語言，它有哪些特點？
JavaScript 是一種腳本語言，官方名稱為 ECMAScript
JS 的主要特點：
a、語法類似于常見的高級語言，如 C 和 Java；
b、腳本語言，不需要編譯就可以由解釋器直接運行；
c、 變量松散定義，屬于弱類型語言；
d、面向對象的。
JS 最初是為網頁設計而開發的，現在也是Web 開發的重要語言。它支持對瀏覽器（瀏覽器對象模型，BOM）和HTML 文檔（文檔對象模型，DOM）進行操作而使網頁呈現動態的交互特性。
嚴格的說，JS只是ECMAScript 的一種實現，是ECMAScript和BOM、DOM組成的一種Web 開發技術。
2、JavaScript的數據類型有哪些？
基本數據類型：字符串 String、數字 Number、布爾Boolean
復合數據類型：數組 Array、對象 Object
特殊數據類型：Null 空對象、Undefined 未定義
3、根據你的理解,請簡述JavaScript腳本的執行原理?
JavaScript是一種動態、弱類型、基于原型的語言，通過瀏覽器可以直接執行。當瀏覽器遇到<script> 標記的時候，瀏覽器會執行之間的javascript代碼。嵌入的js代碼是順序執行的，每個腳本定義的全局變量和函數，都可以被后面執行的腳本所調用。 變量的調用，必須是前面已經聲明，否則獲取的變量值是undefined。
4、 Javascript的事件流模型都有什么?
“事件冒泡”：事件開始由最具體的元素接受，然后逐級向上傳播
“事件捕捉”：事件由最不具體的節點先接收，然后逐級向下，一直到最具體的
“DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡
5、JavaScript對象的幾種創建方式? (常用)
(a) 工廠模式
<pre class="ql-align-justify" style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232);">function Parent(){
var Child = new Object();
Child.name="Andy愛吃面";
Child.age="22";
return Child;
};
var x = Parent();
</pre>
(b)構造函數方式
<pre class="ql-align-justify" style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232);">function Parent(){
this.name="Andy愛吃面";
this.age="22";
};
var x =new Parent();
</pre>
(c) 原型模式
<pre class="ql-align-justify" style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232);">function Parent(){
};
Parent.prototype.name="Andy愛吃面";
Parent.prototype.age="22";
var x =new Parent();
</pre>
6、DOM操作怎樣添加、移除、移動、復制、創建和查找節點?
（a）創建新節點
<pre class="ql-align-justify" style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232);">createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點
</pre>
（b）添加、移除、替換、插入
<pre class="ql-align-justify" style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232);">appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點
</pre>
（c）查找
<pre class="ql-align-justify" style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232);">getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等于name值的)
getElementById() //通過元素Id，唯一性
</pre>
7、call和.apply的區別是什么？
call方法:
語法：call(thisObj，Object)
定義：調用一個對象的一個方法，以另一個對象替換當前對象。
說明：call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。 如果沒有提供 thisObj 參數，那么 Global 對象被用作 thisObj。
apply方法：
語法：apply(thisObj，[argArray])
定義：應用某一對象的一個方法，用另一個對象替換當前對象。
說明：如果 argArray 不是一個有效的數組或者不是 arguments 對象，那么將導致一個 TypeError。如果沒有提供 argArray 和 thisObj 任何一個參數，那么 Global 對象將被用作 thisObj， 并且無法被傳遞任何參數。
對于apply和call兩者在作用上是相同的，但兩者在參數上有以下區別：
對于第一個參數意義都一樣，但對第二個參數：apply傳入的是一個參數數組，也就是將多個參數組合成為一個數組傳入，而call則作為call的參數傳入（從第二個參數開始）。如 func.call(func1,var1,var2,var3)對應的apply寫法為：func.apply(func1,[var1,var2,var3])同時使用apply的好處是可以直接將當前函數的arguments對象作為apply的第二個參數傳入。
8、談談This對象的理解
this總是指向函數的直接調用者（而非間接調用者）。
如果有new關鍵字，this指向new出來的那個對象在事件中。
this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window。
9、JavaScript原型，原型鏈 ? 有什么特點？
每個對象都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個對象的屬性時如果這個對象內部不存在這個屬性，那么他就會去prototype里找這個屬性，prototype又會有自己的prototype，于是就這樣一直找下去，也就是我們平時所說的原型鏈的概念
關系：instance.constructor.prototype = instance.proto
特點：
JavaScript對象是通過引用來傳遞的，我們創建的每個新對象實體中并沒有一份屬于自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 如果沒有的就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象
10、js內存泄漏的問題
內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那么該對象的內存即可回收。
setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。
閉包、控制臺日志、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）也會引發內存泄漏問題。
11、Javascript垃圾回收機制
(a)、標記清除（mark and sweep）
這是JavaScript最常見的垃圾回收方式，當變量進入執行環境的時候，比如函數中聲明一個變量，垃圾回收器將其標記為“進入環境”，當變量離開環境的時候（函數執行結束）將其標記為“離開環境”。
垃圾回收器會在運行的時候給存儲在內存中的所有變量加上標記，然后去掉環境中的變量以及被環境中變量所引用的變量（閉包），在這些完成之后仍存在標記的就是要刪除的變量了
(b)、引用計數(reference counting)
在低版本IE中經常會出現內存泄露，很多時候就是因為其采用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每個值被使用的次數，當聲明了一個 變量并將一個引用類型賦值給該變量的時候這個值的引用次數就加1，如果該變量的值變成了另外一個，則這個值得引用次數減1，當這個值的引用次數變為0的時 候，說明沒有變量在使用，這個值沒法被訪問了，因此可以將其占用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數為0的值占用的空間。
在IE中雖然JavaScript對象通過標記清除的方式進行垃圾回收，但BOM與DOM對象卻是通過引用計數回收垃圾的，也就是說只要涉及BOM及DOM就會出現循環引用問題。
更多有關JS數組、字符串、閉包等問題，可以參見小編的前三篇文章。
二、CSS部分
1 、介紹一下標準的CSS的盒子模型，行內元素有哪些？塊級元素有哪些
標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin
塊級元素：div ,p,h1,form,ul,li
行內元素：span,a,label,input,img,strong,em;
2、CSS選擇器有哪些？哪些屬性可以繼承？
CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、后代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel="external"]）、偽類選擇器（a:hover, li:nth-child）
可繼承的屬性：font-size, font-family, color
不可繼承的樣式：border, padding, margin, width, height
優先級：!important > [ id > class > tag ]
!important 比內聯優先級高。
3、常見的display有哪些值？說明他們的作用?
inline（默認）–內聯
none–隱藏
block–塊顯示
table–表格顯示
list-item–項目列表
inline-block
4、常見的position有哪些值？說明他們的作用?
static（默認）：按照正常文檔流進行排列；
relative（相對定位）：不脫離文檔流，參考自身靜態位置通過 top, bottom, left, right 定位；
absolute(絕對定位)：參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位；
fixed(固定定位)：所固定的參照對像是可視窗口。
5、為什么要初始化CSS樣式
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
6、display:none與visibility：hidden的區別？
display：none 不顯示對應的元素，在文檔布局中不再分配空間
visibility：hidden 隱藏對應元素，在文檔布局中仍保留原來的空間
7、為什么會出現浮動和什么時候需要清除浮動？清除浮動的方式？
浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由于浮動元素不在文檔流中，所以文檔流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。
a、浮動帶來的問題：
父元素的高度無法被撐開，影響與父元素同級的元素
與浮動元素同級的非浮動元素（內聯元素）會跟隨其后
若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。
b、清除浮動的方式：
父級div定義height
最后一個浮動元素后加空div標簽 并添加樣式clear:both。
包含浮動元素的父標簽添加樣式overflow為hidden或auto
8、CSS3有哪些新特性？
a、CSS3實現圓角（border-radius），陰影（box-shadow），
b.、對文字加特效（text-shadow），線性漸變（gradient），旋轉（transform）
c、transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
9、CSS3新增偽類有那些？
p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素
10、解釋下CSS sprites，以及你要如何在頁面或網站中使用它。
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
11、CSS元素的上下左右居中
<pre style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: Consolas, Menlo, Courier, monospace; font-size: 16px; white-space: pre-wrap; position: relative; line-height: 1.5; color: rgb(153, 153, 153); margin: 1em 0px; padding: 12px 10px; background: rgb(244, 245, 246); border: 1px solid rgb(232, 232, 232);">border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
</pre>
12、頁面導入樣式時，使用link和@import有什么區別？
a、link屬于HTML標簽，除了加載CSS外，還能用于定義RSS，定義rel連接屬性等作用；而@import是CSS提供，只能加載CSS;
b、頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載；
