說說你對閉包的理解

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

閉包有三個特性:

“

1.函數(shù)嵌套函數(shù)
2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量
3.參數(shù)和變量不會被垃圾回收機制回收

請你談?wù)凜ookie的弊端

cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便，分擔(dān)了服務(wù)器存儲的負擔(dān)，但還是有很多局限性的。
第一：每個特定的域名下最多生成20個cookie

1.IE6或更低版本最多20個cookie
2.IE7和之后的版本最后可以有50個cookie。
3.Firefox最多50個cookie4.chrome和Safari沒有做硬性限制

IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。

cookie的最大大約為4096字節(jié)，為了兼容性，一般不能超過4095字節(jié)。

IE 提供了一種存儲可以持久化用戶數(shù)據(jù)，叫做userdata，從IE5.0就開始支持。每個數(shù)據(jù)最多128K，每個域名下最多1M。這個持久化數(shù)據(jù)放在緩存中，如果緩存沒有清理，那么會一直存在。

優(yōu)點：極高的擴展性和可用性

1.通過良好的編程，控制保存在cookie中的session對象的大小。
2.通過加密和安全傳輸技術(shù)（SSL），減少cookie被破解的可能性。
3.只在cookie中存放不敏感數(shù)據(jù)，即使被盜也不會有重大損失。
4.控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。

缺點：

1.`Cookie`數(shù)量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者并不需要知道cookie的意義，他只要原樣轉(zhuǎn)發(fā)cookie就可以達到目的了。
3.有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個計數(shù)器。如果我們把這個計數(shù)器保存在客戶端，那么它起不到任何作用。

瀏覽器本地存儲

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

html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。

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

而localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不會過期的。

web storage和cookie的區(qū)別

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

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

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

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

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

cookie 和session 的區(qū)別：

 1、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。 
 2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進行COOKIE欺騙    考慮到安全應(yīng)當(dāng)使用session。
 3、session會在一定時間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多，會比較占用你服務(wù)器的性能     考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。
 4、單個cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
 5、所以個人建議：    將登陸信息等重要信息存放為SESSION    其他信息如果需要保留，可以放在COOKIE中

CSS 相關(guān)問題

display:none和visibility:hidden的區(qū)別？

display:none  隱藏對應(yīng)的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，就當(dāng)他從來不存在。visibility:hidden  隱藏對應(yīng)的元素，但是在文檔布局中仍保留原來的空間。

CSS中 link 和@import 的區(qū)別是？

(1) link屬于HTML標(biāo)簽，而@import是CSS提供的;
(2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3) import只在IE5以上才能識別，而link是HTML標(biāo)簽，無兼容問題;
(4) link方式的樣式的權(quán)重 高于@import的權(quán)重.

position:absolute和float屬性的異同

A：共同點：對內(nèi)聯(lián)元素設(shè)置`float`和`absolute`屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。
B：不同點：float仍會占據(jù)位置，position會覆蓋文檔流中的其他元素。

介紹一下box-sizing屬性？

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。

• content-box：讓元素維持W3C的標(biāo)準(zhǔn)盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設(shè)置width/height屬性指的是content部分的寬/高

• border-box：讓元素維持IE傳統(tǒng)盒模型（IE6以下版本和IE6~7的怪異模式）。設(shè)置width/height屬性指的是border + padding + content

標(biāo)準(zhǔn)瀏覽器下，按照W3C規(guī)范對盒模型解析，一旦修改了元素的邊框或內(nèi)距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的布局。

CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？CSS3新增偽類有那些？

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, text-indent;

• 不可繼承的樣式：border padding margin width height ;

• 優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);

• 載入樣式以最后載入的定位為準(zhǔn);

優(yōu)先級為:

!important >  id > class > tag  important 比 內(nèi)聯(lián)優(yōu)先級高,但內(nèi)聯(lián)比 id 要高

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> 元素。:enabled :disabled 控制表單控件的禁用狀態(tài)。:checked 單選框或復(fù)選框被選中。

position的值， relative和absolute分別是相對于誰進行定位的？

absolute 生成絕對定位的元素， 相對于最近一級的 定位不是 static 的父元素來進行定位。fixed （老IE不支持） 生成絕對定位的元素，相對于瀏覽器窗口進行定位。 relative 生成相對定位的元素，相對于其在普通流中的位置進行定位。 static 默認值。沒有定位，元素出現(xiàn)在正常的流中

CSS3有哪些新特性？

CSS3實現(xiàn)圓角（border-radius），陰影（box-shadow），對文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜增加了更多的CSS選擇器 多背景 rgba 在CSS3中唯一引入的偽元素是::selection.媒體查詢，多欄布局border-image

XML和JSON的區(qū)別？

(1).數(shù)據(jù)體積方面。JSON相對于XML來講，數(shù)據(jù)的體積小，傳遞的速度更快些。
(2).數(shù)據(jù)交互方面。JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互。
(3).數(shù)據(jù)描述方面。JSON對數(shù)據(jù)的描述性比XML較差。
(4).傳輸速度方面。JSON的速度要遠遠快于XML。

