請參看我github中的wiki，不定期更新。https://github.com/ivonzhang/Front-End-Developer-Questions/wiki
Welcome to the Front-End-Developer-Questions wiki!
目錄
<a name="JavaScript"></a>
JavaScript部分
- 輸出單擊下列列表中l(wèi)i標(biāo)簽后的值
<ul><li>1</li><li>2</li><li>3</li>...<li>1000</li></ul>
使用事件委托機(jī)制，在ul上綁定單擊事件：
請實(shí)現(xiàn)一個函數(shù)A，執(zhí)行基數(shù)次輸出1，偶數(shù)次輸出2：
var A = (function A(){
var index = 1;
function f(){
if(index % 2 == 1){
console.log(1);
}else{
console.log(2);
}
index++;
}
return f
})()
A();//1
A();//2
A();//1做過前端數(shù)據(jù)監(jiān)控實(shí)現(xiàn)web性能優(yōu)化嗎
http://www.alloyteam.com/2014/03/front-end-data-monitoring/-
Q1：介紹JavaScript的基本數(shù)據(jù)類型。
ES5下共有六種：Undefined，Null，Boolean，Number和String，還含有一種復(fù)雜數(shù)據(jù)類型—Object
-
Q2：JavaScript原型，原型鏈 ? 有什么特點(diǎn)？
1.JS中每個函數(shù)都存在有一個原型對象屬性prototype。并且所有函數(shù)的默認(rèn)原型都是Object的實(shí)例。
2.每個繼承父函數(shù)的子函數(shù)的對象都包含一個內(nèi)部屬性proto。該屬性包含一個指針，指向父函數(shù)的prototype。若父函數(shù)的原型對象的proto屬性為再上一層函數(shù)。在此過程中就形成了原型鏈。
3.原型鏈實(shí)現(xiàn)了繼承。原型鏈存在兩個問題：a 包含引用類型值的原型屬性會被所有實(shí)例共享。b 在創(chuàng)建子類型時，無法向超類型的構(gòu)造函數(shù)中傳遞參數(shù)。特點(diǎn)：JavaScript對象是通過引用來傳遞的，我們創(chuàng)建的每個新對象實(shí)體中并沒有一份屬于自己的原型副本。當(dāng)我們修改原型時，與之相關(guān)的對象也會繼承這一改變。當(dāng)我們需要一個屬性的時，Javascript引擎會先看當(dāng)前對象中是否有這個屬性， 如果沒有的話，就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內(nèi)建對象。 -
Q3：JavaScript有幾種類型的值？（棧：原始數(shù)據(jù)類型和 堆：引用數(shù)據(jù)類型），你能畫一下他們的內(nèi)存圖嗎？
基本數(shù)據(jù)類型存儲在棧中，引用數(shù)據(jù)類型（對象）存儲在堆中，指針放在棧中。兩種類型的區(qū)別是：存儲位置不同；原始數(shù)據(jù)類型直接存儲在棧(stack)中的簡單數(shù)據(jù)段，占據(jù)空間小、大小固定，屬于被頻繁使用數(shù)據(jù)，所以放入棧中存儲；引用數(shù)據(jù)類型存儲在堆(heap)中的對象,占據(jù)空間大、大小不固定,如果存儲在棧中，將會影響程序運(yùn)行的性能；引用數(shù)據(jù)類型在棧中存儲了指針，該指針指向堆中該實(shí)體的起始地址。當(dāng)解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實(shí)體。
-
Q4：Javascript如何實(shí)現(xiàn)繼承？
構(gòu)造繼承，原型繼承，（實(shí)例繼承，拷貝繼承）。構(gòu)造函數(shù)繼承可以將構(gòu)造函數(shù)的屬性拷貝給實(shí)例（＊.call(this,[])）。但是缺點(diǎn)是無法實(shí)現(xiàn)函數(shù)復(fù)用。原型繼承可以實(shí)現(xiàn)函數(shù)復(fù)用，但是所有實(shí)例共享一個屬性，任意一個實(shí)例改變原型屬性都會改變其它實(shí)例的屬性值。推薦采用構(gòu)造函數(shù)繼承傳遞屬性（拷貝），原型繼承傳遞方法.
-
Q5：Javascript創(chuàng)建對象的幾種方式？
1.對象字面量的方式p＝｛｝；2.用function來模擬無參的構(gòu)造函數(shù)，再定義屬性；3.用function模擬構(gòu)造函數(shù)，利用this；4.利用工廠方式（內(nèi)置對象Object）；5.利用原型方式來創(chuàng)建；6.混合方式來創(chuàng)建。
-
Q6：Javascript作用鏈域?
當(dāng)代碼在一個環(huán)境中執(zhí)行時，會創(chuàng)建變量對象的一個作用域鏈。如果是個函數(shù)，則將其活動對象作為變量對象。活動對象在最開始只包含一個arguments對象。而下一個變量對象則來自下一個包含環(huán)境。如此一直延續(xù)到全局執(zhí)行環(huán)境，這種組織形式即為作用域鏈。內(nèi)部函數(shù)可訪問外部變量，外部變量無法訪問內(nèi)部函數(shù)。注意：js沒有塊級作用域，若要形成塊級作用域，可通過
（function（）｛｝）（）；立即執(zhí)行的形式實(shí)現(xiàn)。 -
Q7：談?wù)凾his對象的理解？
this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）；
如果有new關(guān)鍵字，this指向new出來的那個對象；
在事件中，this指向觸發(fā)這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window -
Q8：eval是做什么的？
計(jì)算某個字符串，并執(zhí)行其中的的 JavaScript 代碼。eval(string)。應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執(zhí)行）。由JSON字符串轉(zhuǎn)換為JSON對象的時候可以用eval，var obj =eval('('+ str +')');
-
Q9：什么是window對象? 什么是document對象?
Window對象代表瀏覽器中打開的一個窗口。document對象代表整個HTML文檔。實(shí)際上，document對象是window對象的對象屬性。
-
Q10：null，undefined的區(qū)別？
null表示一個對象被定義了，但存放的是空指針。
undefined 表示這個值不存在。typeof（null）－object；typeof（undefined）－undefined。
-
Q11：["1", "2", "3"].map(parseInt) 答案是多少？
[1,NAN,NAN]
-
Q12：什么是閉包（closure），為什么要用它？
閉包指的是一個函數(shù)可以訪問另一個函數(shù)作用域中變量的函數(shù)。常見的構(gòu)造方法，是在一個函數(shù)內(nèi)部定義另外一個函數(shù)。內(nèi)部函數(shù)可以引用外層的參數(shù)和變量；參數(shù)和變量不會被垃圾回收機(jī)制回收。注意，閉包的原理是作用域鏈，所以閉包訪問的上級作用域中的變量是個對象，其值為其運(yùn)算結(jié)束后的最后一個值。除非用立即執(zhí)行函數(shù)來解決。
閉包常用的兩種應(yīng)用方式：1）函數(shù)作為返回值； 2）函數(shù)作為方法的參數(shù)
-
javascript 代碼中的"use strict";是什么意思 ? 使用它區(qū)別是什么？
use strict是一種ECMAscript 5 添加的（嚴(yán)格）運(yùn)行模式,這種模式使得 Javascript 在更嚴(yán)格的條件下運(yùn)行,使JS編碼更加規(guī)范化的模式,消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為。目前支持的瀏覽器為IE10+，F(xiàn)irefox 4+，Safari 5.1+和Chrome。默認(rèn)支持的糟糕特性都會被禁用，比如不能用with，也不能在意外的情況下給全局變量賦值全局變量的顯示聲明,函數(shù)必須聲明在頂層，不允許在非函數(shù)代碼塊內(nèi)聲明函數(shù),arguments.callee也不允許使用；消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全,限制函數(shù)中的arguments修改，嚴(yán)格模式下的eval函數(shù)的行為和非嚴(yán)格模式的也不相同;提高編譯器效率，增加運(yùn)行速度；為未來新版本的Javascript標(biāo)準(zhǔn)化做鋪墊。
JSONP原理
就是利用<script>標(biāo)簽沒有跨域限制的“漏洞”（歷史遺跡啊）來達(dá)到與第三方通訊的目的。當(dāng)需要通訊時，本站腳本創(chuàng)建一個<script>元素，地址指向第三方的API網(wǎng)址，形如： <script src="http://www.example.net/api?param1=1¶m2=2"></script> 并提供一個回調(diào)函數(shù)來接收數(shù)據(jù)（函數(shù)名可約定，或通過地址參數(shù)傳遞）。 第三方產(chǎn)生的響應(yīng)為json數(shù)據(jù)的包裝（故稱之為jsonp，即json padding），形如： callback({"name":"hax","gender":"Male"}) 這樣瀏覽器會調(diào)用callback函數(shù)，并傳遞解析后json對象作為參數(shù)。本站腳本可在callback函數(shù)里處理所傳入的數(shù)據(jù)。寫出下列代碼的運(yùn)行結(jié)果
var a = {n: 1} var b = a; a.x = a = {n: 2} console.log(a.x);//=>undefined console.log(b.x);//=>{n:2}
參考解析吧：https://segmentfault.com/q/1010000002637728-
如何判斷一個對象是否屬于某個類？
使用instanceof 即if(p instanceof Person){alert('yes');} ；判斷數(shù)據(jù)類型則用typeof
-
new操作符具體干了什么呢?
1、創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型。p.proto = Base.prototype;
2、屬性和方法被加入到 this 引用的對象中。Base.call(p/this)
3、新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this 。 -
說說JavaScript的基本規(guī)范
(1)不要在同一行聲明多個變量。
(2)請使用 ===/!==來比較true/false或者數(shù)值
(3)使用對象字面量替代new Array這種形式
(4)不要使用全局函數(shù)。
(5)Switch語句必須帶有default分支
(6)函數(shù)不應(yīng)該有時候有返回值，有時候沒有返回值。
(7)For循環(huán)必須使用大括號
(8)If語句必須使用大括號
(9)for-in循環(huán)中的變量 應(yīng)該使用var關(guān)鍵字明確限定作用域，從而避免作用域污染。
-
用原生JavaScript的實(shí)現(xiàn)過什么功能嗎？
做過一些插件：圖片輪播
-
Javascript中，有一個函數(shù)，執(zhí)行對象查找時，永遠(yuǎn)不會去查找原型，這個函數(shù)是？
Object.hasOwnProperty(proName)，用于檢查對象是否含有某個屬性。
-
對JSON的了解？
一種數(shù)據(jù)格式；常用兩個函數(shù)：JSON.parse(str)（講str變?yōu)閖son對象）;JSON.stringify(obj)則與前面相反;
-
[].forEach.call($$(""),function(a){ a.style.outline="1px solid #"+(~~(Math.random()(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？
獲取頁面中所有的元素，然后遍歷每個元素，為元素的style屬性增加一個顏色邊框。
-
js延遲加載的方式有哪些？
defer和async屬性、動態(tài)創(chuàng)建DOM方式（用得最多）、按需異步載入js。注：（setTimeOut（js，time））
-
Ajax 是什么? 如何創(chuàng)建一個Ajax？
ajax的全稱：Asynchronous Javascript And XML。所謂異步，在這里簡單地解釋就是：向服務(wù)器發(fā)送請求的時候，我們不必等待結(jié)果，而是可以同時做其他的事情，等到有了結(jié)果它自己會根據(jù)設(shè)定進(jìn)行后續(xù)操作，與此同時，頁面是不會發(fā)生整頁刷新的，提高了用戶體驗(yàn)
-
同步和異步的區(qū)別?
同步強(qiáng)調(diào)的是順序性.誰先誰后.異步則不存在這種順序性.
同步：瀏覽器訪問服務(wù)器請求，用戶看得到頁面刷新，重新發(fā)請求,等請求完，頁面刷新，新內(nèi)容出現(xiàn)，用戶看到新內(nèi)容,進(jìn)行下一步操作。
異步：瀏覽器訪問服務(wù)器請求，用戶正常操作，瀏覽器后端進(jìn)行請求。等請求完，頁面不刷新，新內(nèi)容也會出現(xiàn)，用戶看到新內(nèi)容。 -
如何解決跨域問題?
數(shù)據(jù)格式：jsonp,CORS。
Ajax注意點(diǎn)：
HTTP請求過程：
1.建立TCP連接。
2.Web瀏覽器向Web服務(wù)器發(fā)送請求命令。
3.Web瀏覽器發(fā)送請求頭信息。
4.Web服務(wù)器應(yīng)答。5.Web服務(wù)器發(fā)送應(yīng)答頭信息。
6.Web服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)。
7.Web服務(wù)器關(guān)閉TCP連接。HTTP請求內(nèi)容：
1.HTTP請求的方法或動作。
2.正在請求的URL。
3.請求頭，包含一些客戶端環(huán)境信息。
4.請求體，客戶提交的查詢字符串信息和表單信息。GET 信息獲取，使用URL傳遞參數(shù)，發(fā)送信息數(shù)量限制在2000字符內(nèi)。獲取的數(shù)據(jù)存放在cache中。
POST 信息修改，對發(fā)送信息數(shù)量無限制。用send(data)，注意頭文件setRequestHeader。request.onreadystatechange = function(){ if(request.readyState ==4){ if(request.status == 200){ document.getElementById("searchResult").innerHTML = request.responseText; }else{ alert("發(fā)生錯誤："＋request.status); } } }HTTP狀態(tài)碼（status）:
1XX：信息類，表示收到Web瀏覽器請求，正在進(jìn)一步的處理中。
2XX：成功，表示用戶請求被正確接收，理解和處理。
3XX：重定向，表示請求沒有成功，客戶必須采取進(jìn)一步的動作。
4XX：客戶端錯誤，表示客戶端提交的請求有錯誤。
5XX：服務(wù)器錯誤，表示服務(wù)器不能完成對請求的處理。
readyState屬性：0:請求未初始化；1:服務(wù)器連接已建立。2:請求已接收。3:請求處理中。4:請求完成。
JSON采用鍵值對來編寫。json的長度和xml格式化比起來很短小。json讀寫的速度更快。json可以用js內(nèi)建的方法直接解析，轉(zhuǎn)換成js對象。 -
頁面編碼和被請求的資源編碼如果不一致如何處理？
若請求的資源編碼，如外引js文件編碼與頁面編碼不同。可根據(jù)外引資源編碼方式定義為charset="utf-8"或"gbk"。
-
模塊化開發(fā)怎么做？
-
AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規(guī)范區(qū)別？
(1) 對于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。不過 RequireJS 從 2.0 開始，也改成可以延遲執(zhí)行（根據(jù)寫法不同，處理方式不同）。CMD 推崇 as lazy as possible.
(2)CMD 推崇依賴就近，AMD 推崇依賴前置。 requireJS的核心原理是什么？（如何動態(tài)加載的？如何避免多次加載的？如何 緩存的？）
讓你自己設(shè)計(jì)實(shí)現(xiàn)一個requireJS，你會怎么做？
-
談一談你對ECMAScript6的了解？
- 1 默認(rèn)參數(shù)
以前參數(shù)賦值要在函數(shù)體內(nèi)，但在ES6中，可以：
var link = function(height = 50, color = 'red', url = 'http://azat.co') {
...
}- 2 Template Literals（模板對象）
在ES6中，我們可以使用新的語法$ {NAME}，并把它放在反引號里
以前：var name = 'Your name is ' + first + ' ' + last + '.'; var url = 'http://localhost:3000/api/messages/' + id;現(xiàn)在：
var name = `Your name is ${first} ${last}. `; var url = `http://localhost:3000/api/messages/${id}`;- 3 Multi-line Strings （多行字符串）
現(xiàn)在用反引號就可以，如：
var fourAgreements = `You have the right to be you. You can only be you when you do your best.`;- 4 Destructuring Assignment （解構(gòu)賦值）in ES6
解構(gòu)可能是一個比較難以掌握的概念。先從一個簡單的賦值講起，其中house 和 mouse是key，同時house 和
mouse也是一個變量，在ES5中是這樣：var data = $('body').data(), // data has properties house and mousehouse = data.house, mouse = data.mouse;以及在node.js中用ES5是這樣：
var jsonMiddleware = require('body-parser').jsonMiddleware ; var body = req.body, // body has username and password username = body.username, password = body.password;在ES6，我們可以使用這些語句代替上面的ES5代碼：
var { house, mouse} = $('body').data(); // we'll get house and mouse variables var {jsonMiddleware} = require('body-parser'); var {username, password} = req.body;這個同樣也適用于數(shù)組，非常贊的用法：
var [col1, col2] = $('.column'), [line1, line2, line3, , line5] = file.split('n');我們可能需要一些時間來習(xí)慣解構(gòu)賦值語法的使用，但是它確實(shí)能給我們帶來許多意外的收獲。
- 5 Enhanced Object Literals （增強(qiáng)的對象字面量）in ES6
- 6 Arrow Functions（箭頭函數(shù)） ES6
有了箭頭函數(shù)在ES6中， 我們就不必用that = this或 self = this 或 _this = this 或.bind(this)。例如，下面的代碼用ES5就不是很優(yōu)雅：
var _this = this;$('.btn').click(function(event){ _this.sendData(); })在ES6中就不需要用 _this = this：
$('.btn').click((event) =>{ this.sendData(); })- 7 Promises
- 8 Block-Scoped Constructs Let and Const（塊作用域和構(gòu)造let和const）
- 9 Classes （類）in ES6
- 10 Modules （模塊）
-
ECMAScript6 怎么寫class么，為什么會出現(xiàn)class這種東西?
利用關(guān)鍵字 class ，添加一個構(gòu)造函數(shù)來實(shí)現(xiàn)了，舉例如下：
class baseModel { constructor(options, data) { // class constructor，node.js 5.6暫時不支options= {}, data = []這樣傳參 this.name = 'Base'; this.url = 'http://azat.co/api'; this.data = data; this.options = options; } getName() { // class method console.log(`Class name: ${this.name}`); } }使用extend來繼承:
-
異步加載的方式有哪些？
1.defer（IE）。
2.async（HTML5屬性）。
3.創(chuàng)建script，插入DOM中，加載完畢后callBack。 -
documen.write和 innerHTML的區(qū)別?
document.write是直接將內(nèi)容寫入頁面的內(nèi)容劉，會導(dǎo)致頁面全部重繪，innerHTML將內(nèi)容寫入某個DOM節(jié)點(diǎn)，不會導(dǎo)致頁面全部重繪
-
DOM操作——怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)?
createDocumentFragment();
createElement();
createTextDode();
appendChild();
removeChild().
getElementById() 和 getElementsByTagName() -
.call() 和 .apply() 的含義和區(qū)別？
這兩個方法是屬于function.prototype的方法屬性。兩個函數(shù)的目的都是為了借用別人的方法來調(diào)用,就像調(diào)用自己的一樣。二者唯一的區(qū)別是調(diào)用方法格式不一樣。
fun.call(this,a,b,c,d)
(this為當(dāng)前對象，是未包含當(dāng)前fun函數(shù)的對象，如此調(diào)用之后，this所指對象即擁有了fun函數(shù)，a,b,c,d是固有的屬性)；而apply（）函數(shù)則是
fun.apply(this,args)
(this的含義是相同的，關(guān)鍵是第二個參數(shù)args，這個是函數(shù)的固有屬性，用來存放參數(shù))。由此可見apply（）用于函數(shù)參數(shù)不確定的情況下使用。注意，this可替換成別的具體對象。
-
數(shù)組和對象有哪些原生方法，列舉一下？
LIFO 對應(yīng)的push（）和pull（）；
FIFO對應(yīng)的shift（）和pop（）。
重排序reverse（）和sort（）。toString（）。
改變原數(shù)組的方法：pop()、push()、reverse()、shift()、sort()、splice()、unshift()；
不改變原數(shù)組的方法：concat()、join()、slice()、toString()。 -
JS 怎么實(shí)現(xiàn)一個類。怎么實(shí)例化這個類
(1)構(gòu)造函數(shù)方法： function className（）{}，通過關(guān)鍵字new 來實(shí)例化
(2)object.create方法
JavaScript中的作用域與變量聲明提升？
如何編寫高性能的Javascript？
-
那些操作會造成內(nèi)存泄漏？
閉包、控制臺日志、循環(huán)（在兩個對象彼此引用且彼此保留時，就會產(chǎn)生一個循環(huán)）
JQuery的源碼看過嗎？能不能簡單概況一下它的實(shí)現(xiàn)原理？
-
jQuery.fn的init方法返回的this指的是什么對象？為什么要返回this？
返回的this就是jQuery.fn的實(shí)例.
當(dāng)你使用$()之后，實(shí)際是調(diào)用了new jQuery.fn.init( selector, context )。
jQuery.fn的類體聲明如下：jQuery.fn = jQuery.prototype = { // The current version of jQuery being used jquery: version, constructor: jQuery, // Start with an empty selector selector: "", // The default length of a jQuery object is 0 length: 0, toArray: function() { return slice.call( this ); }, ...... jquery中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來？
jQuery 的屬性拷貝(extend)的實(shí)現(xiàn)原理是什么，如何實(shí)現(xiàn)深拷貝？
-
jquery.extend 與 jquery.fn.extend的區(qū)別？
jQuery.extend(): 把兩個或者更多的對象合并到第一個當(dāng)中。
擴(kuò)展靜態(tài)方法；jQuery.fn.extend():把對象掛載到j(luò)Query的prototype屬性，來擴(kuò)展一個新的jQuery實(shí)例方法。
擴(kuò)展實(shí)例方法；jQuery.extend()是直接用$調(diào)用，jQuery.fn.extend()是用$()調(diào)用，另外jQuery.extend()接收多個對象作為參數(shù)，如果只有一個參數(shù)，則把這個對象的屬性方法附加到j(luò)Query上，如果含有多個參數(shù)，則把后面的對象的屬性和方法附加到第一個對象上 -
jQuery 的隊(duì)列是如何實(shí)現(xiàn)的？隊(duì)列可以用在哪些地方？
jQuery核心中, 有一組隊(duì)列控制方法, 這組方法由queue()/dequeue()/clearQueue()三個方法組成, 它對需要連續(xù)按序執(zhí)行的函數(shù)的控制可以說是簡明自如, 主要應(yīng)用于animate ()方法, ajax以及其他要按時間順序執(zhí)行的事件中
-
談一下Jquery中的bind(),live(),delegate(),on()的區(qū)別？
bind(type,[data],fn) 為每個匹配元素的特定事件綁定事件處理函數(shù)
$("a").bind("click",function(){alert("ok");});live(type,[data],fn) 給所有匹配的元素附加一個事件處理函數(shù)，即使這個元素是以后再添加進(jìn)來的
$("a").live("click",function(){alert("ok");});delegate(selector,[type],[data],fn) 指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時運(yùn)行的 函數(shù)
$("#container").delegate("a","click",function(){alert("ok");})on(events,[selector],[data],fn)在選擇元素上綁定一個或多個事件的事件處理函數(shù)
差別：
.bind()是直接綁定在元素上
.live()則是通過冒泡的方式來綁定到元素上的。更適合列表類型的，綁定到document DOM節(jié)點(diǎn)上。和.bind()的優(yōu)勢是支持動態(tài)數(shù)據(jù)。
.delegate()則是更精確的小范圍使用事件代理，性能優(yōu)于.live()
.on()則是最新的1.9版本整合了之前的三種方式的新事件綁定機(jī)制 JQuery一個對象可以同時綁定多個事件，這是如何實(shí)現(xiàn)的？
-
是否知道自定義事件。jQuery里的fire函數(shù)是什么意思，什么時候用？
jQuery的事件自定義事件還是通過on綁定的，然后再通過trigger來觸發(fā)這個事件,如下：
//給element綁定hello事件 element.bind("hello",function(){ alert("hello world!"); }); //觸發(fā)hello事件 element.trigger("hello");例子中就自定義了一個hello事件，通過trigger來觸發(fā)，還可以傳遞參數(shù)，
trigger(tpye[,datea])方法有兩個參數(shù)，第一個參數(shù)是要觸發(fā)的事件類型，第二個單數(shù)是要傳遞給事件處理函數(shù)的附加數(shù)據(jù)，以數(shù)組形式傳遞。 -
jQuery 是通過哪個方法和 Sizzle 選擇器結(jié)合的？
當(dāng)$函數(shù)的參數(shù)類型為string時，jQuery.fn.find()進(jìn)入Sizzle
-
針對 jQuery性能的優(yōu)化方法？
- 總是從ID選擇器開始繼承
- 在class前使用tag(標(biāo)簽名)
- 將jQuery對象緩存起來，即先通過選擇器找出jQuery對象賦值給一個變量，然后利用已賦值的變量進(jìn)行各種綁定和操作，.click, .css 等等
- 對直接的DOM操作進(jìn)行限制,這里的基本思想是在內(nèi)存中建立你確實(shí)想要的東西，然后更新DOM。直接操作dom太慢了。
- 除非在特殊情況下, 否則每一個js事件(例如:click, mouseover等.)都會冒泡到父級節(jié)點(diǎn)。當(dāng)我們需要給多個元素調(diào)用同個函數(shù)時這點(diǎn)會很有用。代替這種效率很差的多元素事件監(jiān)聽的方法就是, 你只需向它們的父節(jié)點(diǎn)綁定一次。
- 推遲到 $(window).load
- 壓縮JavaScript
- 盡量使用ID代替Class
- 給選擇器一個上下文,jQuery( expression, context ),如：
$('.myDiv' , $("#listItem") )在列表#listItem中尋找.myDiv - 慎用 .live()方法（應(yīng)該說盡量不要使用）
-
Jquery與jQuery UI有啥區(qū)別？
jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。
jQuery UI則是在jQuery的基礎(chǔ)上，利用jQuery的擴(kuò)展性，設(shè)計(jì)的插件。提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等
JQuery的源碼看過嗎？能不能簡單說一下它的實(shí)現(xiàn)原理？
-
jquery中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來？
jquery中沒有這樣將數(shù)組直接轉(zhuǎn)換為json字符串的方法。但可以通過擴(kuò)展來實(shí)現(xiàn)：
$.fn.stringifyArray = function(array) { return JSON.stringify(array) } $.fn.parseArray = function(array) { return JSON.parse(array) }然后調(diào)用：
$("").stringifyArray(array)
jQuery和Zepto的區(qū)別？各自的使用場景？
-
針對 jQuery 的優(yōu)化方法？
基于Class的選擇性的性能相對于Id選擇器開銷很大，因?yàn)樾璞闅v所有DOM元素。
頻繁操作的DOM，先緩存起來再操作。用Jquery的鏈?zhǔn)秸{(diào)用更好。
比如：var str=$("a").attr("href");for (var i = size; i < arr.length; i++) {}
for 循環(huán)每一次循環(huán)都查找了數(shù)組 (arr) 的.length 屬性，在開始循環(huán)的時候設(shè)置一個變量來存儲這個數(shù)字，可以讓循環(huán)跑得更快：
for (var i = size, length = arr.length; i < length; i++) {}
Zepto的點(diǎn)透問題如何解決？
jQueryUI如何自定義組件?
需求：實(shí)現(xiàn)一個頁面操作不會整頁刷新的網(wǎng)站，并且能在瀏覽器前進(jìn)、后退時正確響應(yīng)。給出你的技術(shù)實(shí)現(xiàn)方案？
如何判斷當(dāng)前腳本運(yùn)行在瀏覽器還是node環(huán)境中？（阿里）
-
移動端最小觸控區(qū)域是多大？
44*44?
-
jQuery 的 slideUp動畫 ，如果目標(biāo)元素是被外部事件驅(qū)動, 當(dāng)鼠標(biāo)快速地連續(xù)觸發(fā)外部元素事件, 動畫會滯后的反復(fù)執(zhí)行，該如何處理呢?
網(wǎng)上找到的，沒試過，不知道對不對？
1、在觸發(fā)元素上的事件設(shè)置為延遲處理, 即可避免滯后反復(fù)執(zhí)行的問題（使用setTimeout）2、在觸發(fā)元素的事件時預(yù)先停止所有的動畫，再執(zhí)行相應(yīng)的動畫事件（使用stop）
$("#div").stop();//停止當(dāng)前動畫，繼續(xù)下一個動畫$("#div").stop(true);//清除元素的所有動畫 $("#div").stop(false, true);//讓當(dāng)前動畫直接到達(dá)末狀態(tài) ，繼續(xù)下一個動畫 $("#div").stop(true, true);//清除元素的所有動畫，讓當(dāng)前動畫直接到達(dá)末狀態(tài)這里推薦使用第二種方法：
$("#div").stop().animate({width:"100px"},100);
把 Script 標(biāo)簽 放在頁面的最底部的body封閉之前 和封閉之后有什么區(qū)別？瀏覽器會如何解析它們？
-
移動端的點(diǎn)擊事件的有延遲，時間是多久，為什么會有？ 怎么解決這個延時？
click 有 300ms 延遲,為了實(shí)現(xiàn)safari的雙擊事件的設(shè)計(jì)，瀏覽器要知道你是不是要雙擊操作。
300ms。因?yàn)闉g覽器想看看你是不是要進(jìn)行雙擊（double tap）操作。引入插件fastclick.js可以解決，Chrome瀏覽器在安卓設(shè)備上的時候，設(shè)置meta頭信息中 user-scalable=no 但是這樣就無法讓用戶多點(diǎn)觸控縮放網(wǎng)頁了。
知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能講出他們各自的優(yōu)點(diǎn)和缺點(diǎn)么?
Underscore 對哪些 JS 原生對象進(jìn)行了擴(kuò)展以及提供了哪些好用的函數(shù)方法？
解釋JavaScript中的作用域與變量聲明提升？
-
那些操作會造成內(nèi)存泄漏？
內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對象，并計(jì)算引用了每個對象的其他對象的數(shù)量。如果一個對象的引用數(shù)量為 0（沒有其他對象引用過該對象），或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的，那么該對象的內(nèi)存即可回收。setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏。
閉包、控制臺日志、循環(huán)（在兩個對象彼此引用且彼此保留時，就會產(chǎn)生一個循環(huán)） JQuery一個對象可以同時綁定多個事件，這是如何實(shí)現(xiàn)的？
Node.js的適用場景？
(如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
解釋一下 Backbone 的 MVC 實(shí)現(xiàn)方式？
什么是“前端路由”?什么時候適合使用“前端路由”? “前端路由”有哪些優(yōu)點(diǎn)和缺點(diǎn)?
知道什么是webkit么? 知道怎么用瀏覽器的各種工具來調(diào)試和debug代碼么?
如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎么測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
簡述一下 Handlebars 的基本用法？
簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
-
用js實(shí)現(xiàn)千位分隔符?(來源：前端農(nóng)民工，提示：正則+replace)
function commafy(num) { num = num + ''; var reg = /(-?d+)(d{3})/; if(reg.test(num)){ num = num.replace(reg, '$1,$2'); } return num; } -
檢測瀏覽器版本版本有哪些方式？
功能檢測、userAgent特征檢測
比如：navigator.userAgent
//"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36" 我們給一個dom同時綁定兩個點(diǎn)擊事件，一個用捕獲，一個用冒泡，你來說下會執(zhí)行幾次事件，然后會先執(zhí)行冒泡還是捕獲
參考:http://www.cnblogs.com/greatluoluo/p/5882508.html-
js中的變量提升？
理解這個，首先要理解作用域，在此不做詳述。
-
在javascript，變量有4種基本方式進(jìn)入作用域：
1 語言內(nèi)置：所有的作用域里都有this和arguments；(譯者注：經(jīng)過測試arguments在全局作用域是不可見的)
2 形式參數(shù)：函數(shù)的形式參數(shù)會作為函數(shù)體作用域的一部分；
3 函數(shù)聲明：像這種形式：function foo(){}；
4 變量聲明：像這樣：var foo；
理解變量提升：函數(shù)聲明和變量聲明總是會被解釋器悄悄地被“提升”到方法體的最頂部，而賦值在后，如：function foo() { bar(); var x = 1; }實(shí)際上被解析為：
function foo() { var x; bar(); x = 1; }
<a name="css"></a>
CommonJs，AMD，CMD規(guī)范
參考CommonJS，AMD，CMD談?wù)勀銓η岸四K化的理解
前端模塊話就是把復(fù)雜的文件分成一個個獨(dú)立的模塊，比如js文件，分成獨(dú)立的模塊之后有利于代碼的重用和維護(hù)，但是這樣又會引來模塊與模塊之間的依賴問題，所以就有了CommonJS、AMD、CMD規(guī)范，最后出現(xiàn)了webpack，webpack就是前端模塊話的一種解決方案，基本上大公司都會使用webpack，想要詳細(xì)的學(xué)習(xí)webpack的話請看webpack簡明使用教程優(yōu)雅降級和漸進(jìn)增強(qiáng)
優(yōu)雅降級指的是一開始就構(gòu)建功能完好的網(wǎng)站，然后在慢慢兼容低版本的瀏覽器，使得各個瀏覽器之間的差異不要太大。
漸進(jìn)增強(qiáng)是指在基本功能得到滿足的情況下，對支持新特性的瀏覽器使用新特性，帶給用戶更換的體驗(yàn)。
優(yōu)雅降級和漸進(jìn)增強(qiáng)的出發(fā)點(diǎn)不同，前者是慢慢向下兼容，是向后看，后著是慢慢向上，增強(qiáng)功能，是向前看。前端優(yōu)化（提高網(wǎng)頁的加載速度）
1、使用css sprites，可以有效的減少http請求數(shù)
2、使用緩存
3、壓縮js，css文件，減小文件體積
4、使用cdn，減小服務(wù)器負(fù)擔(dān)
5、懶加載圖片
6、預(yù)加載css，js文件
7、避免dom結(jié)構(gòu)的深層次嵌套
8、給DOM元素添加樣式時，把樣式放到類中，直接給元素添加類，減少重構(gòu)，回流
雅虎前端優(yōu)化35條黃金定律H5標(biāo)簽語義化
標(biāo)簽語義化，比如header，footer，nav，aside，article，section等，新增了很多表單元素，入email，url等，除去了center等樣式標(biāo)簽，還有除去了有性能問題的frame，frameset等標(biāo)簽。
html5的語義化指的是用正確的標(biāo)簽包含正確的內(nèi)容，比如nav標(biāo)簽，里面就應(yīng)該包含導(dǎo)航條的內(nèi)容，而不是用做其他的用途，標(biāo)簽語義化的好處就是結(jié)構(gòu)良好，便于閱讀，方便威化，也有利于爬蟲的查找，提高搜索率。事件委托是什么
讓利用事件冒泡的原理，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行！”==”和“===”的不同
前者會自動轉(zhuǎn)換類型；后者不會。
CSS部分
移動web常見兼容性問題
支付寶移動Web解決方案：http://am-team.github.io/amg/dev-exp-doc.html#webkit-css
移動web問題小結(jié)：http://www.alloyteam.com/2015/06/yi-dong-web-wen-ti-xiao-jie/包含塊 Containing Block（CB）
可以理解為一個矩形，而這個矩形的作用是為它里面包含的元素提供一個參考，元素的尺寸和位置的計(jì)算往往是由該元素所在的包含塊決定的。參考http://www.ddcat.net/blog/?p=1336
BFC:http://m.blog.csdn.net/article/details?id=24968987
-
介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
（1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區(qū) 別： IE的content部分把 border 和 padding計(jì)算了進(jìn)去; -
CSS選擇符有哪些？哪些屬性可以繼承？
1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a:hover, li:nth-child）可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border padding margin width height ;
-
CSS優(yōu)先級算法如何計(jì)算？
優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);
載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級為:
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級高 -
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> 元素。:after 在元素之前添加內(nèi)容,也可以用來做清除浮動。
:before 在元素之后添加內(nèi)容:enabled
:disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。 -
如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
-
水平居中：給div設(shè)置一個寬度，然后添加margin:0 auto屬性
div{ width:200px; margin:0 auto; } -
讓絕對定位的div居中
div { position: absolute; width: 300px; height: 300px margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /* 方便看效果 */ } -
水平垂直居中一
確定容器的寬高 寬500 高 300 的層設(shè)置層的外邊距
div { position: relative; /* 相對定位或絕對定位均可 */ width:500px; height:300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; /* 外邊距為自身寬高的一半 */ background-color: pink; /* 方便看效果 */ } -
水平垂直居中二
未知容器的寬高，利用
transform屬性div { position: absolute; /* 相對定位或絕對定位均可 */ width:500px; height:300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; /* 方便看效果 */ } -
水平垂直居中三
利用 flex 布局實(shí)際使用時應(yīng)考慮兼容性
.container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ } .container div { width: 100px; height: 100px; background-color: pink; /* 方便看效果 */ }
-
-
display有哪些值？說明他們的作用。
block 塊類型。默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示。
none 缺省值。象行內(nèi)元素類型一樣顯示。
inline 行內(nèi)元素類型。默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示。inline-block 默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示。
list-item 象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。
table 此元素會作為塊級表格來顯示。
inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。 position的值relative和absolute定位原點(diǎn)是？
absolute
生成絕對定位的元素，相對于值不為 static的第一個父元素進(jìn)行定位。
fixed （老IE不支持）
生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。
relative
生成相對定位的元素，相對于其正常位置進(jìn)行定位。
static
默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right z-index 聲明）。
inherit
規(guī)定從父元素繼承 position 屬性的值。-
CSS3有哪些新特性？
新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節(jié)點(diǎn)）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影和反射 （box-hadow\box-reflect）
文字特效 （text-shadow）
文字渲染 （text-decoration）
線性漸變 （gradient）
旋轉(zhuǎn) （transform）
增加了旋轉(zhuǎn),縮放,定位,傾斜,動畫，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation: 請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
-
用純CSS創(chuàng)建一個三角形的原理是什么？
把上、左、右三條邊隱藏掉（顏色設(shè)為 transparent）
#demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; } -
一個滿屏 品 字布局 如何設(shè)計(jì)?
簡單的方式：
上面的div寬100%，
下面的兩個div分別寬50%，
然后用float或者inline使其不換行即可 常見兼容性問題？
-
li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
行框的排列會受到中間空白（回車\空格）等的影響，因?yàn)榭崭褚矊儆谧址?這些空白也會被應(yīng)用樣式，占據(jù)空間，所以會有間隔，把字符大小設(shè)為0，就沒有空格了。
-
經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？
png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。
IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。
浮動ie產(chǎn)生的雙倍距離
#box{ float:left; width:10px; margin:0 0 0 100px;}這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(這個符號只有ie6會識別)
漸進(jìn)識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識別。css
.bb{ background-color:#f1ee18;/*所有識別*/ .background-color:#00deff\9; /*IE6、7、8識別*/ +background-color:#a200ff;/*IE6、7識別*/ _background-color:#1e0bd1;/*IE6識別*/ }
IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性。
解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。
IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。
解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。
Chrome 中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
-
為什么要初始化CSS樣式。
因?yàn)闉g覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。
當(dāng)然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法：
* {padding: 0; margin: 0;} （強(qiáng)烈不建議）淘寶的樣式初始化代碼：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; } -
absolute的containing block計(jì)算方式跟正常流有什么不同？
無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
1、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形；
2、否則,則由這個祖先元素的 padding box 構(gòu)成。
如果都找不到，則為 initial containing block。補(bǔ)充：
1. static(默認(rèn)的)/relative：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分）
2. absolute: 向上找最近的定位為absolute/relative的元素
3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區(qū)別？
position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？
對BFC規(guī)范(塊級格式化上下文：block formatting context)的理解？
-
CSS權(quán)重優(yōu)先級是如何計(jì)算的？
以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：
/*權(quán)重為1*/ div{ } /*權(quán)重為10*/ .class1{ } /*權(quán)重為100*/ #id1{ } /*權(quán)重為100+1=101*/ #id1 div{ } /*權(quán)重為10+1=11*/ .class1 div{ } /*權(quán)重為10+10+1=21*/ .class1 .class2 div{ }如果權(quán)重相同，則最后定義的樣式會起作用，但是應(yīng)該避免這種情況出現(xiàn)
請解釋一下為什么會出現(xiàn)浮動和什么時候需要清除浮動？清除浮動的方式
移動端的布局用過媒體查詢嗎？
-
使用 CSS 預(yù)處理器嗎？喜歡那個？
SASS (SASS、LESS沒有本質(zhì)區(qū)別，只因?yàn)閳F(tuán)隊(duì)
前端都是用的SASS) CSS優(yōu)化、提高性能的方法有哪些？
瀏覽器是怎樣解析CSS選擇器的？
在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？
margin和padding分別適合什么場景使用？
抽離樣式
模塊怎么寫，說出思路，有無實(shí)踐經(jīng)驗(yàn)？[阿里航旅的面試題]
元素豎向的百分比設(shè)定是相對于容器的高度嗎？
全屏滾動的原理是什么？用到了CSS的那些屬性？
什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE？
視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現(xiàn)，和只出現(xiàn)一次分別怎么做？）
::before 和 :after中雙冒號和單冒號 有什么區(qū)別？解釋一下這2個偽元素的作用。
如何修改chrome記住密碼后自動填充表單的黃色背景 ？
你對line-height是如何理解的？
設(shè)置元素浮動后，該元素的display值是多少？（自動變成display:block）
怎么讓Chrome支持小于12px 的文字？
讓頁面里的字體變清晰，變細(xì)用CSS怎么做？（-webkit-font-smoothing: antialiased;）
font-style屬性可以讓它賦值為“oblique” oblique是什么意思？
position:fixed;在android下無效怎么處理？
-
如果需要手動寫動畫，你認(rèn)為最小時間間隔是多久，為什么？（阿里）
多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms
-
display:inline-block 什么時候會顯示間隙？(攜程)
移除空格、使用margin負(fù)值、使用font-size:0、letter-spacing、word-spacing
overflow: scroll時不能平滑滾動的問題怎么處理？
有一個高度自適應(yīng)的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？
-
什么是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎么做）
如果靜態(tài)文件都放在主域名下，那靜態(tài)文件請求的時候都帶有的cookie的數(shù)據(jù)提交給server的，非常浪費(fèi)流量，
所以不如隔離開。因?yàn)閏ookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數(shù)據(jù)，
這樣可以降低請求頭的大小，降低請求時間，從而達(dá)到降低整體請求延時的目的。同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環(huán)節(jié)，
提高了webserver的http請求的解析速度。 style標(biāo)簽寫在body后與body前有什么區(qū)別？
<a name="HTML"></a>
HTML部分
-
Doctype作用？嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
(1）<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html> 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。
(2）標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
-
HTML5 為什么只需要寫 <!DOCTYPE HTML>？
HTML5 不基于 SGML，因此不需要對DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）；而HTML4.01基于SGML,所以需要對DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。
-
行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
首先：CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認(rèn)的display值，如div的display默認(rèn)值為“block”，則為“塊級”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。
（1）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：<br> <hr> <img> <input> <link> <meta>
鮮為人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr> -
頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？
（1）link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題;
-
介紹一下你對瀏覽器內(nèi)核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。
-
常見的瀏覽器內(nèi)核有哪些？
- Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
- Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
- Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
- Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
-
html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
-
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術(shù)webworker, websocket, Geolocation;移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes； -
支持HTML5新標(biāo)簽：
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，
瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。當(dāng)然也可以直接使用成熟的框架、比如html5shim;
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->``` * 如何區(qū)分HTML5： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素 -
簡述一下你對HTML語義化的理解？
用正確的標(biāo)簽做正確的事情。
html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。-
HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
在用戶沒有與因特網(wǎng)連接時，可以正常訪問站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時，更新用戶機(jī)器上的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機(jī)制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示。如何使用：
1、頁面頭部像下面一樣加入一個manifest的屬性；
2、在cache.manifest文件的編寫離線存儲的資源，寫法如下：CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html3、在離線狀態(tài)時，操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)。
詳細(xì)的使用請參考：有趣的HTML5：離線存儲貌似這方案已經(jīng)失效了？？？ -
瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢？
在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進(jìn)行離線存儲。離線的情況下，瀏覽器就直接使用離線存儲的資源。
-
請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）。
cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞。
sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。存儲大小：
cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大。有期時間：
localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)；
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除。
cookie 設(shè)置的cookie過期時間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉 -
iframe有那些缺點(diǎn)？
iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
-
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點(diǎn)。如果需要使用iframe，最好是通過javascript
動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個問題。
-
Label的作用是什么？是怎么用的？（加 for 或 包裹）
label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。<label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label> -
HTML5的form如何關(guān)閉自動完成功能?
給不想要提示的 form 或某個 input 設(shè)置為 autocomplete=off。
-
如何實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信? (阿里)
WebSocket、SharedWorker；
也可以調(diào)用localstorge、cookies等本地存儲方式；localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發(fā)一個事件，
我們通過監(jiān)聽事件，控制它的值來進(jìn)行頁面信息通信；
注意quirks：Safari 在無痕模式下設(shè)置localstorge值時會拋出 QuotaExceededError 的異常； -
webSocket如何兼容低瀏覽器？(阿里)
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 編碼發(fā)送 XHR 、
基于長輪詢的 XHR -
頁面可見性（Page Visibility）API 可以有哪些用途？
通過 visibilityState 的值檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時間等;
在頁面被切換到其他后臺進(jìn)程的時候，自動暫停音樂或視頻的播放； -
如何在頁面上實(shí)現(xiàn)一個圓形的可點(diǎn)擊區(qū)域？
1、map+area或者svg
2、border-radius
3、純js實(shí)現(xiàn) 需要求一個點(diǎn)在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等 實(shí)現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
<div style="height:1px;overflow:hidden;background:red"></div>-
網(wǎng)頁驗(yàn)證碼是干嘛的，是為了解決什么安全問題？
區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。 -
tite與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？
title屬性沒有明確意義只表示是個標(biāo)題，H1則表示層次明確的標(biāo)題，對頁面信息的抓取也有很大的影響；
strong是標(biāo)明重點(diǎn)內(nèi)容，有語氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時：<strong>會重讀，而<B>是展示強(qiáng)調(diào)內(nèi)容。
i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本；
Physical Style Elements -- 自然樣式標(biāo)簽
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標(biāo)簽
strong, em, ins, del, code
應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽, 但不能濫用, 如果不能確定時首選使用自然樣式標(biāo)簽。
<a name="NODEJS"></a>
Nodejs部分
-
如何更新npm的版本
-
npm -g install npm@3.0.0 后面@跟的是版本號
- 更新node需要兩步：
1）sudo npm install -g n
2）sudo n latest
-
