面試題

說說你對閉包的理解

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

閉包有三個特性:

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

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

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

1.IE6或更低版本最多20個cookie
2.IE7和之后的版本最后可以有50個cookie吓笙。
3.Firefox最多50個cookie
4.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)不可能保存在客戶端十兢。例如趣竣，為了防止重復提交表單，我們需要在服務(wù)器端保存一個計數(shù)器旱物。如果我們把這個計數(shù)器保存在客戶端遥缕，那么它起不到任何作用。

瀏覽器本地存儲

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

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

sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)户秤，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結(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７及以下不支持外，其他標準瀏覽器都完全支持(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欺騙
    考慮到安全應當使用session柿顶。
 3茄袖、session會在一定時間內(nèi)保存在服務(wù)器上。當訪問增多九串，會比較占用你服務(wù)器的性能
     考慮到減輕服務(wù)器性能方面绞佩，應當使用COOKIE寺鸥。
 4、單個cookie保存的數(shù)據(jù)不能超過4K品山，很多瀏覽器都限制一個站點最多保存20個cookie胆建。
 5、所以個人建議：
    將登陸信息等重要信息存放為SESSION
    其他信息如果需要保留肘交，可以放在COOKIE中

CSS 相關(guān)問題

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

display:none  隱藏對應的元素，在文檔布局中不再給它分配空間涯呻，它各邊的元素會合攏凉驻，
就當他從來不存在。

visibility:hidden  隱藏對應的元素复罐，但是在文檔布局中仍保留原來的空間涝登。

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

(1) link屬于HTML標簽效诅，而@import是CSS提供的; 
(2) 頁面被加載的時胀滚，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3) import只在IE5以上才能識別乱投，而link是HTML標簽咽笼，無兼容問題; 
(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的標準盒模型其监。元素的寬度/高度由border + padding + content的寬度/高度決定，設(shè)置width/height屬性指的是content部分的寬/高

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

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

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

1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標簽選擇器（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)重情況下樣式定義最近者為準;

  • 載入樣式以最后載入的定位為準;

優(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        單選框或復選框被選中翩概。

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：和搜索引擎建立良好溝通蟹漓，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重炕横；
3，方便其他設(shè)備解析（如屏幕閱讀器葡粒、盲人閱讀器份殿、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
4嗽交，便于團隊開發(fā)和維護伯铣，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向轮纫，遵循W3C標準的團隊都遵循這個標準，可以減少差異化焚鲜。

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

（1）放前、<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標簽之前糯彬。告知瀏覽器以何種模式來渲染文檔凭语。 

（2）、嚴格模式的排版和 JS 運作模式是  以該瀏覽器支持的最高標準運行撩扒。

（3）似扔、在混雜模式中，頁面以寬松的向后兼容的方式顯示搓谆。模擬老式瀏覽器的行為以防止站點無法工作炒辉。

（4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現(xiàn)泉手。

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

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

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

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

常見兼容性問題？

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

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

* IE6雙邊距bug:塊屬性標簽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的標簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別)

*  漸進識別的方式渤涌，從總體中逐漸排除局部佩谣。 

  首先，巧妙的使用“\9”這一標記实蓬，將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仍然會按照標準模式來解析網(wǎng)頁驴娃，但在IE中會觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩归形，最好養(yǎng)成書寫DTD聲明的好習慣⊥锌現(xiàn)在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`

* 上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合暇榴，但是margin-top和margin-bottom卻會發(fā)生重合厚棵。
解決方法，養(yǎng)成良好的代碼編寫習慣蔼紧，同時采用margin-top或者同時采用margin-bottom婆硬。
* ie6對png圖片格式支持不好(引用一段腳本處理)

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

浮動元素脫離文檔流奸例，不占據(jù)空間彬犯。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1.使用空標簽清除浮動查吊。
   這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽谐区。
2.使用overflow。
   給包含浮動元素的父標簽添加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员帮，額外標簽法，<div style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標簽使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操作——怎樣添加、移除渣锦、移動硝岗、復制、創(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()    //通過標簽名稱

      getElementsByName()    //通過元素的Name屬性的值(IE容錯能力較強胀溺，會得到一個數(shù)組，其中包括id等于name值的)

      getElementById()    //通過元素Id皆看，唯一性

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

* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像毛雇，位置嫉称，存儲，多任務(wù)等功能的增加灵疮。

* 拖拽釋放(Drag and drop) API 
  語義化更好的內(nèi)容標簽（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新標簽：

* IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽语御，
  可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

  瀏覽器支持新標簽后席怪，還需要添加標簽默認的樣式：

* 當然最好的方式是直接使用成熟的框架应闯、使用最多的是html5shim框架
   <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]--> 
如何區(qū)分： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

iframe的優(yōu)缺點？

1.`<iframe>`優(yōu)點：

    解決加載緩慢的第三方內(nèi)容如圖標和廣告等的加載問題
    Security sandbox
    并行加載腳本

2.`<iframe>`的缺點：

    *iframe會阻塞主頁面的Onload事件挂捻；

    *即時內(nèi)容為空碉纺，加載也需要時間
    *沒有語意

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

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

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

一個程序至少有一個進程,一個進程至少有一個線程. 
線程的劃分尺度小于進程刻撒，使得多線程程序的并發(fā)性高骨田。 
另外，進程在執(zhí)行過程中擁有獨立的內(nèi)存單元疫赎，而多個線程共享內(nèi)存盛撑，從而極大地提高了程序的運行效率。 
線程在執(zhí)行過程中與進程還是有區(qū)別的捧搞。每個獨立的線程有一個程序運行的入口抵卫、順序執(zhí)行序列和程序的出口。但是線程不能夠獨立執(zhí)行胎撇，必須依存在應用程序中介粘，由應用程序提供多個線程執(zhí)行控制。 
從邏輯角度來看晚树，多線程的意義在于一個應用程序中姻采，有多個執(zhí)行部分可以同時執(zhí)行。但操作系統(tǒ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.標明高度和寬度（如果瀏覽器沒有找到這兩個參數(shù)碍舍，它需要一邊下載圖片一邊計算大小柠座，如果圖片很多，瀏覽器需要不斷地調(diào)整頁面片橡。這不但影響速度妈经，也影響瀏覽體驗。 
當瀏覽器知道了高度和寬度參數(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就是造成這個問題的罪魁禍首露筒。IE會先加載整個HTML文檔的DOM呐伞，然后再去導入外部的CSS文件，因此慎式，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內(nèi)容是沒有樣式的伶氢，這段時間的長短跟網(wǎng)速，電腦速度都有關(guān)系瘪吏。
 解決方法簡單的出奇癣防，只要在<head>之間加入一個<link>或者<script>元素就可以了。

null和undefined的區(qū)別掌眠？

null是一個表示"無"的對象蕾盯，轉(zhuǎn)為數(shù)值時為0；undefined是一個表示"無"的原始值蓝丙，轉(zhuǎn)為數(shù)值時為NaN级遭。

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

undefined表示"缺少值"沧烈，就是此處應該有一個值掠兄，但是還沒有定義。典型用法是：

（1）變量被聲明了，但沒有賦值時蚂夕，就等于undefined迅诬。

（2) 調(diào)用函數(shù)時，應該提供的參數(shù)沒有提供婿牍，該參數(shù)等于undefined侈贷。

（3）對象沒有賦值的屬性，該屬性的值為undefined等脂。

（4）函數(shù)沒有返回值時俏蛮，默認返回undefined。

null表示"沒有對象"上遥，即該處不應該有值搏屑。典型用法是：

（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標簽

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

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

document.write只能重繪整個頁面

innerHTML可以重繪頁面的一部分

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

作用：動態(tài)改變某個類的某個方法的運行環(huán)境明场。 區(qū)別參見：JavaScript學習總結(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ù)模式

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

通過判斷Global對象是否為window慷蠕，如果不為window珊拼，當前腳本沒有運行在瀏覽器中

其他問題？

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

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

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

優(yōu)雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器饼问，則代碼會檢查以確認它們是否能正常工作影兽。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案莱革，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效.

漸進增強：從被所有瀏覽器支持的基本功能開始峻堰，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當瀏覽器支持時盅视，它們會自動地呈現(xiàn)出來并發(fā)揮作用捐名。

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

WEB應用從服務(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標簽導致的帶寬浪費晒喷，前端用變量保存AJAX請求結(jié)果孝偎，每次操作本地變量，不用請求凉敲，減少請求次數(shù)

  （3） 用innerHTML代替DOM操作衣盾，減少DOM操作次數(shù)，優(yōu)化javascript性能爷抓。

  （4） 當需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style雨效。

  （5） 少用全局變量、緩存DOM節(jié)點查找的結(jié)果废赞。減少IO讀取操作徽龟。

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

  （7） 圖片預加載唉地，將樣式表放在頂部据悔，將腳本放在底部  加上時間戳传透。

詳情：http://segmentfault.com/blog/trigkit4/1190000000691919

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

    分為4個步驟：
    （1）朱盐，當發(fā)送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL菠隆，瀏覽器都會開啟一個線程來處理這個請求兵琳，同時在遠程DNS服務(wù)器上啟動一個DNS查詢。這能使瀏覽器獲得請求對應的IP地址骇径。
    （2）躯肌， 瀏覽器與遠程Web服務(wù)器通過TCP三次握手協(xié)商來建立一個TCP/IP連接。該握手包括一個同步報文破衔，一個同步-應答報文和一個應答報文清女，這三個報文在 瀏覽器和服務(wù)器之間傳遞。該握手首先由客戶端嘗試建立起通信晰筛，而后服務(wù)器應答并接受客戶端的請求嫡丙，最后由客戶端發(fā)出該請求已經(jīng)被接受的報文。
    （3）读第，一旦TCP/IP連接建立曙博，瀏覽器會通過該連接向遠程服務(wù)器發(fā)送HTTP的GET請求。遠程服務(wù)器找到資源并使用HTTP響應返回該資源怜瞒，值為200的HTTP響應狀態(tài)表示一個正確的響應父泳。
    （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) 等；

        編寫習慣必須一致（例如都是采用繼承式的寫法徽惋，單樣式都寫成一行）案淋；

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

        頁面進行標注（例如 頁面 模塊 開始和結(jié)束）踢京；

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

        JS 分文件夾存放 命名以該JS功能為準的英文翻譯瓣距。

        圖片采用整合的 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è)置響應HTTP請求狀態(tài)變化的函數(shù).

(4)發(fā)送HTTP請求.

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

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

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

異步加載和延遲加載

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

前端安全問題？

sql注入原理

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

總的來說有以下幾點：

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

XSS原理及防范

Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面里插入惡意html標簽或者javascript代碼获三。比如：攻擊者在論壇中放一個 看似安全的鏈接旁蔼，騙取用戶點擊后，竊取cookie中的用戶私密信息疙教；或者攻擊者在論壇中加一個惡意表單棺聊， 當用戶提交表單的時候，卻把信息傳送到攻擊者的服務(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ù)當做中間變量

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

YUI Compressor 是一個用來壓縮 JS 和 CSS 文件的工具，采用Java開發(fā)骗露。

使用方法：

//壓縮JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
//壓縮CSS
java -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）的重要的安全度量標準。它最早出自Netscape Navigator2.0满着，其目的是防止某個文檔或腳本從多個不同源裝載谦炒。

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

為什么要有同源限制还蹲？

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

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

ECMAscript 5添加了第二種運行模式："嚴格模式"（strict mode）诵次。顧名思義怒坯，這種模式使得Javascript在更嚴格的條件下運行。

設(shè)立"嚴格模式"的目的藻懒，主要有以下幾個：

- 消除Javascript語法的一些不合理剔猿、不嚴謹之處，減少一些怪異行為;
- 消除代碼運行的一些不安全之處嬉荆，保證代碼運行的安全归敬；
- 提高編譯器效率芹彬，增加運行速度和橙；
- 為未來新版本的Javascript做好鋪墊。

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

缺點： 現(xiàn)在網(wǎng)站的JS 都會進行壓縮限番，一些文件用了嚴格模式舱污，而另一些沒有。這時這些本來是嚴格模式的文件弥虐，被 merge后扩灯，這個串就到了文件的中間，不僅沒有指示嚴格模式霜瘪，反而在壓縮后浪費了字節(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都是阻塞加載）

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

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

嵌入JS應該放在什么位置吴叶？

   1、放在底部序臂，雖然放在底部照樣會阻塞所有呈現(xiàn)蚌卤，但不會阻塞資源下載实束。

   2、如果嵌入JS放在head中逊彭，請把嵌入JS放在CSS頭部咸灿。

   3、使用defer（只支持IE）

   4侮叮、不要在嵌入的JS中調(diào)用運行時間較長的函數(shù)避矢，如果一定要用，可以用`setTimeout`來調(diào)用

Javascript無阻塞加載具體方式

  • 將腳本放在底部囊榜。<link>還是放在head中审胸，用以保證在js加載前，能加載出正常顯示的頁面卸勺。<script>標簽放在</body>前砂沛。

  • 成組腳本：由于每個<script>標簽下載時阻塞頁面解析過程，所以限制頁面的<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學習總結(jié)（九）事件詳解

eval是做什么的白胀？

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

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

*  原型對象也是普通的對象挟鸠，是對象一個自帶隱式的 __proto__ 屬性叉信，原型也有可能有自己的原型，如果一個原型對象的原型不為null的話艘希，我們就稱之為原型鏈硼身。
*  原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈硅急。

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

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

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

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

1\. 通過異步模式祟峦，提升了用戶體驗

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

  3\. Ajax在客戶端運行宅楞，承擔了一部分本來由服務(wù)器承擔的工作，減少了大用戶量下的服務(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)試。

跨域： jsonp秒咐、 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)應該考慮的方面

減少代碼間的耦合
讓代碼保持彈性
嚴格按規(guī)范編寫代碼
設(shè)計可擴展的API
代替舊有的框架旷偿、語言(如VB)
增強用戶體驗
通常來說對于速度的優(yōu)化也包含在重構(gòu)中

壓縮JS、CSS爆侣、image等前端資源(通常是由服務(wù)器來解決)
程序的性能優(yōu)化(如數(shù)據(jù)讀寫)
采用CDN來加速資源加載
對于JS DOM的優(yōu)化
HTTP服務(wù)器的文件緩存

如何獲取UA萍程？

<script> 
    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;  
    }  
</script>

js數(shù)組去重

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

Array.prototype.unique1 = function () {
  var n = []; //一個新的臨時數(shù)組
  for (var i = 0; i < this.length; i++) //遍歷當前數(shù)組
  {
    //如果當前數(shù)組的第i已經(jīng)保存進了臨時數(shù)組，那么跳過兔仰，
    //否則把當前項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++) //遍歷當前數(shù)組
    {
        if (!n[this[i]]) //如果hash表中沒有當前項
        {
            n[this[i]] = true; //存入hash表
            r.push(this[i]); //把當前數(shù)組的當前項push到臨時數(shù)組里面
        }
    }
    return r;
}

Array.prototype.unique3 = function()
{
    var n = [this[0]]; //結(jié)果數(shù)組
    for(var i = 1; i < this.length; i++) //從第二項開始遍歷
    {
        //如果當前數(shù)組的第i項在當前數(shù)組中第一次出現(xiàn)的位置不是i，
        //那么表示第i項是重復的乎赴，忽略掉忍法。否則存入結(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ù)器無法理解請求的格式离唬，客戶端不應當嘗試再次使用相同的內(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
function setCookie(name, value, expires, path, domain, secure) {
    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires instanceof Date) {
        cookieText += '; expires=' + expires;
    }
    if (path) {
        cookieText += '; path=' + path;
    }
    if (domain) {
        cookieText += '; domain=' + domain;
    }
    if (secure) {
        cookieText += '; secure';
    }
    document.cookie = cookieText;
}

//獲取cookie
function getCookie(name) {
    var cookieName = encodeURIComponent(name) + '=';
    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;
        }
        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> 
為了準確無誤地把數(shù)據(jù)送達目標處，TCP協(xié)議采用了三次握手策略丈冬。用TCP協(xié)議把數(shù)據(jù)包送出去后嘱函，TCP不會對傳送  后的情況置之不理，它一定會向?qū)Ψ酱_認是否成功送達埂蕊。握手過程中使用了TCP的標志：SYN和ACK往弓。
發(fā)送端首先發(fā)送一個帶SYN標志的數(shù)據(jù)包給對方疏唾。接收端收到后，回傳一個帶有SYN/ACK標志的數(shù)據(jù)包以示傳達確認信息函似。最后槐脏，發(fā)送端再回傳一個帶ACK標志的數(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 對應 resolve, onRejected 對應 reject畴蒲。

Javascript垃圾回收方法

標記清除（mark and sweep）

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

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

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

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

在IE中雖然JavaScript對象通過標記清除的方式進行垃圾回收桦沉，但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動畫，開啟硬件加速调违。適當使用touch事件代替click事件窟哺。避免使用css3漸變陰影效果。 盡可能少的使用box-shadow與gradients技肩。box-shadow與gradients往往都是頁面的性能殺手

什么是Etag且轨？

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

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

Expires和Cache-Control

Expires要求客戶端和服務(wù)端的時鐘嚴格同步粤蝎。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）含鳞，因此即使非常小的請求影锈，其請求和響應的header都只會占用很小比例的帶寬。

Cookie被禁用了蝉绷？Session還能用嗎鸭廷？為什么？

不一定熔吗。如果session id保存在cookie中辆床，則禁用cookie后session將無法正常使用。

原因如下：當程序需要為某個客戶端的請求創(chuàng)建一個session時桅狠，服務(wù)器首先檢查這個客戶端的請求里是否已包含了一個session標識（稱為session id）讼载，如果已包含則說明以前已經(jīng)為此客戶端創(chuàng)建過session，服務(wù)器就按照session id把這個session檢索出來使用（檢索不到中跌，會新建一個）咨堤，如果客戶端請求不包含session id，則為此客戶端創(chuàng)建一個session并且生成一個與此session相關(guān)聯(lián)的session id漩符，

session id的值應該是一個既不會重復一喘，又不容易被找到規(guī)律以仿造的字符串，這個session id將被在本次響應中返回給客戶端保存嗜暴。

保存這個session id最常見的方法就是直接放在cookie中凸克，這樣在交互過程中瀏覽器可以自動的按照規(guī)則把這個標識發(fā)送給服務(wù)器议蟆。但是，一旦瀏覽器禁用了cookie萎战，session同時也會無法使用咐容。解決方法有兩種：

  1. 使用URL重寫，將session id附在URL中
  2. 使用隱藏表單字段,將session id放在隱藏的表單字段中一同提交
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末蚂维，一起剝皮案震驚了整個濱河市疟丙，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌鸟雏，老刑警劉巖享郊，帶你破解...
    沈念sama閱讀 212,884評論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異孝鹊，居然都是意外死亡炊琉，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門又活，熙熙樓的掌柜王于貴愁眉苦臉地迎上來苔咪，“玉大人，你說我怎么就攤上這事柳骄⊥派停” “怎么了？”我有些...
    開封第一講書人閱讀 158,369評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵耐薯，是天一觀的道長舔清。 經(jīng)常有香客問我，道長曲初，這世上最難降的妖魔是什么体谒？ 我笑而不...
    開封第一講書人閱讀 56,799評論 1贊 285
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮臼婆，結(jié)果婚禮上抒痒，老公的妹妹穿的比我還像新娘。我一直安慰自己颁褂，他們只是感情好故响，可當我...
    茶點故事閱讀 65,910評論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著颁独，像睡著了一般彩届。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上奖唯，一...
    開封第一講書人閱讀 50,096評論 1贊 291
  • 城市分裂傳說
    那天惨缆，我揣著相機與錄音，去河邊找鬼。 笑死坯墨，一個胖子當著我的面吹牛寂汇，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播捣染，決...
    沈念sama閱讀 39,159評論 3贊 411
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼骄瓣，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了耍攘？” 一聲冷哼從身側(cè)響起榕栏，我...
    開封第一講書人閱讀 37,917評論 0贊 268
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎蕾各，沒想到半個月后扒磁，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,360評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡式曲，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年妨托，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片吝羞。...
    茶點故事閱讀 38,814評論 1贊 341
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡兰伤，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出钧排，到底是詐尸還是另有隱情敦腔，我是刑警寧澤，帶...
    沈念sama閱讀 34,509評論 4贊 334
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布恨溜，位于F島的核電站符衔，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏筒捺。R本人自食惡果不足惜柏腻，卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3贊 317
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一纸厉、第九天 我趴在偏房一處隱蔽的房頂上張望系吭。 院中可真熱鬧，春花似錦颗品、人聲如沸肯尺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0贊 21
  • 一樁弒父案躯枢，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽则吟。三九已至，卻和暖如春锄蹂，著一層夾襖步出監(jiān)牢的瞬間氓仲，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1贊 267
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留敬扛，地道東北人晰洒。 一個月前我還...
    沈念sama閱讀 46,641評論 2贊 362
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像啥箭，于是被迫代替她去往敵國和親谍珊。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 43,728評論 2贊 351

推薦閱讀更多精彩內(nèi)容