對BFC規(guī)范的理解？

  BFC，塊級格式化上下文，一個創(chuàng)建了新的BFC的盒子是獨立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和布局方向有關(guān)系）的margin會發(fā)生折疊。    （W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進行布局，以及與其他元素的關(guān)系和相互作用。）

解釋下 CSS sprites，以及你要如何在頁面或網(wǎng)站中使用它。

CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以并發(fā)，但是也有限制，一般瀏覽器都是6個。對于未來而言，就不需要這樣做了，因為有了http2。

html部分

說說你對語義化的理解？

1，去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
2，有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；
3，方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
4，便于團隊開發(fā)和維護，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標(biāo)準(zhǔn)的團隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化。

Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

（1）、<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。 
（2）、嚴(yán)格模式的排版和 JS 運作模式是  以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。
（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。（4）、DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。   

你知道多少種Doctype文檔類型？

該標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。 HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。 XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁，而 Quirks （包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計的網(wǎng)頁。

HTML與XHTML——二者有什么區(qū)別

區(qū)別：1.所有的標(biāo)記都必須要有一個相應(yīng)的結(jié)束標(biāo)記
2.所有標(biāo)簽的元素和屬性的名字都必須使用小寫
3.所有的XML標(biāo)記都必須合理嵌套
4.所有的屬性必須用引號""括起來
5.把所有<和&特殊符號用編碼表示
6.給所有屬性賦一個值
7.不要在注釋內(nèi)容中使“--”
8.圖片必須有說明文字

常見兼容性問題？

• png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.也可以引用一段腳本處理.* 瀏覽器默認的margin和padding不同。解決方案是加一個全局的{margin:0;padding:0;}來統(tǒng)一。 IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。 * 浮動ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設(shè)置了浮動，同時又設(shè)置了margin-left或margin-right，margin值會加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(這個符號只有ie6會識別)* 漸進識別的方式，從總體中逐漸排除局部。 首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。 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下,event對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.* 解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。* Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.* 超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}* 怪異模式問題：漏寫DTD聲明，F(xiàn)irefox仍然會按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁，但在IE中會觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫DTD聲明的好習(xí)慣?，F(xiàn)在可以使用html5推薦的寫法：<doctype html>* 上下margin重合問題ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發(fā)生重合。解決方法，養(yǎng)成良好的代碼編寫習(xí)慣，同時采用margin-top或者同時采用margin-bottom。* ie6對png圖片格式支持不好(引用一段腳本處理)

解釋下浮動和它的工作原理？清除浮動的技巧

浮動元素脫離文檔流，不占據(jù)空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。1.使用空標(biāo)簽清除浮動。 這種方法是在所有浮動標(biāo)簽后面添加一個空標(biāo)簽 定義css clear:both. 弊端就是增加了無意義標(biāo)簽。2.使用overflow。 給包含浮動元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。3.使用after偽對象清除浮動。 該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設(shè)置 height:0，否則該元素會比實際高出若干像素；

浮動元素引起的問題和解決辦法？

浮動元素引起的問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)

解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對于問題1，添加如下樣式，給父元素添加clearfix樣式：

.clearfix: after {
  content: ".";display: block;height: 0;clear: both;visibility: hidden;
}.clearfix {
  display: inline - block;
} /* for IE/Mac */

清除浮動的幾種方法：

1，額外標(biāo)簽法，<div style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔。）
2，使用after偽類#parent:after{    content:".";    height:0;    visibility:hidden;    display:block;    clear:both;    }
3,浮動外部元素4,設(shè)置`overflow`為`hidden`或者auto

IE 8以下版本的瀏覽器中的盒模型有什么不同

IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內(nèi)邊距和邊框

DOM操作——怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點。

（1）創(chuàng)建新節(jié)點      createDocumentFragment()    //創(chuàng)建一個DOM片段      createElement()   //創(chuàng)建一個具體的元素      createTextNode()   //創(chuàng)建一個文本節(jié)點
（2）添加、移除、替換、插入      appendChild()      removeChild()      replaceChild()      insertBefore() //在已有的子節(jié)點前插入一個新的子節(jié)點
（3）查找      getElementsByTagName()    //通過標(biāo)簽名稱      getElementsByName()    //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數(shù)組，其中包括id等于name值的)      getElementById()    //通過元素Id，唯一性

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

• HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。* 拖拽釋放(Drag and drop) API 語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section） 音頻、視頻API(audio,video) 畫布(Canvas) API 地理(Geolocation) API 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失； sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除 表單控件，calendar、date、time、email、url、search 新的技術(shù)webworker, websocket, Geolocation* 移除的元素純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；對可用性產(chǎn)生負面影響的元素：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的樣式：* 當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 如何區(qū)分：DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

iframe的優(yōu)缺點？

1.`<iframe>`優(yōu)點：    解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題    Security sandbox    并行加載腳本
2.`<iframe>`的缺點：    *iframe會阻塞主頁面的Onload事件；    *即時內(nèi)容為空，加載也需要時間    *沒有語意 

如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信?

調(diào)用localstorge、cookies等本地存儲方式

線程與進程的區(qū)別

