1.說說你對(duì)閉包的理解

使用閉包主要是為了設(shè)計(jì)私有的方法和變量赘风。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染，缺點(diǎn)是閉包會(huì)常駐內(nèi)存，會(huì)增大內(nèi)存使用量续语，使用不當(dāng)很容易造成內(nèi)存泄露。

閉包有三個(gè)特性：

[if !supportLists]1.[endif]函數(shù)嵌套函數(shù)

2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量

3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收

2.瀏覽器本地存儲(chǔ)

在較高版本的瀏覽器中厦画，js提供了sessionStorage和globalStorage疮茄。在HTML5中提供了localStorage來取代globalStorage。

html5中的Web Storage包括了兩種存儲(chǔ)方式：sessionStorage和localStorage根暑。

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)力试，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)排嫌，僅僅是會(huì)話級(jí)別的存儲(chǔ)畸裳。

而localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)淳地，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的怖糊。

3.web storage和cookie的區(qū)別

Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的颇象。Cookie的大小是受限的伍伤，并且每次你請(qǐng)求一個(gè)新的頁面的時(shí)候Cookie都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬夯到，另外cookie還需要指定作用域嚷缭，不可以跨域調(diào)用。

除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法阅爽，不像cookie需要前端開發(fā)者自己封裝setCookie路幸，getCookie。

但是cookie也是不可以或缺的：cookie的作用是與服務(wù)器進(jìn)行交互付翁，作為HTTP規(guī)范的一部分而存在 简肴，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生

瀏覽器的支持除了IE７及以下不支持外，其他標(biāo)準(zhǔn)瀏覽器都完全支持(ie及FF需在web服務(wù)器里運(yùn)行)百侧，值得一提的是IE總是辦好事砰识，例如IE7、IE6中的userData其實(shí)就是javascript本地存儲(chǔ)的解決方案佣渴。通過簡(jiǎn)單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage辫狼。

localStorage和sessionStorage都具有相同的操作方法，例如setItem辛润、getItem和removeItem等

4.cookie 和session 的區(qū)別：

1膨处、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上砂竖。

2真椿、cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙

? ?考慮到安全應(yīng)當(dāng)使用session乎澄。

3突硝、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多置济，會(huì)比較占用你服務(wù)器的性能

? ?考慮到減輕服務(wù)器性能方面解恰，應(yīng)當(dāng)使用COOKIE。

4舟肉、單個(gè)cookie保存的數(shù)據(jù)不能超過4K修噪，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。

5路媚、所以個(gè)人建議：

? ?將登陸信息等重要信息存放為SESSION

? ?其他信息如果需要保留黄琼，可以放在COOKIE中

5.XML和JSON的區(qū)別？

(1).數(shù)據(jù)體積方面整慎。

JSON相對(duì)于XML來講脏款，數(shù)據(jù)的體積小，傳遞的速度更快些裤园。

(2).數(shù)據(jù)交互方面撤师。

JSON與JavaScript的交互更加方便，更容易解析處理拧揽，更好的數(shù)據(jù)交互剃盾。

(3).數(shù)據(jù)描述方面腺占。

JSON對(duì)數(shù)據(jù)的描述性比XML較差。

(4).傳輸速度方面痒谴。

JSON的速度要遠(yuǎn)遠(yuǎn)快于XML衰伯。

6.對(duì)BFC規(guī)范的理解？

?BFC积蔚，塊級(jí)格式化上下文意鲸，一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的，盒子里面的子元素的樣式不會(huì)影響到外面的元素尽爆。在同一個(gè)BFC中的兩個(gè)毗鄰的塊級(jí)盒在垂直方向（和布局方向有關(guān)系）的margin會(huì)發(fā)生折疊怎顾。

?（W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行布局漱贱，以及與其他元素的關(guān)系和相互作用槐雾。）

7.說說你對(duì)語義化的理解？

1饱亿，去掉或者丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)

2蚜退，有利于SEO：和搜索引擎建立良好溝通闰靴，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重彪笼；

3，方便其他設(shè)備解析（如屏幕閱讀器蚂且、盲人閱讀器配猫、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁；

4杏死，便于團(tuán)隊(duì)開發(fā)和維護(hù)泵肄，語義化更具可讀性，是下一步吧網(wǎng)頁的重要?jiǎng)酉蚴缫恚裱璚3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)腐巢，可以減少差異化

