三、link 和@import 的區(qū)別是？
（1）link屬于XHTML標(biāo)簽，而@import是CSS提供的;（2）頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;（3）import只在IE5以上才能識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題;（4）link方式的樣式的權(quán)重 高于@import的權(quán)重.四、瀏覽器的內(nèi)核分別是什么? * IE瀏覽器的內(nèi)核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內(nèi)核原為Presto，現(xiàn)為Blink； / 28
2015前端面試題2015-02
五、常見(jiàn)兼容性問(wèn)題？
* png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.* 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一。* IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。浮動(dòng)ie產(chǎn)生的雙倍距離 #box{ float:left;width:10px;margin:0 0 0 100px;}
這種情況之下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)。接著，再次使用“+”將IE8和IE7、IE6分離開(kāi)來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別。
css
.bb{
background-color:#f1ee18;/*所有識(shí)別*/
.background-color:#00deff9;/*IE6、7、8識(shí)別*/
+background-color:#a200ff;/*IE6、7識(shí)別*/
_background-color:#1e0bd1;/*IE6識(shí)別*/
}
* IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性.解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性.* IE下,even對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性;Firefox下,event對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性.* 解決方法：（條件注釋?zhuān)┤秉c(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。/ 28
2015前端面試題
2015-02 * Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過(guò)加入 CSS 屬性-webkit-text-size-adjust: none;解決.超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
六、html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和 HTML5？
* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。* 繪畫(huà) canvas
用于媒介回放的 video 和 audio 元素
本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
新的技術(shù)webworker, websockt, Geolocation * 移除的元素-純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u； 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
七、支持HTML5新標(biāo)簽：
* IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：
* 當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
八、如何區(qū)分： DOCTYPE聲明新增的結(jié)構(gòu)元素功能元素，語(yǔ)義化的理解？
用正確的標(biāo)簽做正確的事情！
html語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎解析； 在沒(méi)有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲(chóng)依賴(lài)于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于 SEO。使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
九、HTML5的離線儲(chǔ)存？
localStorage
長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失； sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。
十、(寫(xiě))描述一段語(yǔ)義的html代碼吧。
（HTML5中新增加的很多標(biāo)簽（如：、
< div id=“header”> < h1>標(biāo)題< /h1> < h2>專(zhuān)注Web前端技術(shù)< /h2> < /div>
十一、iframe有那些缺點(diǎn)？
*iframe會(huì)阻塞主頁(yè)面的Onload事件；
*iframe和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載。使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過(guò)javascript 動(dòng)態(tài)給iframe添加src屬性值，這樣可以可以繞開(kāi)以上兩個(gè)問(wèn)題。/ 28
2015前端面試題
2015-02
十二、請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。sessionStorage和localStorage不會(huì) sessionStorage和localStorage的存儲(chǔ)空間更大； sessionStorage和localStorage有更多豐富易用的接口； sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間；
十三、如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?(阿里)調(diào)用localstorge、cookies等本地存儲(chǔ)方式
十四、webSocket如何兼容低瀏覽器？(阿里)Adobe Flash Socket、ActiveX HTMLFile(IE)、基于 multipart 編碼發(fā)送 XHR、7 / 28
基于長(zhǎng)輪詢(xún)的 XHR
2015前端面試題2015-02
CSS
一、介紹一下CSS的盒子模型？
（1）有兩種，IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型；IE的content部分包含了 border 和 pading;（2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、邊框(border).二、CSS 選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？ CSS3新增偽類(lèi)有那些？
*
1.id選擇器（# myid）
2.類(lèi)選擇器（.myclassname）
3.標(biāo)簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器（*）
8.屬性選擇器（a[rel = “external”]）
9.偽類(lèi)選擇器（a: hover, li: nth-child）
*
可繼承的樣式： font-size font-family color, UL LI DL DD DT;*
不可繼承的樣式：border padding margin width height;*
優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);*
載入樣式以最后載入的定位為準(zhǔn);/ 28
2015前端面試題
2015-02 優(yōu)先級(jí)為:
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高
三、CSS3新增偽類(lèi)舉例：
p:first-of-type 選擇屬于其父元素的首個(gè)
元素的每個(gè)
元素。p:last-of-type 選擇屬于其父元素的最后
元素的每個(gè)
元素。p:only-of-type 選擇屬于其父元素唯一的
元素的每個(gè)
元素。p:only-child
選擇屬于其父元素的唯一子元素的每個(gè)
元素。p:nth-child(2)選擇屬于其父元素的第二個(gè)子元素的每個(gè)
元素。:enabled :disabled 控制表單控件的禁用狀態(tài)。:checked
單選框或復(fù)選框被選中。
四、如何居中div？如何居中一個(gè)浮動(dòng)元素？
給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性 div{width:200px;margin:0 auto;}
五、居中一個(gè)浮動(dòng)元素
確定容器的寬高 寬500 高 300 的層
設(shè)置層的外邊距
.div { Width:500px;height:300px;//高度可以不設(shè)
Margin:-150px 0 0-250px;
position:relative;相對(duì)定位
background-color:pink;//方便看效果 / 28
2015前端面試題2015-02
left:50%;top:50%;}
六、列出display的值，說(shuō)明他們的作用。position的值，relative和absolute定位原點(diǎn)是？
1.block 象塊類(lèi)型元素一樣顯示。
none 缺省值。象行內(nèi)元素類(lèi)型一樣顯示。
inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類(lèi)型元素一樣顯示。
list-item 象塊類(lèi)型元素一樣顯示，并添加樣式列表標(biāo)記。
2.*absolute 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。*fixed（老IE不支持）生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。*relative生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。* static 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中 *（忽略 top, bottom, left, right z-index 聲明）* inherit 規(guī)定從父元素繼承 position 屬性的值。
七、CSS3有哪些新特性？
CSS3實(shí)現(xiàn)圓角（border-radius:8px），陰影（box-shadow:10px），對(duì)文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）
transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜
增加了更多的CSS選擇器
多背景 rgba八、九、一個(gè)滿(mǎn)屏 品 字布局 如何設(shè)計(jì)? 經(jīng)常遇到的CSS的兼容性有哪些？原因，解決方法是什么？ / 28
2015前端面試題
2015-02
十、為什么要初始化CSS樣式。
因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。
當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚(yú)和熊掌不可兼得，但力求影響最小的情況下初始化。*最簡(jiǎn)單的初始化方法就是： * {padding: 0;margin: 0;}（不建議）淘寶的樣式初始化：
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, 5b8b4f53;} 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;} / 28
2015前端面試題2015-02
十一、absolute的containing block計(jì)算方式跟正常流有什么不同？
十二、position跟display、margin collapse、overflow、float這些特性相互疊加后會(huì)怎么樣？
十三、對(duì)BFC規(guī)范的理解？
（W3C CSS 2.1 規(guī)范中的一個(gè)概念,它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān) 系和相互作用。）
十四、css定義的權(quán)重
以下是權(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)重相同，則最后定義的樣式會(huì)起作用，但是應(yīng)該避免這種情況出現(xiàn) / 28
2015前端面試題
2015-02
十五、解釋下浮動(dòng)和它的工作原理？清除浮動(dòng)的技巧
十六、用過(guò)媒體查詢(xún)，針對(duì)移動(dòng)端的布局嗎？
十七、使用 CSS 預(yù)處理器嗎？喜歡那個(gè)？
SASS
十八、如果需要手動(dòng)寫(xiě)動(dòng)畫(huà)，你認(rèn)為最小時(shí)間間隔是多久，為什么？（阿里）
多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms
十九、display:inline-block 什么時(shí)候會(huì)顯示間隙？(攜程)移除空格、使用margin負(fù)值、使用font-size:0、letter-spacing、word-spacing / 28
2015前端面試題2015-02
JavaScript一、二、JavaScript原型，原型鏈 ? 有什么特點(diǎn)？ eval是做什么的？
它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行；應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語(yǔ)句，一次執(zhí)行）。
三、四、null，undefined 的區(qū)別？ 寫(xiě)一個(gè)通用的事件偵聽(tīng)器函數(shù)。
// event(事件)工具集，來(lái)源：github.com/markyun
markyun.Event = {
// 頁(yè)面加載完成后
readyEvent : function(fn){
if(fn==null){
fn=document;
}
var oldonload = window.onload;
if(typeof window.onload!= 'function'){
window.onload = fn;
} else {
window.onload = function(){ / 28
2015前端面試題
2015-02
oldonload();
fn();
};
}
}，// 視能力分別使用dom0||dom2||IE方式 來(lái)綁定事件
// 參數(shù)： 操作的元素,事件名稱(chēng) ,事件處理程序
addEvent : function(element, type, handler){
if(element.addEventListener){
//事件類(lèi)型、需要執(zhí)行的函數(shù)、是否捕捉
element.addEventListener(type, handler, false);
} else if(element.attachEvent){
element.attachEvent('on' + type, function(){
handler.call(element);
});
} else {
element['on' + type] = handler;
}
}，// 移除事件
removeEvent : function(element, type, handler){
if(element.removeEnentListener){ / 28
2015前端面試題2015-02
element.removeEnentListener(type, handler, false);
} else if(element.datachEvent){
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
}，// 阻止事件(主要是事件冒泡，因?yàn)镮E不支持事件捕獲)
stopPropagation : function(ev){
if(ev.stopPropagation){
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
}，// 取消事件的默認(rèn)行為
preventDefault : function(event){
if(event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
} / 28
2015前端面試題
2015-02
}，// 獲取事件目標(biāo)
getTarget : function(event){
return event.target || event.srcElement;
}，// 獲取event對(duì)象的引用，取到事件的所有信息，確保隨時(shí)能使用event；
getEvent : function(e){
var ev = e || window.event;
if(!ev){
var c = this.getEvent.caller;
while(c){
ev = c.arguments[0];
if(ev && Event == ev.constructor){
break;
}
c = c.caller;
}
}
return ev;
}
};
五、Node.js的適用場(chǎng)景？ / 28
2015前端面試題2015-02 高并發(fā)、聊天、實(shí)時(shí)消息推送
六、介紹js的基本數(shù)據(jù)類(lèi)型。
number,string,boolean,object,undefined
七、Javascript如何實(shí)現(xiàn)繼承？
通過(guò)原型和構(gòu)造器
八、[“1”, “2”, “3”].map(parseInt)答案是多少？
[1, NaN, NaN] 因?yàn)?parseInt 需要兩個(gè)參數(shù)(val, radix)，其中 radix 表示解析時(shí)用的基數(shù)。map 傳了 3 個(gè)(element, index, array)，對(duì)應(yīng)的 radix 不合法導(dǎo)致解析失敗。
九、如何創(chuàng)建一個(gè)對(duì)象?（畫(huà)出此對(duì)象的內(nèi)存圖）
function Person(name, age){
this.name = name;
this.age = age;
this.sing = function(){ alert(this.name)}
}
十、談?wù)凾his對(duì)象的理解。
this是js的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化。但是有一個(gè)總原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象。this一般情況下：是全局對(duì)象Global。作為方法調(diào)用，那么this就是指這個(gè)對(duì)象
十一、事件是？IE與火狐的事件機(jī)制有什么區(qū)別？ 如何阻止冒泡？
1.我們?cè)诰W(wǎng)頁(yè)中的某個(gè)操作（有的操作對(duì)應(yīng)多個(gè)事件）。例如：當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件。是可以被 JavaScript 偵測(cè)到的行為。
2.事件處理機(jī)制：IE是事件冒泡、火狐是 事件捕獲； / 28
2015前端面試題
2015-02 3.ev.stopPropagation();
十二、什么是閉包（closure），為什么要用它？
執(zhí)行say667()后,say667()閉包內(nèi)部變量會(huì)存在,而閉包內(nèi)部函數(shù)的內(nèi)部變量不會(huì)存在.使得Javascript的垃圾回收機(jī)制GC不會(huì)收回say667()所占用的資源，因?yàn)閟ay667()的內(nèi)部函數(shù)的執(zhí)行需要依賴(lài)say667()中的變量。這是對(duì)閉包作用的非常直白的描述.function say667(){
// Local variable that ends up within closure
var num = 666;
var sayAlert = function(){ alert(num);}
num++;
return sayAlert;} var sayAlert = say667();sayAlert()//執(zhí)行結(jié)果應(yīng)該彈出的667
十三、“use strict”;是什么意思 ? 使用它的好處和壞處分別是什么？
十四、如何判斷一個(gè)對(duì)象是否屬于某個(gè)類(lèi)？
使用instanceof（待完善）
if(a instanceof Person){
alert('yes');
}
十五、new操作符具體干了什么呢? / 28
2015前端面試題2015-02
1、創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型。
2、屬性和方法被加入到 this 引用的對(duì)象中。
3、新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this。
var obj = {};obj.__proto__ = Base.prototype;Base.call(obj);
十六、Javascript中，有一個(gè)函數(shù)，執(zhí)行時(shí)對(duì)象查找時(shí)，永遠(yuǎn)不會(huì)去查找原型，這個(gè)函數(shù)是？
hasOwnProperty
十七、JSON 的了解？
JSON(JavaScript Object Notation)是一種輕量級(jí)的數(shù)據(jù)交換格式。它是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單, 易于讀寫(xiě), 占用帶寬小 {'age':'12', 'name':'back'}
十八、js延遲加載的方式有哪些？
defer和async、動(dòng)態(tài)創(chuàng)建DOM方式（用得最多）、按需異步載入js
十九、ajax 是什么?
二十、同步和異步的區(qū)別? 二
十一、如何解決跨域問(wèn)題? jsonp、iframe、window.name、window.postMessage、服務(wù)器上設(shè)置代理頁(yè)面
二十二、模塊化怎么做？立即執(zhí)行函數(shù),不暴露私有成員 / 28
2015前端面試題
2015-02
var module1 =(function(){
var _count = 0;
var m1 = function(){
//...};
var m2 = function(){
//...};
return {
m1 : m1，m2 : m2
};
})();
二十三、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規(guī)范區(qū)別？
AMD 是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出。CMD 是 SeaJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出。
對(duì)于依賴(lài)的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。不過(guò) RequireJS 從 2.0 開(kāi)始，也改成可以延遲執(zhí)行（根據(jù)寫(xiě)法不同，處理方式不同）。CMD 推崇 as lazy as possible.CMD 推崇依賴(lài)就近，AMD 推崇依賴(lài)前置 / 28
2015前端面試題2015-02 二
十四、異步加載的方式有哪些？
(1)defer，只支持IE
(2)async：
(3)創(chuàng)建script，插入到DOM中，加載完畢后callBack 二
十五、documen.write和 innerHTML的區(qū)別
document.write只能重繪整個(gè)頁(yè)面 innerHTML可以重繪頁(yè)面的一部分
二十六、.call()和.apply()的區(qū)別？
例子中用 add 來(lái)替換 sub，add.call(sub,3,1)== add(3,1)，所以運(yùn)行結(jié)果為：alert(4);
注意：js 中的函數(shù)其實(shí)是對(duì)象，函數(shù)名是對(duì) Function 對(duì)象的引用。
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
二十七、Jquery與jQuery UI 有啥區(qū)別？
*jQuery是一個(gè)js庫(kù)，主要提供的功能是選擇器，屬性修改和事件綁定等等。/ 28
2015前端面試題
2015-02 *jQuery UI則是在jQuery的基礎(chǔ)上，利用jQuery的擴(kuò)展性，設(shè)計(jì)的插件。
提供了一些常用的界面元素，諸如對(duì)話框、拖動(dòng)行為、改變大小行為等等
二十八、JQuery的源碼看過(guò)嗎？能不能簡(jiǎn)單說(shuō)一下它的實(shí)現(xiàn)原理？ 二
十九、jquery 中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來(lái)？
jQuery中沒(méi)有提供這個(gè)功能，所以你需要先編寫(xiě)兩個(gè)jQuery的擴(kuò)展：
$.fn.stringifyArray = function(array){
return JSON.stringify(array)
}
$.fn.parseArray = function(array){
return JSON.parse(array)
}
然后調(diào)用：
$(“").stringifyArray(array)三
十、針對(duì) jQuery 的優(yōu)化方法？
*基于Class的選擇性的性能相對(duì)于Id選擇器開(kāi)銷(xiāo)很大，因?yàn)樾璞闅v所有DOM元素。*頻繁操作的DOM，先緩存起來(lái)再操作。用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 屬性，在開(kāi)始循環(huán)的時(shí)候設(shè)置一個(gè)變量來(lái)存儲(chǔ)這個(gè)數(shù)字，可以讓循環(huán)跑得更快：
for(var i = size, length = arr.length;i < length;i++){} / 28
2015前端面試題2015-02 三
十一、JavaScript中的作用域與變量聲明提升？ 三
十二、如何編寫(xiě)高性能的Javascript？ 三
十三、那些操作會(huì)造成內(nèi)存泄漏？
內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對(duì)象，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量。如果一個(gè)對(duì)象的引用數(shù)量為 0（沒(méi)有其他對(duì)象引用過(guò)該對(duì)象），或?qū)υ搶?duì)象的惟一引用是循環(huán)的，那么該對(duì)象的內(nèi)存即可回收。setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話，會(huì)引發(fā)內(nèi)存泄漏。
閉包、控制臺(tái)日志、循環(huán)（在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)，就會(huì)產(chǎn)生一個(gè)循環(huán)）
三
十四、JQuery一個(gè)對(duì)象可以同時(shí)綁定多個(gè)事件，這是如何實(shí)現(xiàn)的？ 三
十五、如何判斷當(dāng)前腳本運(yùn)行在瀏覽器還是node環(huán)境中？（阿里）
通過(guò)判斷Global對(duì)象是否為window，如果不為window，當(dāng)前腳本沒(méi)有運(yùn)行在瀏覽器中
三
十六、對(duì)Node的優(yōu)點(diǎn)和缺點(diǎn)提出了自己的看法？
*（優(yōu)點(diǎn)）因?yàn)镹ode是基于事件驅(qū)動(dòng)和無(wú)阻塞的，所以非常適合處理并發(fā)請(qǐng)求，因此構(gòu)建在Node上的代理服務(wù)器相比其他技術(shù)實(shí)現(xiàn)（如Ruby）的服務(wù)器表現(xiàn)要好得多。
此外，與Node代理服務(wù)器交互的客戶(hù)端代碼是由javascript語(yǔ)言編寫(xiě)的，因此客戶(hù)端和服務(wù)器端都用同一種語(yǔ)言編寫(xiě)，這是非常美妙的事情。
*（缺點(diǎn)）Node是一個(gè)相對(duì)新的開(kāi)源項(xiàng)目，所以不太穩(wěn)定，它總是一直在變，而且缺少足夠多的第三方庫(kù)支持。看起來(lái)，就像是Ruby/Rails當(dāng)年的樣子。/ 28
2015前端面試題
2015-02
其它問(wèn)題
一、你有哪些性能優(yōu)化的方法？
（看雅虎14條性能優(yōu)化原則）。
（1）減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁(yè)Gzip，CDN托管，data緩存，圖片服務(wù)器。
（2）前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)
（3）用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。
（4）當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。
（5）少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少I(mǎi)O讀取操作。
（6）避免使用CSS Expression（css表達(dá)式)又稱(chēng)Dynamic properties(動(dòng)態(tài)屬性)。
（7）圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部
加上時(shí)間戳。
（8）避免在頁(yè)面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來(lái)，顯示比div+css布局慢。
二、http狀態(tài)碼有那些？分別代表是什么意思？
100-199 用于指定客戶(hù)端應(yīng)相應(yīng)的某些動(dòng)作。200-299 用于表示請(qǐng)求成功。
300-399 用于已經(jīng)移動(dòng)的文件并且常被包含在定位頭信息中指定新的地址信息。400-499 用于指出客戶(hù)端的錯(cuò)誤。
400
語(yǔ)義有誤，當(dāng)前請(qǐng)求無(wú)法被服務(wù)器理解。401
當(dāng)前請(qǐng)求需要用戶(hù)驗(yàn)證 / 28
2015前端面試題2015-02 403 服務(wù)器已經(jīng)理解請(qǐng)求，但是拒絕執(zhí)行它。500-599 用于支持服務(wù)器錯(cuò)誤。503 – 服務(wù)不可用三、一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成，這個(gè)過(guò)程中都發(fā)生了什么？（流程說(shuō)的越詳細(xì)越好）
查找瀏覽器緩存
DNS解析、查找該域名對(duì)應(yīng)的IP地址、重定向（301）、發(fā)出第二個(gè)GET請(qǐng)求
進(jìn)行HTTP協(xié)議會(huì)話
客戶(hù)端發(fā)送報(bào)頭(請(qǐng)求報(bào)頭)
服務(wù)器回饋報(bào)頭(響應(yīng)報(bào)頭)
html文檔開(kāi)始下載
文檔樹(shù)建立，根據(jù)標(biāo)記請(qǐng)求所需指定MIME類(lèi)型的文件
文件顯示
[
瀏覽器這邊做的工作大致分為以下幾步：
加載：根據(jù)請(qǐng)求的URL進(jìn)行域名解析，向服務(wù)器發(fā)起請(qǐng)求，接收文件（HTML、JS、CSS、圖象等）。
解析：對(duì)加載到的資源（HTML、JS、CSS等）進(jìn)行語(yǔ)法解析，建議相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（比如HTML的DOM樹(shù)，JS的（對(duì)象）屬性表，CSS的樣式規(guī)則等等）
}
四、平時(shí)如何管理你的項(xiàng)目？
先期團(tuán)隊(duì)必須確定好全局樣式（globe.css），編碼模式(utf-8)等；
編寫(xiě)習(xí)慣必須一致（例如都是采用繼承式的寫(xiě)法，單樣式都寫(xiě)成一行）； / 28
2015前端面試題
2015-02
標(biāo)注樣式編寫(xiě)人，各模塊都及時(shí)標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）；
頁(yè)面進(jìn)行標(biāo)注（例如 頁(yè)面 模塊 開(kāi)始和結(jié)束）；
CSS跟HTML 分文件夾并行存放，命名都得統(tǒng)一（例如style.css）；
JS 分文件夾存放 命名以該JS功能為準(zhǔn)的英文翻譯。
圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來(lái)的管理
五、說(shuō)說(shuō)最近最流行的一些東西吧？常去哪些網(wǎng)站？
Node.js、Mongodb、npm、MVVM、MEAN、three.js
六、移動(dòng)端（Android IOS）怎么做好用戶(hù)體驗(yàn)?
清晰的視覺(jué)縱線、信息的分組、極致的減法、利用選擇代替輸入、標(biāo)簽及文字的排布方式、依靠明文確認(rèn)密碼、合理的鍵盤(pán)利用、七、想問(wèn)公司的問(wèn)題？
目前關(guān)注哪些最新的Web前端技術(shù)（未來(lái)的發(fā)展方向）？
前端團(tuán)隊(duì)如何工作的（實(shí)現(xiàn)一個(gè)產(chǎn)品的流程）？
公司的薪資結(jié)構(gòu)是什么樣子的？
八、優(yōu)質(zhì)網(wǎng)站推薦
極客標(biāo)簽： http://004km.cn/ 碼農(nóng)周刊： http://weekly.manong.io/issues/ 前端周刊： http://004km.cn/issues 極客頭條： http://geek.csdn.net/ Startup News：http://news.dbanotes.net/ / 28
2015前端面試題2015-02 Hacker News： https://news.ycombinator.com/news InfoQ： http://004km.cn/ w3cplus： http://004km.cn/ Stack Overflow： http://stackoverflow.com/ Atp： http://atp-posts.b0.upaiyun.com/posts/ / 28
想要應(yīng)聘前端開(kāi)發(fā)的求職者，要做好完成面試題的準(zhǔn)備。下面是由小編分享的前端開(kāi)發(fā)面試題及答案，希望對(duì)你有用。
前端開(kāi)發(fā)面試題及答案
1、對(duì)Web標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)?
答：標(biāo)簽閉合、標(biāo)簽小寫(xiě)、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外鏈CSS和JS腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁(yè)面速度更快、內(nèi)容能被更多的用戶(hù)所訪問(wèn)、內(nèi)容能被更廣泛的設(shè)備所訪問(wèn)、更少的代碼和組件、容易維護(hù)、改版方便，不需要變動(dòng)頁(yè)面內(nèi)容、提供打印版本而水需要復(fù)制內(nèi)容、提高網(wǎng)站易用性。
2、XHTML和HTML有什么區(qū)別?
答：HTML是一種基本的WEB網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言，XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言 最主要的不同：
XHTML元素必須被正確地嵌套;
XHTML元素必須被關(guān)閉;
標(biāo)簽名必須用小寫(xiě)字母;
XHTML文檔必須擁有根元素。
3、Doctype?嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義? 答：Doctype用于聲明文檔使用哪種規(guī)范(HTML/XHTML)
該標(biāo)簽可聲明三種DTD類(lèi)型，分別為嚴(yán)格版本、過(guò)度版本以及基于框架的HTML文檔。
加入XML聲明可觸發(fā)，解析方式更改為IE5.5擁有IE5.5的bug。
4、行內(nèi)元素有哪些?塊級(jí)元素有哪些?CSS的盒模型?
答：行內(nèi)元素：a b br i span input select
塊級(jí)元素：div p h1 h2 h3 h4 form ul
CSS盒模型：內(nèi)容，border margin padding5、CSS引入的方式有哪些?link和@import的區(qū)別是?
答：方式：內(nèi)聯(lián) 內(nèi)嵌 外鏈 導(dǎo)入
區(qū)別：同時(shí)加載
前者無(wú)兼容性，后者CSS2.1以下瀏覽器不支持
Link支持使用javascript 改變樣式，后者不可。
6.CSS選擇符有哪些?哪些屬性可以繼承?優(yōu)先級(jí)算法如何計(jì)算?內(nèi)聯(lián)和important哪個(gè)優(yōu)先級(jí)高?
答：標(biāo)簽選擇符、類(lèi)選擇符、id選擇符
繼承不如指定 id>class>標(biāo)簽選擇
后者優(yōu)先級(jí)高
7、前端頁(yè)面有哪三層構(gòu)成，分別是什么?作用是什么?
答：結(jié)構(gòu)層HTML 表示層CSS 行為層JS8、你做的頁(yè)面在哪些瀏覽器測(cè)試過(guò)?這些瀏覽器的內(nèi)核分別是什么? 答：Ie(Ie內(nèi)核)
火狐(Gecko)
谷歌(webkit)
opear(Presto)
9、img標(biāo)簽上title與 alt屬性的區(qū)別是什么?
答：Alt當(dāng)圖片不顯示時(shí)，用文字代表
Title為該屬性提供信息。
10、描述CSS Reset的作用和用途
答：Reset重置瀏覽器的CSS默認(rèn)屬性 瀏覽器的品種不同，樣式不同，然后重
置，讓他們統(tǒng)一。
11、http狀態(tài)碼有那些?分別代表是什么意思?
100-199 用于指定客戶(hù)端應(yīng)響應(yīng)的某些動(dòng)作。
200-299 用于表示請(qǐng)求成功。
300-399 用于已經(jīng)移動(dòng)的文件并且常被包含在定位頭信息中指定新的地址信息。400-499 用于指出客戶(hù)端的錯(cuò)誤。
400 語(yǔ)義有誤，當(dāng)前請(qǐng)求無(wú)法被服務(wù)器理解。
401 當(dāng)前請(qǐng)求需要用戶(hù)驗(yàn)證
403 服務(wù)器已經(jīng)理解請(qǐng)求，但是拒絕執(zhí)行它。
500-599 用于支持服務(wù)器錯(cuò)誤。
503 – 服務(wù)不可用
13.解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務(wù)器對(duì)圖片的請(qǐng)求數(shù)量
14.瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什么模式
15.你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化?期待的解決方案包括：
文件合并
文件最小化/文件壓縮
使用CDN托管
緩存的使用
16.什么是語(yǔ)義化的HTML?
直觀的認(rèn)識(shí)標(biāo)簽 對(duì)于搜索引擎的抓取有好處
17.清除浮動(dòng)的幾種方式，各自的優(yōu)缺點(diǎn)
1.使用空標(biāo)簽清除浮動(dòng) clear:both(理論上能清楚任何標(biāo)簽，增加無(wú)意義的標(biāo)簽)
2.使用overflow:auto(空標(biāo)簽元素清除浮動(dòng)而不得不增加無(wú)意代碼的弊端，使用zoom:1用于兼容IE)
3.是用afert偽元素清除浮動(dòng)(用于非IE瀏覽器)
18.css hack
_marging IE 6
+margin IE 7
Marging:0 auto 9 所有Ie
Margin