一個程序至少有一個進程,一個進程至少有一個線程. 線程的劃分尺度小于進程，使得多線程程序的并發(fā)性高。 另外，進程在執(zhí)行過程中擁有獨立的內(nèi)存單元，而多個線程共享內(nèi)存，從而極大地提高了程序的運行效率。 線程在執(zhí)行過程中與進程還是有區(qū)別的。每個獨立的線程有一個程序運行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個線程執(zhí)行控制。 從邏輯角度來看，多線程的意義在于一個應(yīng)用程序中，有多個執(zhí)行部分可以同時執(zhí)行。但操作系統(tǒng)并沒有將多個線程看做多個獨立的應(yīng)用，來實現(xiàn)進程的調(diào)度和管理以及資源分配。這就是進程和線程的重要區(qū)別。

你如何對網(wǎng)站的文件和資源進行優(yōu)化？

期待的解決方案包括： 文件合并 文件最小化/文件壓縮 使用 CDN 托管 緩存的使用（多個域名來提供緩存） 其他

請說出三種減少頁面加載時間的方法。

 1.優(yōu)化圖片  
2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）  
3.優(yōu)化CSS（壓縮合并css，如margin-top,margin-left...)  
4.網(wǎng)址后加斜杠（如www.campr.com/目錄，會判斷這個“目錄是什么文件類型，或者是目錄。） 
5.標(biāo)明高度和寬度（如果瀏覽器沒有找到這兩個參數(shù)，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調(diào)整頁面。這不但影響速度，也影響瀏覽體驗。 當(dāng)瀏覽器知道了高度和寬度參數(shù)后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續(xù)加載后面的內(nèi)容。從而加載時間快了，瀏覽體驗也更好了。）
6.減少http請求（合并文件，合并圖片）。

你都使用哪些工具來測試代碼的性能？

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

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

FOUC - Flash Of Unstyled Content 文檔樣式閃爍 <style type="text/css" media="all">@import "../fouc.css";</style> 而引用CSS文件的@import就是造成這個問題的罪魁禍?zhǔn)住E會先加載整個HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，因此，在頁面DOM加載完成到CSS導(dǎo)入完成中間會有一段時間頁面上的內(nèi)容是沒有樣式的，這段時間的長短跟網(wǎng)速，電腦速度都有關(guān)系。 解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就可以了。

null和undefined的區(qū)別？

null是一個表示”無”的對象，轉(zhuǎn)為數(shù)值時為0；undefined是一個表示”無”的原始值，轉(zhuǎn)為數(shù)值時為NaN。

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

undefined表示”缺少值”，就是此處應(yīng)該有一個值，但是還沒有定義。典型用法是：

（1）變量被聲明了，但沒有賦值時，就等于undefined。
（2) 調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。
（3）對象沒有賦值的屬性，該屬性的值為undefined。
（4）函數(shù)沒有返回值時，默認返回undefined。

null表示”沒有對象”，即該處不應(yīng)該有值。典型用法是：

（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。
（2） 作為對象原型鏈的終點。

new操作符具體干了什么呢?

   1、創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型。
   2、屬性和方法被加入到 this 引用的對象中。
   3、新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this 。var obj  = {};obj.__proto__ = Base.prototype;Base.call(obj); 

js延遲加載的方式有哪些？

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

如何解決跨域問題?

    jsonp、 document.domain+iframe、window.name、window.postMessage、服務(wù)器上設(shè)置代理頁面jsonp的原理是動態(tài)插入script標(biāo)簽

具體參見：詳解js跨域問題

documen.write和 innerHTML的區(qū)別

document.write只能重繪整個頁面innerHTML可以重繪頁面的一部分

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

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

哪些操作會造成內(nèi)存泄漏？

內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數(shù)量。如果一個對象的引用數(shù)量為 0（沒有其他對象引用過該對象），或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的，那么該對象的內(nèi)存即可回收。setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏。閉包、控制臺日志、循環(huán)（在兩個對象彼此引用且彼此保留時，就會產(chǎn)生一個循環(huán)）

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

JavaScript中的作用域與變量聲明提升？

詳見：詳解JavaScript函數(shù)模式

如何判斷當(dāng)前腳本運行在瀏覽器還是node環(huán)境中？

通過判斷Global對象是否為window，如果不為window，當(dāng)前腳本沒有運行在瀏覽器中

其他問題？

你遇到過比較難的技術(shù)問題是？你是如何解決的？

列舉IE 與其他瀏覽器不一樣的特性？

什么叫優(yōu)雅降級和漸進增強？

優(yōu)雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效.漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。

詳見：css學(xué)習(xí)歸納總結(jié)（一）

WEB應(yīng)用從服務(wù)器主動推送Data到客戶端有那些方式？

Javascript數(shù)據(jù)推送

“

Commet：基于HTTP長連接的服務(wù)器推送技術(shù)

基于WebSocket的推送方案

SSE（Server-Send Event）：服務(wù)器推送數(shù)據(jù)新方式

對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣？

前端是最貼近用戶的程序員，比后端、數(shù)據(jù)庫、產(chǎn)品經(jīng)理、運營、安全都近。   
 1、實現(xiàn)界面交互   
 2、提升用戶體驗    