8.常見兼容性問題？

* png24位的圖片在iE6瀏覽器上出現(xiàn)背景玄括，解決方案是做成PNG8.也可以引用一段腳本處理.

* 瀏覽器默認(rèn)的margin和padding不同冯丙。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一。

* IE6雙邊距bug:塊屬性標(biāo)簽float后遭京，又有橫行的margin情況下胃惜，在ie6顯示margin比設(shè)置的大。

* 浮動(dòng)ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下哪雕，如果對(duì)元素設(shè)置了浮動(dòng)船殉，同時(shí)又設(shè)置了margin-left或margin-right，margin值會(huì)加倍斯嚎。）

?#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游覽器從所有情況中分離出來寞钥。

?接著慌申，再次使用“+”將IE8和IE7、IE6分離開來理郑，這樣IE8已經(jīng)獨(dú)立識(shí)別蹄溉。

?css

? ? ?.bb{

? ? ? background-color:#f1ee18;/*所有識(shí)別*/

? ? ?.background-color:#00deff\9; /*IE6、7您炉、8識(shí)別*/

? ? ?+background-color:#a200ff;/*IE6柒爵、7識(shí)別*/

? ? ?_background-color:#1e0bd1;/*IE6識(shí)別*/

? ? ?}

* ?IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,

? 也可以使用getAttribute()獲取自定義屬性;

? Firefox下,只能使用getAttribute()獲取自定義屬性.

? 解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.

* IE下,event對(duì)象有x,y屬性,但是沒有pageX,pageY屬性;

?Firefox下,event對(duì)象有pageX,pageY屬性,但是沒有x,y屬性.

* 解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。

* Chrome 中文界面下默認(rèn)會(huì)將小于 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 {}