3、有了Node.js，前端可以實現(xiàn)服務(wù)端的一些事情前端是最貼近用戶的程序員，前端的能力就是能讓產(chǎn)品從 90分進化到 100 分，甚至更好， 參與項目，快速高質(zhì)量完成實現(xiàn)效果圖，精確到1px； 與團隊成員，UI設(shè)計，產(chǎn)品經(jīng)理的溝通； 做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗； 處理hack，兼容、寫出優(yōu)美的代碼格式； 針對服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。

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

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

  （1） 減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存 ，圖片服務(wù)器。  
（2） 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)  
（3） 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。  
（4） 當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style。  
（5） 少用全局變量、緩存DOM節(jié)點查找的結(jié)果。減少IO讀取操作。  
（6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態(tài)屬性)。  
（7） 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部  加上時間戳。

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發(fā)生了什么？

    分為4個步驟：    
（1），當(dāng)發(fā)送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，瀏覽器都會開啟一個線程來處理這個請求，同時在遠程DNS服務(wù)器上啟動一個DNS查詢。這能使瀏覽器獲得請求對應(yīng)的IP地址。    
（2）， 瀏覽器與遠程Web服務(wù)器通過TCP三次握手協(xié)商來建立一個TCP/IP連接。該握手包括一個同步報文，一個同步-應(yīng)答報文和一個應(yīng)答報文，這三個報文在 瀏覽器和服務(wù)器之間傳遞。該握手首先由客戶端嘗試建立起通信，而后服務(wù)器應(yīng)答并接受客戶端的請求，最后由客戶端發(fā)出該請求已經(jīng)被接受的報文。   
 （3），一旦TCP/IP連接建立，瀏覽器會通過該連接向遠程服務(wù)器發(fā)送HTTP的GET請求。遠程服務(wù)器找到資源并使用HTTP響應(yīng)返回該資源，值為200的HTTP響應(yīng)狀態(tài)表示一個正確的響應(yīng)。    
（4），此時，Web服務(wù)器提供資源服務(wù)，客戶端開始下載資源。請求返回后，便進入了我們關(guān)注的前端模塊簡單來說，瀏覽器會解析HTML生成DOM Tree，其次會根據(jù)CSS生成CSS Rule Tree，而javascript又可以根據(jù)DOM API操作DOM

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

平時如何管理你的項目？

先期團隊必須確定好全局樣式（globe.css），編碼模式(utf-8) 等； 編寫習(xí)慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）； 標(biāo)注樣式編寫人，各模塊都及時標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）； 頁面進行標(biāo)注（例如 頁面 模塊 開始和結(jié)束）； CSS跟HTML 分文件夾并行存放，命名都得統(tǒng)一（例如style.css）； JS 分文件夾存放 命名以該JS功能為準(zhǔn)的英文翻譯。 圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來的管理

說說最近最流行的一些東西吧？常去哪些網(wǎng)站？

Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。網(wǎng)站：w3cfuns,sf,hacknews,CSDN,慕課，博客園，InfoQ,w3cplus等

javascript對象的幾種創(chuàng)建方式

1，工廠模式
2，構(gòu)造函數(shù)模式
3，原型模式
4，混合構(gòu)造函數(shù)和原型模式
5，動態(tài)原型模式
6，寄生構(gòu)造函數(shù)模式
7，穩(wěn)妥構(gòu)造函數(shù)模式

javascript繼承的6種方法

1，原型鏈繼承
2，借用構(gòu)造函數(shù)繼承
3，組合繼承(原型+借用構(gòu)造)
4，原型式繼承
5，寄生式繼承
6，寄生組合式繼承

詳情：JavaScript繼承方式詳解

ajax過程

(1)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象.
(2)創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息.
(3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請求.
(5)獲取異步調(diào)用返回的數(shù)據(jù).
(6)使用JavaScript和DOM實現(xiàn)局部刷新.

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

異步加載和延遲加載

1.異步加載的方案： 動態(tài)插入script標(biāo)簽
2.通過ajax去獲取js代碼，然后通過eval執(zhí)行
3.script標(biāo)簽上添加defer或者async屬性
4.創(chuàng)建并插入iframe，讓它異步執(zhí)行js5.延遲加載：有些 js 代碼并不是頁面初始化的時候就立刻需要的，而稍后的某些情況才需要的。

前端安全問題？

sql注入原理

就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務(wù)器執(zhí)行惡意的SQL命令。

總的來說有以下幾點：

1.永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，可以通過正則表達式，或限制長度，對單引號和雙"-"進行轉(zhuǎn)換等。
2.永遠不要使用動態(tài)拼裝SQL，可以使用參數(shù)化的SQL或者直接使用存儲過程進行數(shù)據(jù)查詢存取。
3.永遠不要使用管理員權(quán)限的數(shù)據(jù)庫連接，為每個應(yīng)用使用單獨的權(quán)限有限的數(shù)據(jù)庫連接。
4.不要把機密信息明文存放，請加密或者hash掉密碼和敏感的信息。

XSS原理及防范

Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面里插入惡意html標(biāo)簽或者javascript代碼。比如：攻擊者在論壇中放一個
看似安全的鏈接，騙取用戶點擊后，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，
當(dāng)用戶提交表單的時候，卻把信息傳送到攻擊者的服務(wù)器中，而不是用戶原本以為的信任站點。

XSS防范方法

1.代碼里對用戶輸入的地方和變量都需要仔細檢查長度和對”<”,”>”,”;”,”’”等字符做過濾；其次任何內(nèi)容寫到頁面之前都必須加以encode，避免不小心把html tag 弄出來。這一個層面做好，至少可以堵住超過一半的XSS 攻擊。

2.避免直接在cookie 中泄露用戶隱私，例如email、密碼等等。
3.通過使cookie 和系統(tǒng)ip 綁定來降低cookie 泄露后的危險。這樣攻擊者得到的cookie 沒有實際價值，不可能拿來重放。

4.盡量采用POST 而非GET 提交表單

XSS與CSRF有什么區(qū)別嗎？

XSS是獲取信息，不需要提前知道其他用戶頁面的代碼和數(shù)據(jù)包。CSRF是代替用戶完成指定的動作，需要知道其他用戶頁面的代碼和數(shù)據(jù)包。

要完成一次CSRF攻擊，受害者必須依次完成兩個步驟：

1.登錄受信任網(wǎng)站A，并在本地生成Cookie。
2.在不登出A的情況下，訪問危險網(wǎng)站B。

CSRF的防御

1.服務(wù)端的CSRF方式方法很多樣，但總的思想都是一致的，就是在客戶端頁面增加偽隨機數(shù)。
2.使用驗證碼

ie各版本和chrome可以并行下載多少個資源

IE6 兩個并發(fā)，iE7升級之后的6個并發(fā)，之后版本也是6個Firefox，chrome也是6個

javascript里面的繼承怎么實現(xiàn)，如何避免原型鏈上面的對象共享

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

grunt， YUI compressor 和 google clojure用來進行代碼壓縮的用法。

YUI Compressor 是一個用來壓縮 JS 和 CSS 文件的工具，采用Java開發(fā)。使用方法：//壓縮JSjava -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js//壓縮CSSjava -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css

詳情請見：你需要掌握的前端代碼性能優(yōu)化工具

Flash、Ajax各自的優(yōu)缺點，在使用中如何取舍？

1、Flash ajax對比Flash適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。Ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。共同點：與服務(wù)器的無刷新傳遞消息、用戶離線和在線狀態(tài)、操作DOM

請解釋一下 JavaScript 的同源策略。

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

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

為什么要有同源限制？

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

什么是 “use strict”; ? 使用它的好處和壞處分別是什么？

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

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

- 消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;- 消除代碼運行的一些不安全之處，保證代碼運行的安全；- 提高編譯器效率，增加運行速度；- 為未來新版本的Javascript做好鋪墊。

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

缺點：
現(xiàn)在網(wǎng)站的JS 都會進行壓縮，一些文件用了嚴(yán)格模式，而另一些沒有。這時這些本來是嚴(yán)格模式的文件，被 merge后，這個串就到了文件的中間，不僅沒有指示嚴(yán)格模式，反而在壓縮后浪費了字節(jié)。

GET和POST的區(qū)別，何時使用POST？

GET：一般用于信息獲取，使用URL傳遞參數(shù)，對所發(fā)送信息的數(shù)量也有限制，一般在2000個字符    POST：一般用于修改服務(wù)器上的資源，對所發(fā)送的信息沒有限制。    GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，    也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。然而，在以下情況中，請使用 POST 請求：無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠

哪些地方會出現(xiàn)css阻塞，哪些地方會出現(xiàn)js阻塞？

js的阻塞特性：所有瀏覽器在下載JS的時候，會阻止一切其他活動，比如其他資源的下載，內(nèi)容的呈現(xiàn)等等。直到JS下載、解析、執(zhí)行完畢后才開始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容。為了提高用戶體驗，新一代瀏覽器都支持并行下載JS，但是JS下載仍然會阻塞其它資源的下載（例如.圖片，css文件等）。

由于瀏覽器為了防止出現(xiàn)JS修改DOM樹，需要重新構(gòu)建DOM樹的情況，所以就會阻塞其他的下載和呈現(xiàn)。

嵌入JS會阻塞所有內(nèi)容的呈現(xiàn)，而外部JS只會阻塞其后內(nèi)容的顯示，2種方式都會阻塞其后資源的下載。也就是說外部樣式不會阻塞外部腳本的加載，但會阻塞外部腳本的執(zhí)行。

CSS怎么會阻塞加載了？CSS本來是可以并行下載的，在什么情況下會出現(xiàn)阻塞加載了(在測試觀察中，IE6下CSS都是阻塞加載）

當(dāng)CSS后面跟著嵌入的JS的時候，該CSS就會出現(xiàn)阻塞后面資源下載的情況。而當(dāng)把嵌入JS放到CSS前面，就不會出現(xiàn)阻塞的情況了。

根本原因：因為瀏覽器會維持html中css和js的順序，樣式表必須在嵌入的JS執(zhí)行前先加載、解析完。而嵌入的JS會阻塞后面的資源加載，所以就會出現(xiàn)上面CSS阻塞下載的情況。

嵌入JS應(yīng)該放在什么位置？

1、放在底部，雖然放在底部照樣會阻塞所有呈現(xiàn)，但不會阻塞資源下載。   
2、如果嵌入JS放在head中，請把嵌入JS放在CSS頭部。   
3、使用defer（只支持IE）   
4、不要在嵌入的JS中調(diào)用運行時間較長的函數(shù)，如果一定要用，可以用`setTimeout`來調(diào)用

Javascript無阻塞加載具體方式

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

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

• 非阻塞腳本：等頁面完成加載后，再加載js代碼。也就是，在window.onload事件發(fā)出后開始下載代碼。
  （1）defer屬性：支持IE4和fierfox3.5更高版本瀏覽器
  （2）動態(tài)腳本元素：文檔對象模型（DOM）允許你使用js動態(tài)創(chuàng)建HTML的幾乎全部文檔內(nèi)容。代碼如下：

<script>var script=document.createElement("script");script.type="text/javascript";script.src="file.js";document.getElementsByTagName("head")[0].appendChild(script);</script>

此技術(shù)的重點在于：無論在何處啟動下載，文件額下載和運行都不會阻塞其他頁面處理過程。即使在head里（除了用于下載文件的http鏈接）。

閉包相關(guān)問題？

詳情請見：詳解js閉包

js事件處理程序問題？

詳情請見：JavaScript學(xué)習(xí)總結(jié)（九）事件詳解

eval是做什么的？

它的功能是把對應(yīng)的字符串解析成JS代碼并運行；應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執(zhí)行）。

JavaScript原型，原型鏈 ? 有什么特點？

*  原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不為null的話，我們就稱之為原型鏈。*  原型鏈?zhǔn)怯梢恍┯脕砝^承和共享屬性的對象組成的（有限的）對象鏈。

事件、IE與火狐的事件機制有什么區(qū)別？如何阻止冒泡？

 1\. 我們在網(wǎng)頁中的某個操作（有的操作對應(yīng)多個事件）。例如：當(dāng)我們點擊一個按鈕就會產(chǎn)生一個事件。是可以被 JavaScript 偵測到的行為。  
 2\. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。； 
3.  ev.stopPropagation();注意舊ie的方法 ev.cancelBubble = true;

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

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

1. 通過異步模式，提升了用戶體驗  
2. 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用  
3\. Ajax在客戶端運行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負載。 
2\. Ajax的最大的特點是什么。  Ajax可以實現(xiàn)動態(tài)不刷新（局部刷新）  readyState屬性 狀態(tài) 有5個可取值： 0=未初始化 ，1=啟動 2=發(fā)送，3=接收，4=完成ajax的缺點  
1、ajax不支持瀏覽器back按鈕。 
2、安全問題 AJAX暴露了與服務(wù)器交互的細節(jié)。  
3、對搜索引擎的支持比較弱。  
4、破壞了程序的異常機制。  
5、不容易調(diào)試?？缬颍簀sonp、 iframe、window.name、window.postMessage、服務(wù)器上設(shè)置代理頁面

js對象的深度克隆

function clone(Obj) {
    var buf; if (Obj instanceof Array) {
        buf = [];  //創(chuàng)建一個空的數(shù)組             
        var i = Obj.length; while (i--) { buf[i] = clone(Obj[i]); } return buf;
    } else if (Obj instanceof Object) {
        buf = {};  //創(chuàng)建一個空對象           
        for (var k in Obj) {  //為這個對象添加新的屬性                 
            buf[k] = clone(Obj[k]);
        } return buf;
    } else { return Obj; }
}  

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

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

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

網(wǎng)站重構(gòu)：在不改變外部行為的前提下，簡化結(jié)構(gòu)、添加可讀性，而在網(wǎng)站前端保持一致的行為。也就是說是在不改變UI的情況下，對網(wǎng)站進行優(yōu)化，在擴展的同時保持一致的UI。對于傳統(tǒng)的網(wǎng)站來說重構(gòu)通常是：表格(table)布局改為DIV+CSS使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對于不合規(guī)范的CSS、如對IE6有效的)對于移動平臺的優(yōu)化針對于SEO進行優(yōu)化深層次的網(wǎng)站重構(gòu)應(yīng)該考慮的方面減少代碼間的耦合讓代碼保持彈性嚴(yán)格按規(guī)范編寫代碼設(shè)計可擴展的API代替舊有的框架、語言(如VB)增強用戶體驗通常來說對于速度的優(yōu)化也包含在重構(gòu)中壓縮JS、CSS、image等前端資源(通常是由服務(wù)器來解決)程序的性能優(yōu)化(如數(shù)據(jù)讀寫)采用CDN來加速資源加載對于JS DOM的優(yōu)化HTTP服務(wù)器的文件緩存