* 怪異模式問題：漏寫DTD聲明赚爵，F(xiàn)irefox仍然會(huì)按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁棉胀，但在IE中會(huì)觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩冀膝，最好養(yǎng)成書寫DTD聲明的好習(xí)慣⊙渖荩現(xiàn)在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`

* 上下margin重合問題

ie和ff都存在，相鄰的兩個(gè)div的margin-left和margin-right不會(huì)重合窝剖，但是margin-top和margin-bottom卻會(huì)發(fā)生重合麻掸。

解決方法，養(yǎng)成良好的代碼編寫習(xí)慣赐纱，同時(shí)采用margin-top或者同時(shí)采用margin-bottom脊奋。

* ie6對(duì)png圖片格式支持不好(引用一段腳本處理)

9.解釋下浮動(dòng)和它的工作原理？清除浮動(dòng)的技巧

浮動(dòng)元素脫離文檔流疙描，不占據(jù)空間诚隙。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。

1.使用空標(biāo)簽清除浮動(dòng)起胰。

? 這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽 定義css clear:both. 弊端就是增加了無意義標(biāo)簽久又。

2.使用overflow。

? 給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6待错。

3.使用after偽對(duì)象清除浮動(dòng)籽孙。

? 該方法只適用于非IE瀏覽器。具體寫法可參照以下示例火俄。使用中需注意以下幾點(diǎn)犯建。一、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置 height:0瓜客，否則該元素會(huì)比實(shí)際高出若干像素适瓦；

10.html5有哪些新特性竿开、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題玻熙？如何區(qū)分 HTML 和 HTML5否彩？

* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像嗦随，位置列荔，存儲(chǔ)，多任務(wù)等功能的增加枚尼。

* 拖拽釋放(Drag and drop) API

?語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）

?音頻贴浙、視頻API(audio,video)

?畫布(Canvas) API

?地理(Geolocation) API

?本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失署恍；

?sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除

?表單控件崎溃，calendar、date盯质、time袁串、email、url呼巷、search ?

?新的技術(shù)webworker, websocket, Geolocation

* 移除的元素

純表現(xiàn)的元素：basefont囱修，big，center朵逝，font, s蔚袍，strike，tt配名，u；

對(duì)可用性產(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框架

? <!--[if lt IE 9]>

? <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

? <![endif]-->

如何區(qū)分：DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

11.你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化为朋？

期待的解決方案包括：

文件合并

文件最小化/文件壓縮

使用CDN 托管

緩存的使用（多個(gè)域名來提供緩存）

其他

12.請(qǐng)說出三種減少頁面加載時(shí)間的方法。

1.優(yōu)化圖片

2.圖像格式的選擇（GIF：提供的顏色較少厚脉，可用在一些對(duì)顏色要求不高的地方）

3.優(yōu)化CSS（壓縮合并css习寸，如margin-top,margin-left...)

4.網(wǎng)址后加斜杠（如www.campr.com/目錄，會(huì)判斷這個(gè)“目錄是什么文件類型傻工，或者是目錄霞溪。）

5.標(biāo)明高度和寬度（如果瀏覽器沒有找到這兩個(gè)參數(shù)孵滞，它需要一邊下載圖片一邊計(jì)算大小，如果圖片很多鸯匹，瀏覽器需要不斷地調(diào)整頁面坊饶。這不但影響速度，也影響瀏覽體驗(yàn)殴蓬。

當(dāng)瀏覽器知道了高度和寬度參數(shù)后匿级，即使圖片暫時(shí)無法顯示，頁面上也會(huì)騰出圖片的空位染厅，然后繼續(xù)加載后面的內(nèi)容根蟹。從而加載時(shí)間快了，瀏覽體驗(yàn)也更好了糟秘。）

[if !supportLists]6.[endif]減少http請(qǐng)求（合并文件简逮，合并圖片）。

13.你都使用哪些工具來測(cè)試代碼的性能尿赚？

Profiler, JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo

14.什么是FOUC（無樣式內(nèi)容閃爍）散庶？你如何來避免 FOUC？

FOUC - Flash Of Unstyled Content 文檔樣式閃爍

<style type="text/css" media="all">@import "../fouc.css";</style>

而引用CSS文件的@import就是造成這個(gè)問題的罪魁禍?zhǔn)琢杈弧E會(huì)先加載整個(gè)HTML文檔的DOM悲龟，然后再去導(dǎo)入外部的CSS文件，因此冰寻，在頁面DOM加載完成到CSS導(dǎo)入完成中間會(huì)有一段時(shí)間頁面上的內(nèi)容是沒有樣式的须教，這段時(shí)間的長(zhǎng)短跟網(wǎng)速，電腦速度都有關(guān)系斩芭。

解決方法簡(jiǎn)單的出奇轻腺，只要在<head>之間加入一個(gè)<link>或者<script>元素就可以了。

15.null和undefined的區(qū)別划乖？

null是一個(gè)表示"無"的對(duì)象贬养，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示"無"的原始值琴庵，轉(zhuǎn)為數(shù)值時(shí)為NaN误算。

當(dāng)聲明的變量還未被初始化時(shí)，變量的默認(rèn)值為undefined迷殿。 null用來表示尚未存在的對(duì)象儿礼，常用來表示函數(shù)企圖返回一個(gè)不存在的對(duì)象。

16.js延遲加載的方式有哪些庆寺？

defer和async蚊夫、動(dòng)態(tài)創(chuàng)建DOM方式（創(chuàng)建script，插入到DOM中止邮，加載完畢后callBack）这橙、按需異步載入js

17.call() 和 .apply() 的區(qū)別和作用奏窑？

作用：動(dòng)態(tài)改變某個(gè)類的某個(gè)方法的運(yùn)行環(huán)境。區(qū)別參見：JavaScript學(xué)習(xí)總結(jié)（四）function函數(shù)部分

18.哪些操作會(huì)造成內(nèi)存泄漏屈扎？

內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在埃唯。

垃圾回收器定期掃描對(duì)象，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量鹰晨。如果一個(gè)對(duì)象的引用數(shù)量為0（沒有其他對(duì)象引用過該對(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)）

詳見：詳解js變量卤妒、作用域及內(nèi)存

19.什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)甥绿？

優(yōu)雅降級(jí)：Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器则披，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作共缕。由于IE獨(dú)特的盒模型布局問題，針對(duì)不同版本的IE的hack實(shí)踐過優(yōu)雅降級(jí)了,為那些無法支持功能的瀏覽器增加候選方案士复，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效.

漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始图谷，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣

20.對(duì)前端界面工程師這個(gè)職位是怎么樣理解的？它的前景會(huì)怎么樣阱洪？

前端是最貼近用戶的程序員便贵，比后端、數(shù)據(jù)庫澄峰、產(chǎn)品經(jīng)理嫉沽、運(yùn)營(yíng)、安全都近俏竞。

? ?1、實(shí)現(xiàn)界面交互

? ?2堂竟、提升用戶體驗(yàn)

? ?3魂毁、有了Node.js，前端可以實(shí)現(xiàn)服務(wù)端的一些事情

前端是最貼近用戶的程序員出嘹，前端的能力就是能讓產(chǎn)品從90分進(jìn)化到 100 分席楚，甚至更好，

參與項(xiàng)目税稼，快速高質(zhì)量完成實(shí)現(xiàn)效果圖烦秩，精確到1px垮斯；

與團(tuán)隊(duì)成員，UI設(shè)計(jì)只祠，產(chǎn)品經(jīng)理的溝通兜蠕；

做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗(yàn)抛寝；

處理hack熊杨，兼容、寫出優(yōu)美的代碼格式盗舰；

針對(duì)服務(wù)器的優(yōu)化晶府、擁抱最新前端技術(shù)。

21.你有哪些性能優(yōu)化的方法钻趋？

（詳情請(qǐng)看雅虎14條性能優(yōu)化原則）川陆。

（1） 減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮蛮位、圖片大小控制合適较沪；網(wǎng)頁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é)果霜定。減少IO讀取操作。

（6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)廊鸥。

（7） 圖片預(yù)加載望浩，將樣式表放在頂部，將腳本放在底部 ?加上時(shí)間戳惰说。

22.一個(gè)頁面從輸入U(xiǎn)RL 到頁面加載顯示完成磨德，這個(gè)過程中都發(fā)生了什么？

?分為4個(gè)步驟：

?（1），當(dāng)發(fā)送一個(gè)URL請(qǐng)求時(shí)典挑，不管這個(gè)URL是Web頁面的URL還是Web頁面上每個(gè)資源的URL酥宴，瀏覽器都會(huì)開啟一個(gè)線程來處理這個(gè)請(qǐng)求，同時(shí)在遠(yuǎn)程DNS服務(wù)器上啟動(dòng)一個(gè)DNS查詢您觉。這能使瀏覽器獲得請(qǐng)求對(duì)應(yīng)的IP地址拙寡。

?（2）， 瀏覽器與遠(yuǎn)程Web服務(wù)器通過TCP三次握手協(xié)商來建立一個(gè)TCP/IP連接顾犹。該握手包括一個(gè)同步報(bào)文倒庵，一個(gè)同步-應(yīng)答報(bào)文和一個(gè)應(yīng)答報(bào)文，這三個(gè)報(bào)文在 瀏覽器和服務(wù)器之間傳遞炫刷。該握手首先由客戶端嘗試建立起通信擎宝，而后服務(wù)器應(yīng)答并接受客戶端的請(qǐng)求，最后由客戶端發(fā)出該請(qǐng)求已經(jīng)被接受的報(bào)文浑玛。

?（3）绍申，一旦TCP/IP連接建立，瀏覽器會(huì)通過該連接向遠(yuǎn)程服務(wù)器發(fā)送HTTP的GET請(qǐng)求顾彰。遠(yuǎn)程服務(wù)器找到資源并使用HTTP響應(yīng)返回該資源极阅，值為200的HTTP響應(yīng)狀態(tài)表示一個(gè)正確的響應(yīng)。

?（4）涨享，此時(shí)筋搏，Web服務(wù)器提供資源服務(wù)，客戶端開始下載資源厕隧。

請(qǐng)求返回后逸寓，便進(jìn)入了我們關(guān)注的前端模塊

簡(jiǎn)單來說铜幽，瀏覽器會(huì)解析HTML生成DOM Tree沪铭，其次會(huì)根據(jù)CSS生成CSS Rule Tree旱易，而javascript又可以根據(jù)DOM API操作DOM

詳情：從輸入U(xiǎn)RL 到瀏覽器接收的過程中發(fā)生了什么事情？

23.平時(shí)如何管理你的項(xiàng)目建丧？

先期團(tuán)隊(duì)必須確定好全局樣式（globe.css）排龄，編碼模式(utf-8) 等；

?編寫習(xí)慣必須一致（例如都是采用繼承式的寫法翎朱，單樣式都寫成一行）橄维；

?標(biāo)注樣式編寫人，各模塊都及時(shí)標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）拴曲；

?頁面進(jìn)行標(biāo)注（例如 頁面 模塊 開始和結(jié)束）挣郭；

CSS跟HTML 分文件夾并行存放，命名都得統(tǒng)一（例如style.css）疗韵；

JS 分文件夾存放 命名以該JS功能為準(zhǔn)的英文翻譯。

24.說說最近最流行的一些東西吧侄非？常去哪些網(wǎng)站蕉汪？

Node.js流译、Mongodb、npm者疤、MVVM福澡、MEAN、three.js,React 驹马。

網(wǎng)站：w3cfuns,sf,hacknews,CSDN,慕課革砸，博客園，InfoQ,w3cplus等

25.javascript對(duì)象的幾種創(chuàng)建方式

1糯累，工廠模式

2算利，構(gòu)造函數(shù)模式

3，原型模式

4泳姐，混合構(gòu)造函數(shù)和原型模式

5效拭，動(dòng)態(tài)原型模式

6，寄生構(gòu)造函數(shù)模式

7胖秒，穩(wěn)妥構(gòu)造函數(shù)模式

26.javascript繼承的6種方法

1缎患，原型鏈繼承

2，借用構(gòu)造函數(shù)繼承

3阎肝，組合繼承(原型+借用構(gòu)造)

4挤渔，原型式繼承

5，寄生式繼承

6风题，寄生組合式繼承

詳情：JavaScript繼承方式詳解

27.ajax過程

(1)創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象.

(2)創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法判导、URL及驗(yàn)證信息.

(3)設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù).

(4)發(fā)送HTTP請(qǐng)求.

(5)獲取異步調(diào)用返回的數(shù)據(jù).

(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新.

詳情：JavaScript學(xué)習(xí)總結(jié)（七）Ajax和Http狀態(tài)字

28.異步加載和延遲加載

1.異步加載的方案： 動(dòng)態(tài)插入script標(biāo)簽

2.通過ajax去獲取js代碼，然后通過eval執(zhí)行

3.script標(biāo)簽上添加defer或者async屬性

4.創(chuàng)建并插入iframe俯邓，讓它異步執(zhí)行js

5.延遲加載：有些 js 代碼并不是頁面初始化的時(shí)候就立刻需要的骡楼，而稍后的某些情況才需要的。

29.javascript里面的繼承怎么實(shí)現(xiàn)稽鞭，如何避免原型鏈上面的對(duì)象共享

用構(gòu)造函數(shù)和原型鏈的混合模式去實(shí)現(xiàn)繼承鸟整，避免對(duì)象共享可以參考經(jīng)典的extend()函數(shù)，很多前端框架都有封裝的朦蕴，就是用一個(gè)空函數(shù)當(dāng)做中間變量

grunt篮条， YUI compressor 和 google clojure用來進(jìn)行代碼壓縮的用法。

YUI Compressor 是一個(gè)用來壓縮 JS 和 CSS 文件的工具吩抓，采用Java開發(fā)涉茧。

30.請(qǐng)解釋一下JavaScript 的同源策略。

概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標(biāo)準(zhǔn)疹娶。它最早出自Netscape Navigator2.0伴栓，其目的是防止某個(gè)文檔或腳本從多個(gè)不同源裝載。

這里的同源策略指的是：協(xié)議，域名钳垮，端口相同惑淳，同源策略是一種安全協(xié)議。指一段腳本只能讀取來自同一來源的窗口和文檔的屬性饺窿。

31.為什么要有同源限制歧焦？

我們舉例說明：比如一個(gè)黑客程序，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上肚医，當(dāng)你使用真實(shí)的用戶名绢馍，密碼登錄時(shí)，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容肠套，這樣用戶名舰涌，密碼就輕松到手了。

32.什么是"use strict"; ? 使用它的好處和壞處分別是什么糠排？

ECMAscript 5添加了第二種運(yùn)行模式："嚴(yán)格模式"（strict mode）舵稠。顧名思義，這種模式使得Javascript在更嚴(yán)格的條件下運(yùn)行入宦。

設(shè)立"嚴(yán)格模式"的目的哺徊，主要有以下幾個(gè)：

- 消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處乾闰，減少一些怪異行為;

- 消除代碼運(yùn)行的一些不安全之處落追，保證代碼運(yùn)行的安全；

- 提高編譯器效率涯肩，增加運(yùn)行速度轿钠；

- 為未來新版本的Javascript做好鋪墊。

注：經(jīng)過測(cè)試IE6,7,8,9均不支持嚴(yán)格模式病苗。

缺點(diǎn)：現(xiàn)在網(wǎng)站的JS 都會(huì)進(jìn)行壓縮疗垛，一些文件用了嚴(yán)格模式，而另一些沒有硫朦。這時(shí)這些本來是嚴(yán)格模式的文件贷腕，被 merge后，這個(gè)串就到了文件的中間咬展，不僅沒有指示嚴(yán)格模式泽裳，反而在壓縮后浪費(fèi)了字節(jié)。

33.GET和POST的區(qū)別破婆，何時(shí)使用POST涮总？

GET：一般用于信息獲取，使用URL傳遞參數(shù)祷舀，對(duì)所發(fā)送信息的數(shù)量也有限制瀑梗，一般在2000個(gè)字符

POST：一般用于修改服務(wù)器上的資源烹笔，對(duì)所發(fā)送的信息沒有限制。

GET方式需要使用Request.QueryString來取得變量的值夺克，而POST方式通過Request.Form來獲取變量的值箕宙，

也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值铺纽。

然而，在以下情況中哟忍，請(qǐng)使用POST 請(qǐng)求：

無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）

向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）

發(fā)送包含未知字符的用戶輸入時(shí)狡门，POST 比 GET 更穩(wěn)定也更可靠

34.Javascript無阻塞加載具體方式

[if !supportLists]·?[endif]

將腳本放在底部。<link>還是放在head中锅很，用以保證在js加載前其馏，能加載出正常顯示的頁面。<script>標(biāo)簽放在</body>前爆安。

成組腳本：由于每個(gè)<script>標(biāo)簽下載時(shí)阻塞頁面解析過程叛复，所以限制頁面的<script>總數(shù)也可以改善性能。適用于內(nèi)聯(lián)腳本和外部腳本扔仓。

非阻塞腳本：等頁面完成加載后褐奥，再加載js代碼。也就是翘簇，在window.onload事件發(fā)出后開始下載代碼撬码。 （1）defer屬性：支持IE4和fierfox3.5更高版本瀏覽器 （2）動(dòng)態(tài)腳本元素：文檔對(duì)象模型（DOM）允許你使用js動(dòng)態(tài)創(chuàng)建

35.eval是做什么的？

它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行版保；

應(yīng)該避免使用eval呜笑，不安全，非常耗性能（2次彻犁，一次解析成js語句叫胁，一次執(zhí)行）。

36.JavaScript原型汞幢，原型鏈 ? 有什么特點(diǎn)驼鹅？

原型對(duì)象也是普通的對(duì)象，是對(duì)象一個(gè)自帶隱式的__proto__ 屬性急鳄，原型也有可能有自己的原型谤民，如果一個(gè)原型對(duì)象的原型不為null的話，我們就稱之為原型鏈疾宏。*

原型鏈?zhǔn)怯梢恍┯脕砝^承和共享屬性的對(duì)象組成的（有限的）對(duì)象鏈张足。

37.事件、IE與火狐的事件機(jī)制有什么區(qū)別坎藐？ 如何阻止冒泡为牍？

1. 我們?cè)诰W(wǎng)頁中的某個(gè)操作（有的操作對(duì)應(yīng)多個(gè)事件）哼绑。例如：當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件。是可以被 JavaScript 偵測(cè)到的行為碉咆。 2. 事件處理機(jī)制：IE是事件冒泡抖韩、firefox同時(shí)支持兩種事件模型，也就是：捕獲型事件和冒泡型事件疫铜。茂浮； 3. ev.stopPropagation();注意舊ie的方法 ev.cancelBubble = true;

38.ajax 是什么?ajax 的交互模型?同步和異步的區(qū)別?如何解決跨域問題?

詳情請(qǐng)見：JavaScript學(xué)習(xí)總結(jié)（七）Ajax和Http狀態(tài)字

1. 通過異步模式，提升了用戶體驗(yàn)

2. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸壳咕，減少不必要的數(shù)據(jù)往返席揽，減少了帶寬占用

3. Ajax在客戶端運(yùn)行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作谓厘，減少了大用戶量下的服務(wù)器負(fù)載幌羞。

2. Ajax的最大的特點(diǎn)是什么。

?Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新（局部刷新）

?readyState屬性 狀態(tài) 有5個(gè)可取值： 0=未初始化 竟稳，1=啟動(dòng) 2=發(fā)送属桦，3=接收，4=完成

ajax的缺點(diǎn)

?1他爸、ajax不支持瀏覽器back按鈕聂宾。

?2、安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)讲逛。

?3亏吝、對(duì)搜索引擎的支持比較弱。

?4盏混、破壞了程序的異常機(jī)制蔚鸥。

?5、不容易調(diào)試许赃。

跨域：jsonp止喷、 iframe、window.name混聊、window.postMessage弹谁、服務(wù)器上設(shè)置代理頁面

39.AMD和CMD 規(guī)范的區(qū)別？

詳情請(qǐng)見：詳解JavaScript模塊化開發(fā)

40.網(wǎng)站重構(gòu)的理解句喜？

網(wǎng)站重構(gòu)：在不改變外部行為的前提下预愤，簡(jiǎn)化結(jié)構(gòu)、添加可讀性咳胃，而在網(wǎng)站前端保持一致的行為植康。也就是說是在不改變UI的情況下，對(duì)網(wǎng)站進(jìn)行優(yōu)化展懈，在擴(kuò)展的同時(shí)保持一致的UI销睁。

對(duì)于傳統(tǒng)的網(wǎng)站來說重構(gòu)通常是：

表格(table)布局改為DIV+CSS

使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對(duì)于不合規(guī)范的CSS供璧、如對(duì)IE6有效的)

對(duì)于移動(dòng)平臺(tái)的優(yōu)化

針對(duì)于SEO進(jìn)行優(yōu)化

深層次的網(wǎng)站重構(gòu)應(yīng)該考慮的方面

減少代碼間的耦合

讓代碼保持彈性

嚴(yán)格按規(guī)范編寫代碼

設(shè)計(jì)可擴(kuò)展的API

代替舊有的框架、語言(如VB)

增強(qiáng)用戶體驗(yàn)

通常來說對(duì)于速度的優(yōu)化也包含在重構(gòu)中

壓縮JS冻记、CSS睡毒、image等前端資源(通常是由服務(wù)器來解決)

程序的性能優(yōu)化(如數(shù)據(jù)讀寫)

采用CDN來加速資源加載

對(duì)于JS DOM的優(yōu)化

HTTP服務(wù)器的文件緩存

41.js數(shù)組去重

以下是數(shù)組去重的三種方法：

Array.prototype.unique1 = function () {

?var n = []; //一個(gè)新的臨時(shí)數(shù)組

?for (var i = 0; i < this.length; i++) //遍歷當(dāng)前數(shù)組

?{

? ?//如果當(dāng)前數(shù)組的第i已經(jīng)保存進(jìn)了臨時(shí)數(shù)組，那么跳過冗栗，

? ?//否則把當(dāng)前項(xiàng)push到臨時(shí)數(shù)組里面

? ?if (n.indexOf(this[i]) == -1) n.push(this[i]);

?}

?return n;

}

Array.prototype.unique2 = function()

{

? ?var n = {},r=[]; //n為hash表演顾，r為臨時(shí)數(shù)組

? ?for(var i = 0; i < this.length; i++) //遍歷當(dāng)前數(shù)組

? ?{

? ? ? ?if (!n[this[i]]) //如果hash表中沒有當(dāng)前項(xiàng)

? ? ? ?{

? ? ? ? ? ?n[this[i]] = true; //存入hash表

? ? ? ? ? ?r.push(this[i]); //把當(dāng)前數(shù)組的當(dāng)前項(xiàng)push到臨時(shí)數(shù)組里面

? ? ? ?}

? ?}

? ?return r;

}

Array.prototype.unique3 = function()

{

? ?var n = [this[0]]; //結(jié)果數(shù)組

? ?for(var i = 1; i < this.length; i++) //從第二項(xiàng)開始遍歷

? ?{

? ? ? ?//如果當(dāng)前數(shù)組的第i項(xiàng)在當(dāng)前數(shù)組中第一次出現(xiàn)的位置不是i，

? ? ? ?//那么表示第i項(xiàng)是重復(fù)的贞瞒，忽略掉偶房。否則存入結(jié)果數(shù)組

? ? ? ?if (this.indexOf(this[i]) == i) n.push(this[i]);

? ?}

? ?return n;

}

42.HTTP狀態(tài)碼

100 ?Continue ?繼續(xù)，一般在發(fā)送post請(qǐng)求時(shí)军浆，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認(rèn)挡闰，之后發(fā)送具體參數(shù)信息

200 ?OK ? 正常返回信息

201 ?Created ?請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源

202 ?Accepted ?服務(wù)器已接受請(qǐng)求乒融，但尚未處理

301 ?Moved Permanently ?請(qǐng)求的網(wǎng)頁已永久移動(dòng)到新位置。

302 Found ?臨時(shí)性重定向摄悯。

303 See Other ?臨時(shí)性重定向赞季，且總是使用 GET 請(qǐng)求新的 URI。

304 ?Not Modified ?自從上次請(qǐng)求后奢驯，請(qǐng)求的網(wǎng)頁未修改過申钩。

400 Bad Request ?服務(wù)器無法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求瘪阁。

401 Unauthorized ?請(qǐng)求未授權(quán)撒遣。

403 Forbidden ?禁止訪問。

404 Not Found ?找不到如何與 URI 相匹配的資源管跺。

500 Internal Server Error ?最常見的服務(wù)器端錯(cuò)誤义黎。

503 Service Unavailable 服務(wù)器端暫時(shí)無法處理請(qǐng)求（可能是過載或維護(hù)）。

43.說說TCP傳輸?shù)娜挝帐植呗?/b>

為了準(zhǔn)確無誤地把數(shù)據(jù)送達(dá)目標(biāo)處豁跑，TCP協(xié)議采用了三次握手策略廉涕。用TCP協(xié)議把數(shù)據(jù)包送出去后，TCP不會(huì)對(duì)傳送 ?后的情況置之不理艇拍，它一定會(huì)向?qū)Ψ酱_認(rèn)是否成功送達(dá)狐蜕。握手過程中使用了TCP的標(biāo)志：SYN和ACK。

發(fā)送端首先發(fā)送一個(gè)帶SYN標(biāo)志的數(shù)據(jù)包給對(duì)方卸夕。接收端收到后层释，回傳一個(gè)帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息。最后娇哆，發(fā)送端再回傳一個(gè)帶ACK標(biāo)志的數(shù)據(jù)包湃累，代表“握手”結(jié)束

若在握手過程中某個(gè)階段莫名中斷勃救，TCP協(xié)議會(huì)再次以相同的順序發(fā)送相同的數(shù)據(jù)包。

44.談?wù)勑阅軆?yōu)化問題

代碼層面：避免使用css表達(dá)式治力，避免使用高級(jí)選擇器蒙秒，通配選擇器。 緩存利用：緩存Ajax宵统，使用CDN晕讲，使用外部js和css文件以便緩存，添加Expires頭马澈，服務(wù)端配置Etag瓢省，減少DNS查找等 請(qǐng)求數(shù)量：合并樣式和腳本，使用css圖片精靈痊班，初始首屏之外的圖片資源按需加載勤婚，靜態(tài)資源延遲加載。 請(qǐng)求帶寬：壓縮文件涤伐，開啟GZIP馒胆，

45.移動(dòng)端性能優(yōu)化

盡量使用css3動(dòng)畫，開啟硬件加速凝果。適當(dāng)使用touch事件代替click事件祝迂。避免使用css3漸變陰影效果。 盡可能少的使用box-shadow與gradients器净。box-shadow與gradients往往都是頁面的性能殺手

46.棧和隊(duì)列的區(qū)別?

棧的插入和刪除操作都是在一端進(jìn)行的型雳，而隊(duì)列的操作卻是在兩端進(jìn)行的。

隊(duì)列先進(jìn)先出山害，棧先進(jìn)后出纠俭。

棧只允許在表尾一端進(jìn)行插入和刪除，而隊(duì)列只允許在表尾一端進(jìn)行插入粗恢，在表頭一端進(jìn)行刪除

47.棧和堆的區(qū)別柑晒？

棧區(qū)（stack）— ??由編譯器自動(dòng)分配釋放 ??，存放函數(shù)的參數(shù)值眷射，局部變量的值等匙赞。

堆區(qū)（heap） ??— ??一般由程序員分配釋放， ??若程序員不釋放妖碉，程序結(jié)束時(shí)可能由OS回收涌庭。

堆（數(shù)據(jù)結(jié)構(gòu)）：堆可以被看成是一棵樹，如：堆排序欧宜；

棧（數(shù)據(jù)結(jié)構(gòu)）：一種先進(jìn)后出的數(shù)據(jù)結(jié)構(gòu)坐榆。