如何獲取UA？

function whatBrowser() {
    document.Browser.Name.value = navigator.appName;
    document.Browser.Version.value = navigator.appVersion;
    document.Browser.Code.value = navigator.appCodeName;
    document.Browser.Agent.value = navigator.userAgent;
}

js數(shù)組去重

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

Array.prototype.unique1 = function () {
    var n = []; //一個新的臨時數(shù)組 
    for (var i = 0; i < this.length; i++) //遍歷當(dāng)前數(shù)組  
    {    //如果當(dāng)前數(shù)組的第i已經(jīng)保存進了臨時數(shù)組，那么跳過，    //否則把當(dāng)前項push到臨時數(shù)組里面  
        if (n.indexOf(this[i]) == -1) n.push(this[i]);
    }
    return n;
}
Array.prototype.unique2 = function () {
    var n = {}, r = []; //n為hash表，r為臨時數(shù)組    
    for (var i = 0; i < this.length; i++) //遍歷當(dāng)前數(shù)組    
    {
        if (!n[this[i]]) //如果hash表中沒有當(dāng)前項        
        {
            n[this[i]] = true; //存入hash表            
            r.push(this[i]); //把當(dāng)前數(shù)組的當(dāng)前項push到臨時數(shù)組里面      
        }
    }
    return r;
}
Array.prototype.unique3 = function () {
    var n = [this[0]]; //結(jié)果數(shù)組    
    for (var i = 1; i < this.length; i++) //從第二項開始遍歷    
    {        //如果當(dāng)前數(shù)組的第i項在當(dāng)前數(shù)組中第一次出現(xiàn)的位置不是i，        //那么表示第i項是重復(fù)的，忽略掉。否則存入結(jié)果數(shù)組       
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
}

HTTP狀態(tài)碼

100 Continue 繼續(xù)，一般在發(fā)送post請求時，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認，之后發(fā)送具體參數(shù)信息200 OK 正常返回信息201 Created 請求成功并且服務(wù)器創(chuàng)建了新的資源202 Accepted 服務(wù)器已接受請求，但尚未處理301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位置。302 Found 臨時性重定向。303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。304 Not Modified 自從上次請求后，請求的網(wǎng)頁未修改過。400 Bad Request 服務(wù)器無法理解請求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請求。401 Unauthorized 請求未授權(quán)。403 Forbidden 禁止訪問。404 Not Found 找不到如何與 URI 相匹配的資源。500 Internal Server Error 最常見的服務(wù)器端錯誤。503 Service Unavailable 服務(wù)器端暫時無法處理請求（可能是過載或維護）。

js操作獲取和設(shè)置cookie

// 創(chuàng)建cookie   encodeURIComponent() 函數(shù)可把字符串作為 URI 組件進行編碼
function setCookie(name, value, expires, path, domain, secure) {
    // cookieName（cookie名稱）= cookieValue（cookie值）；
    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
   //  如果expires（失效日期）是Data類型，則加上expires（失效日期）
    if (expires instanceof Date) {
        cookieText += '; expires=' + expires;
    }
    // 如果有path ( 可訪問url)，則加上
    if (path) {
        cookieText += "; path=" + path     }
     // domain (可訪問主機)
    if (domain) {
        cookieText += '; domain=' + domain;
    }
    // secure（是否限制cookie在http下傳遞給服務(wù)器）
    if (secure) {
        cookieText += '; secure';
    }
    document.cookie = cookieText;
}
// 獲取cookie
function getCookie(name) {
    var cookieName = encodeURIComponent(name) + '=';
    // indexOf() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置
    var cookieStart = document.cookie.indexOf(cookieName);
    var cookieValue = null;
    if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf(';', cookieStart);
        if (cookieEnd == -1) {
            cookieEnd = document.cookie.length;
        }
   // decodeURIComponent() 函數(shù)可對 encodeURIComponent() 函數(shù)編碼的 URI 進行解碼
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
    }
    return cookieValue;
}
// 刪除cookie
function unsetCookie(name) {
    document.cookie = name + "= ; expires=" + new Date(0);
}

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

為了準(zhǔn)確無誤地把數(shù)據(jù)送達目標(biāo)處，TCP協(xié)議采用了三次握手策略。用TCP協(xié)議把數(shù)據(jù)包送出去后，TCP不會對傳送 后的情況置之不理，它一定會向?qū)Ψ酱_認是否成功送達。握手過程中使用了TCP的標(biāo)志：SYN和ACK。發(fā)送端首先發(fā)送一個帶SYN標(biāo)志的數(shù)據(jù)包給對方。接收端收到后，回傳一個帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達確認信息。最后，發(fā)送端再回傳一個帶ACK標(biāo)志的數(shù)據(jù)包，代表“握手”結(jié)束若在握手過程中某個階段莫名中斷，TCP協(xié)議會再次以相同的順序發(fā)送相同的數(shù)據(jù)包。

說說你對Promise的理解

依照 Promise/A+ 的定義，Promise 有四種狀態(tài)：

pending: 初始狀態(tài), 非 fulfilled 或 rejected.fulfilled: 成功的操作.rejected: 失敗的操作.settled: Promise已被fulfilled或rejected，且不是pending

另外， fulfilled 與 rejected 一起合稱 settled。

Promise 對象用來進行延遲(deferred) 和異步(asynchronous ) 計算。

“

Promise 的構(gòu)造函數(shù)

構(gòu)造一個 Promise，最基本的用法如下：

var promise = new Promise(function (resolve, reject) { 
    if (...) {  // succeed        
    resolve(result);   
 } 
    else {   // fails        
    reject(Error(errMessage));
}});

Promise 實例擁有 then 方法（具有 then 方法的對象，通常被稱為 thenable）。它的使用方法如下：

promise.then(onFulfilled, onRejected)

接收兩個函數(shù)作為參數(shù)，一個在 fulfilled 的時候被調(diào)用，一個在 rejected 的時候被調(diào)用，接收參數(shù)就是 future，onFulfilled 對應(yīng) resolve, onRejected 對應(yīng) reject。

Javascript垃圾回收方法

標(biāo)記清除（mark and sweep）

這是JavaScript最常見的垃圾回收方式，當(dāng)變量進入執(zhí)行環(huán)境的時候，比如函數(shù)中聲明一個變量，垃圾回收器將其標(biāo)記為“進入環(huán)境”，當(dāng)變量離開環(huán)境的時候（函數(shù)執(zhí)行結(jié)束）將其標(biāo)記為“離開環(huán)境”。

垃圾回收器會在運行的時候給存儲在內(nèi)存中的所有變量加上標(biāo)記，然后去掉環(huán)境中的變量以及被環(huán)境中變量所引用的變量（閉包），在這些完成之后仍存在標(biāo)記的就是要刪除的變量了

引用計數(shù)(reference counting)

在低版本IE中經(jīng)常會出現(xiàn)內(nèi)存泄露，很多時候就是因為其采用引用計數(shù)方式進行垃圾回收。引用計數(shù)的策略是跟蹤記錄每個值被使用的次數(shù)，當(dāng)聲明了一個 變量并將一個引用類型賦值給該變量的時候這個值的引用次數(shù)就加1，如果該變量的值變成了另外一個，則這個值得引用次數(shù)減1，當(dāng)這個值的引用次數(shù)變?yōu)?的時 候，說明沒有變量在使用，這個值沒法被訪問了，因此可以將其占用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數(shù)為0的值占用的空間。

在IE中雖然JavaScript對象通過標(biāo)記清除的方式進行垃圾回收，但BOM與DOM對象卻是通過引用計數(shù)回收垃圾的，也就是說只要涉及BOM及DOM就會出現(xiàn)循環(huán)引用問題。

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

代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器。
緩存利用：緩存Ajax，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務(wù)端配置Etag，減少DNS查找等
請求數(shù)量：合并樣式和腳本，使用css圖片精靈，初始首屏之外的圖片資源按需加載，靜態(tài)資源延遲加載。
請求帶寬：壓縮文件，開啟GZIP，

移動端性能優(yōu)化

“

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

什么是Etag？

瀏覽器下載組件的時候，會將它們存儲到瀏覽器緩存中。如果需要再次獲取相同的組件，瀏覽器將檢查組件的緩存時間，
假如已經(jīng)過期，那么瀏覽器將發(fā)送一個條件GET請求到服務(wù)器，服務(wù)器判斷緩存還有效，則發(fā)送一個304響應(yīng)，
告訴瀏覽器可以重用緩存組件。

那么服務(wù)器是根據(jù)什么判斷緩存是否還有效呢?答案有兩種方式，一種是前面提到的ETag，另一種是根據(jù)Last-Modified

Expires和Cache-Control

Expires要求客戶端和服務(wù)端的時鐘嚴(yán)格同步。HTTP1.1引入Cache-Control來克服Expires頭的限制。如果max-age和Expires同時出現(xiàn)，則max-age有更高的優(yōu)先級。

Cache-Control: no-cache, private, max-age=0
ETag: abcde
Expires: Thu, 15 Apr 2014 20:00:00 GMT
Pragma: private
Last-Modified: $now // RFC1123 format

棧和隊列的區(qū)別?

棧的插入和刪除操作都是在一端進行的，而隊列的操作卻是在兩端進行的。隊列先進先出，棧先進后出。棧只允許在表尾一端進行插入和刪除，而隊列只允許在表尾一端進行插入，在表頭一端進行刪除

棧和堆的區(qū)別？

棧區(qū)（stack）— 由編譯器自動分配釋放 ，存放函數(shù)的參數(shù)值，局部變量的值等。堆區(qū)（heap） — 一般由程序員分配釋放， 若程序員不釋放，程序結(jié)束時可能由OS回收。堆（數(shù)據(jù)結(jié)構(gòu)）：堆可以被看成是一棵樹，如：堆排序；棧（數(shù)據(jù)結(jié)構(gòu)）：一種先進后出的數(shù)據(jù)結(jié)構(gòu)。

關(guān)于Http 2.0 你知道多少？

HTTP/2引入了“服務(wù)端推（serverpush）”的概念，它允許服務(wù)端在客戶端需要數(shù)據(jù)之前就主動地將數(shù)據(jù)發(fā)送到客戶端緩存中，從而提高性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技術(shù)，允許多個消息在一個連接上同時交差。
它增加了頭壓縮（header compression），因此即使非常小的請求，其請求和響應(yīng)的header都只會占用很小比例的帶寬。

喜歡的點個關(guān)注小編不定時更新更多精彩內(nèi)容

文章轉(zhuǎn)載 作者:雨中的羽毛