超高頻前端【基礎】面試問題及答案整理

作者:雨中的羽毛

來源：https://blog.csdn.net/p358278505/article/details/78718283

說說你對閉包的了解

使用閉包主要是為了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染，缺點是閉包會常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體洩露。

閉包有三個特性:

“

1.函數嵌套函數

2.函數内部可以引用外部的參數和變量

3.參數和變量不會被垃圾回收機制回收

請你談談Cookie的弊端

cookie

雖然在持久儲存用戶端資料提供了友善，分擔了伺服器存儲的負擔，但還是有很多局限性的。

第一：每個特定的域名下最多生成20個

cookie

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

IE

和

Opera

會清理近期最少使用的

cookie

，

Firefox

會随機清理

cookie

。

cookie

的最大大約為

位元組，為了相容性，一般不能超過

位元組。

IE 提供了一種存儲可以持久化使用者資料，叫做

userdata

，從

IE5.0

就開始支援。每個資料最多128K，每個域名下最多1M。這個持久化資料放在緩存中，如果緩存沒有清理，那麼會一直存在。

優點：極高的擴充性和可用性

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

缺點：

1.`Cookie`數量和長度的限制。每個domain最多隻能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。

2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session資訊。即使加密也與事無補，因為攔截者并不需要知道cookie的意義，他隻要原樣轉發cookie就可以達到目的了。

3.有些狀态不可能儲存在用戶端。例如，為了防止重複送出表單，我們需要在伺服器端儲存一個計數器。如果我們把這個計數器儲存在用戶端，那麼它起不到任何作用。

浏覽器本地存儲

在較高版本的浏覽器中，

js

提供了

sessionStorage

和

globalStorage

。在

HTML5

中提供了

localStorage

來取代

globalStorage

。

html5

中的

Web Storage

包括了兩種存儲方式：

sessionStorage

和

localStorage

。

sessionStorage

用于本地存儲一個會話（session）中的資料，這些資料隻有在同一個會話中的頁面才能通路并且當會話結束後資料也随之銷毀。是以

sessionStorage

不是一種持久化的本地存儲，僅僅是會話級别的存儲。

而

localStorage

用于持久化的本地存儲，除非主動删除資料，否則資料是永遠不會過期的。

web storage和cookie的差別

Web Storage

的概念和

cookie

相似，差別是它是為了更大容量存儲設計的。

Cookie

的大小是受限的，并且每次你請求一個新的頁面的時候

Cookie

都會被發送過去，這樣無形中浪費了帶寬，另外

cookie

還需要指定作用域，不可以跨域調用。

除此之外，

Web Storage

擁有

setItem,getItem,removeItem,clear

等方法，不像

cookie

需要前端開發者自己封裝

setCookie，getCookie

。

但是

cookie

也是不可以或缺的：

cookie

的作用是與伺服器進行互動，作為

HTTP

規範的一部分而存在，而

Web Storage

僅僅是為了在本地“存儲”資料而生

浏覽器的支援除了

IE７

及以下不支援外，其他标準浏覽器都完全支援(ie及FF需在web伺服器裡運作)，值得一提的是IE總是辦好事，例如IE7、IE6中的

userData

其實就是

javascript

本地存儲的解決方案。通過簡單的代碼封裝可以統一到所有的浏覽器都支援

web storage

。

localStorage

和

sessionStorage

都具有相同的操作方法，例如

setItem、getItem

和

removeItem

等

cookie 和session 的差別：

 1、cookie資料存放在客戶的浏覽器上，session資料放在伺服器上。
 2、cookie不是很安全，别人可以分析存放在本地的COOKIE并進行COOKIE欺騙
    考慮到安全應當使用session。
 3、session會在一定時間内儲存在伺服器上。當通路增多，會比較占用你伺服器的性能
     考慮到減輕伺服器性能方面，應當使用COOKIE。
 4、單個cookie儲存的資料不能超過4K，很多浏覽器都限制一個站點最多儲存20個cookie。
 5、是以個人建議：
    将登陸資訊等重要資訊存放為SESSION
    其他資訊如果需要保留，可以放在COOKIE中

CSS 相關問題

display:none和visibility:hidden的差別？

display:none  隐藏對應的元素，在文檔布局中不再給它配置設定空間，它各邊的元素會合攏，
就當他從來不存在。

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

CSS中 link 和@import 的差別是？

(1) link屬于HTML标簽，而@import是CSS提供的; 
(2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3) import隻在IE5以上才能識别，而link是HTML标簽，無相容問題; 
(4) link方式的樣式的權重 高于@import的權重.

position:absolute和float屬性的異同

A：共同點：
對内聯元素設定`float`和`absolute`屬性，可以讓元素脫離文檔流，并且可以設定其寬高。

B：不同點：
float仍會占據位置，position會覆寫文檔流中的其他元素。

介紹一下box-sizing屬性？

box-sizing

屬性主要用來控制元素的盒模型的解析模式。預設值是

content-box

。

content-box ：讓元素維持W3C的标準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設定width/height屬性指的是content部分的寬/高
border-box ：讓元素維持IE傳統盒模型（IE6以下版本和IE6~7的怪異模式）。設定width/height屬性指的是border + padding + content

标準浏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或内距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，進而影響整個頁面的布局。

CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？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 ;
優先級就近原則，同權重情況下樣式定義最近者為準;
載入樣式以最後載入的定位為準;

“

優先級為:

!important >  id > class > tag  

important 比 内聯優先級高,但内聯比 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 控制表單控件的禁用狀态。
:checked        單選框或複選框被選中。

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

absolute 
        生成絕對定位的元素， 相對于最近一級的 定位不是 static 的父元素來進行定位。

fixed （老IE不支援）
    生成絕對定位的元素，相對于浏覽器視窗進行定位。 

relative 
    生成相對定位的元素，相對于其在普通流中的位置進行定位。 

static  預設值。沒有定位，元素出現在正常的流中

CSS3有哪些新特性？

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

XML和JSON的差別？

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

對BFC規範的了解？

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

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

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

html部分

說說你對語義化的了解？

1，去掉或者丢失樣式的時候能夠讓頁面呈現出清晰的結構
2，有利于SEO：和搜尋引擎建立良好溝通，有助于爬蟲抓取更多的有效資訊：爬蟲依賴于标簽來确定上下文和各個關鍵字的權重；
3，友善其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；
4，便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C标準的團隊都遵循這個标準，可以減少差異化。

Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

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

（2）、嚴格模式的排版和 JS 運作模式是  以該浏覽器支援的最高标準運作。

（3）、在混雜模式中，頁面以寬松的向後相容的方式顯示。模拟老式浏覽器的行為以防止站點無法工作。

（4）、DOCTYPE不存在或格式不正确會導緻文檔以混雜模式呈現。

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

 該标簽可聲明三種 DTD 類型，分别表示嚴格版本、過渡版本以及基于架構的 HTML 文檔。
 HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
 XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （标準）模式（也就是嚴格呈現模式）用于呈現遵循最新标準的網頁，而 Quirks
 （包容）模式（也就是松散呈現模式或者相容模式）用于呈現為傳統浏覽器而設計的網頁。

HTML與XHTML——二者有什麼差別

差別：
1.所有的标記都必須要有一個相應的結束标記
2.所有标簽的元素和屬性的名字都必須使用小寫
3.所有的XML标記都必須合理嵌套
4.所有的屬性必須用引号""括起來
5.把所有<和&特殊符号用編碼表示
6.給所有屬性賦一個值
7.不要在注釋内容中使“--”
8.圖檔必須有說明文字

常見相容性問題？

* png24位的圖檔在iE6浏覽器上出現背景，解決方案是做成PNG8.也可以引用一段腳本處理.

* 浏覽器預設的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性标簽float後，又有橫行的margin情況下，在ie6顯示margin比設定的大。 

* 浮動ie産生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設定了浮動，同時又設定了margin-left或margin-right，margin值會加倍。）
  #box{ float:left; width:10px; margin:0 0 0 100px;} 

 這種情況之下IE會産生20px的距離，解決方案是在float的标簽樣式控制中加入 ——_display:inline;将其轉化為行内屬性。(_這個符号隻有ie6會識别)

*  漸進識别的方式，從總體中逐漸排除局部。 

  首先，巧妙的使用“\9”這一标記，将IE遊覽器從所有情況中分離出來。 
  接着，再次使用“+”将IE8和IE7、IE6分離開來，這樣IE8已經獨立識别。

  css
      .bb{
       background-color:#f1ee18;/*所有識别*/
      .background-color:#00deff\9; /*IE6、7、8識别*/
      +background-color:#a200ff;/*IE6、7識别*/
      _background-color:#1e0bd1;/*IE6識别*/ 
      } 

*  IE下,可以使用擷取正常屬性的方法來擷取自定義屬性,
   也可以使用getAttribute()擷取自定義屬性;
   Firefox下,隻能使用getAttribute()擷取自定義屬性. 
   解決方法:統一通過getAttribute()擷取自定義屬性.

* IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性; 
  Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

* 解決方法：（條件注釋）缺點是在IE浏覽器下可能會增加額外的HTTP請求數。

* Chrome 中文界面下預設會将小于 12px 的文本強制按照 12px 顯示, 
  可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

* 超連結通路過後hover樣式就不出現了 被點選通路過的超連結樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

* 怪異模式問題：漏寫DTD聲明，Firefox仍然會按照标準模式來解析網頁，但在IE中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD聲明的好習慣。現在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`

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

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

浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1.使用空标簽清除浮動。
   這種方法是在所有浮動标簽後面添加一個空标簽 定義css clear:both. 弊端就是增加了無意義标簽。
2.使用overflow。
   給包含浮動元素的父标簽添加css屬性 overflow:auto; zoom:1; zoom:1用于相容IE6。
3.使用after僞對象清除浮動。
   該方法隻适用于非IE浏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的僞對象中設定 height:0，否則該元素會比實際高出若幹像素；

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

浮動元素引起的問題：

（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素（内聯元素）會跟随其後
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

解決方法：

使用

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結構看起來不夠簡潔。）
2，使用after僞類

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
    }

3,浮動外部元素
4,設定`overflow`為`hidden`或者auto

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

IE8以下浏覽器的盒模型中定義的元素的寬高不包括内邊距和邊框

DOM操作——怎樣添加、移除、移動、複制、建立和查找節點。

（1）建立新節點

      createDocumentFragment()    //建立一個DOM片段

      createElement()   //建立一個具體的元素

      createTextNode()   //建立一個文本節點

（2）添加、移除、替換、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore() //在已有的子節點前插入一個新的子節點

（3）查找

      getElementsByTagName()    //通過标簽名稱

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

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

html5有哪些新特性、移除了那些元素？如何處理HTML5新标簽的浏覽器相容問題？如何區分 HTML 和 HTML5？

* HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

* 拖拽釋放(Drag and drop) API 
  語義化更好的内容标簽（header,nav,footer,aside,article,p）
  音頻、視訊API(audio,video)
  畫布(Canvas) API
  地理(Geolocation) API
  本地離線存儲 localStorage 長期存儲資料，浏覽器關閉後資料不丢失；
  sessionStorage 的資料在浏覽器關閉後自動删除

  表單控件，calendar、date、time、email、url、search  
  新的技術webworker, websocket, Geolocation

* 移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性産生負面影響的元素：frame，frameset，noframes；

支援HTML5新标簽：

* IE8/IE7/IE6支援通過document.createElement方法産生的标簽，
  可以利用這一特性讓這些浏覽器支援HTML5新标簽，

  浏覽器支援新标簽後，還需要添加标簽預設的樣式：

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

iframe的優缺點？

1.`<iframe>`優點：

    解決加載緩慢的第三方内容如圖示和廣告等的加載問題
    Security sandbox
    并行加載腳本

2.`<iframe>`的缺點：


    *iframe會阻塞首頁面的Onload事件；

    *即時内容為空，加載也需要時間
    *沒有語意

如何實作浏覽器内多個标簽頁之間的通信?

調用localstorge、cookies等本地存儲方式

線程與程序的差別

一個程式至少有一個程序,一個程序至少有一個線程. 
線程的劃分尺度小于程序，使得多線程程式的并發性高。 
另外，程序在執行過程中擁有獨立的記憶體單元，而多個線程共享記憶體，進而極大地提高了程式的運作效率。 
線程在執行過程中與程序還是有差別的。每個獨立的線程有一個程式運作的入口、順序執行序列和程式的出口。但是線程不能夠獨立執行，必須依存在應用程式中，由應用程式提供多個線程執行控制。 
從邏輯角度來看，多線程的意義在于一個應用程式中，有多個執行部分可以同時執行。但作業系統并沒有将多個線程看做多個獨立的應用，來實作程序的排程和管理以及資源配置設定。這就是程序和線程的重要差別。

你如何對網站的檔案和資源進行優化？

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

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

 1.優化圖檔 
 2.圖像格式的選擇（GIF：提供的顔色較少，可用在一些對顔色要求不高的地方） 
 3.優化CSS（壓縮合并css，如margin-top,margin-left...) 
 4.網址後加斜杠（如www.campr.com/目錄，會判斷這個“目錄是什麼檔案類型，或者是目錄。） 
 5.标明高度和寬度（如果浏覽器沒有找到這兩個參數，它需要一邊下載下傳圖檔一邊計算大小，如果圖檔很多，浏覽器需要不斷地調整頁面。這不但影響速度，也影響浏覽體驗。 
當浏覽器知道了高度和寬度參數後，即使圖檔暫時無法顯示，頁面上也會騰出圖檔的空位，然後繼續加載後面的内容。進而加載時間快了，浏覽體驗也更好了。） 

6.減少http請求（合并檔案，合并圖檔）。

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

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

什麼是 FOUC（無樣式内容閃爍）？你如何來避免 FOUC？

 FOUC - Flash Of Unstyled Content 文檔樣式閃爍
 <style type="text/css" media="all">@import "../fouc.css";</style> 
而引用CSS檔案的@import就是造成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，然後再去導入外部的CSS檔案，是以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的内容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關系。
 解決方法簡單的出奇，隻要在<head>之間加入一個<link>或者<script>元素就可以了。

null和undefined的差別？

null

是一個表示”無”的對象，轉為數值時為0；

undefined

是一個表示”無”的原始值，轉為數值時為

NaN

。

當聲明的變量還未被初始化時，變量的預設值為

undefined

。

null

用來表示尚未存在的對象，常用來表示函數企圖傳回一個不存在的對象。

undefined

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

（1）變量被聲明了，但沒有指派時，就等于undefined。

（2) 調用函數時，應該提供的參數沒有提供，該參數等于undefined。

（3）對象沒有指派的屬性，該屬性的值為undefined。

（4）函數沒有傳回值時，預設傳回undefined。

null

表示”沒有對象”，即該處不應該有值。典型用法是：

（1） 作為函數的參數，表示該函數的參數不是對象。

（2） 作為對象原型鍊的終點。

new操作符具體幹了什麼呢?

   1、建立一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型。
   2、屬性和方法被加入到 this 引用的對象中。
   3、新建立的對象由 this 所引用，并且最後隐式的傳回 this 。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

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

defer和async、動态建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）、按需異步載入js

如何解決跨域問題?

    jsonp、 document.domain+iframe、window.name、window.postMessage、伺服器上設定代理頁面

jsonp的原理是動态插入script标簽

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

documen.write和 innerHTML的差別

document.write隻能重繪整個頁面

innerHTML可以重繪頁面的一部分

.call() 和 .apply() 的差別和作用？

作用：動态改變某個類的某個方法的運作環境。

差別參見：JavaScript學習總結（四）function函數部分

哪些操作會造成記憶體洩漏？

記憶體洩漏指任何對象在您不再擁有或需要它之後仍然存在。
垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那麼該對象的記憶體即可回收。

setTimeout 的第一個參數使用字元串而非函數的話，會引發記憶體洩漏。
閉包、控制台日志、循環（在兩個對象彼此引用且彼此保留時，就會産生一個循環）

詳見：詳解js變量、作用域及記憶體

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

詳見：詳解JavaScript函數模式

如何判斷目前腳本運作在浏覽器還是node環境中？

通過判斷Global對象是否為window，如果不為window，目前腳本沒有運作在浏覽器中

其他問題？

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

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

什麼叫優雅降級和漸進增強？

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

漸進增強：從被所有浏覽器支援的基本功能開始，逐漸地添加那些隻有新式浏覽器才支援的功能,向頁面增加無害于基礎浏覽器的額外樣式和功能的。當浏覽器支援時，它們會自動地呈現出來并發揮作用。

詳見：css學習歸納總結（一）

WEB應用從伺服器主動推送Data到用戶端有那些方式？

Javascript資料推送

“

Commet：基于HTTP長連接配接的伺服器推送技術

基于WebSocket的推送方案

SSE（Server-Send Event）：伺服器推送資料新方式

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

前端是最貼近使用者的程式員，比後端、資料庫、産品經理、營運、安全都近。
    1、實作界面互動
    2、提升使用者體驗
    3、有了Node.js，前端可以實作服務端的一些事情


前端是最貼近使用者的程式員，前端的能力就是能讓産品從 90分進化到 100 分，甚至更好，

 參與項目，快速高品質完成實作效果圖，精确到1px；

 與團隊成員，UI設計，産品經理的溝通；

 做好的頁面結構，頁面重構和使用者體驗；

 處理hack，相容、寫出優美的代碼格式；

 針對伺服器的優化、擁抱最新前端技術。

你有哪些性能優化的方法？

（詳情請看雅虎14條性能優化原則）。

  （1） 減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖檔大小控制合适；網頁Gzip，CDN托管，data緩存 ，圖檔伺服器。

  （2） 前端模闆 JS+資料，減少由于HTML标簽導緻的帶寬浪費，前端用變量儲存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數

  （3） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。

  （4） 當需要設定的樣式很多時設定className而不是直接操作style。

  （5） 少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。

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

  （7） 圖檔預加載，将樣式表放在頂部，将腳本放在底部  加上時間戳。

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

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

    分為4個步驟：
    （1），當發送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，浏覽器都會開啟一個線程來處理這個請求，同時在遠端DNS伺服器上啟動一個DNS查詢。這能使浏覽器獲得請求對應的IP位址。
    （2）， 浏覽器與遠端Web伺服器通過TCP三向交握協商來建立一個TCP/IP連接配接。該握手包括一個同步封包，一個同步-應答封包和一個應答封包，這三個封包在 浏覽器和伺服器之間傳遞。該握手首先由用戶端嘗試建立起通信，而後伺服器應答并接受用戶端的請求，最後由用戶端發出該請求已經被接受的封包。
    （3），一旦TCP/IP連接配接建立，浏覽器會通過該連接配接向遠端伺服器發送HTTP的GET請求。遠端伺服器找到資源并使用HTTP響應傳回該資源，值為200的HTTP響應狀态表示一個正确的響應。
    （4），此時，Web伺服器提供資源服務，用戶端開始下載下傳資源。

請求傳回後，便進入了我們關注的前端子產品
簡單來說，浏覽器會解析HTML生成DOM Tree，其次會根據CSS生成CSS Rule Tree，而javascript又可以根據DOM API操作DOM

詳情：從輸入 URL 到浏覽器接收的過程中發生了什麼事情？

平時如何管理你的項目？

先期團隊必須确定好全局樣式（globe.css），編碼模式(utf-8) 等；

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

        标注樣式編寫人，各子產品都及時标注（标注關鍵樣式調用的地方）；

        頁面進行标注（例如 頁面 子產品 開始和結束）；

        CSS跟HTML 分檔案夾并行存放，命名都得統一（例如style.css）；

        JS 分檔案夾存放 命名以該JS功能為準的英文翻譯。

        圖檔采用整合的 images.png png8 格式檔案使用 盡量整合在一起使用友善将來的管理

說說最近最流行的一些東西吧？常去哪些網站？

Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。
網站：w3cfuns,sf,hacknews,CSDN,慕課，部落格園，InfoQ,w3cplus等

javascript對象的幾種建立方式

1，工廠模式
2，構造函數模式
3，原型模式
4，混合構造函數和原型模式
5，動态原型模式
6，寄生構造函數模式
7，穩妥構造函數模式

javascript繼承的6種方法

1，原型鍊繼承
2，借用構造函數繼承
3，組合繼承(原型+借用構造)
4，原型式繼承
5，寄生式繼承
6，寄生組合式繼承

詳情：JavaScript繼承方式詳解

ajax過程

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.

(2)建立一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證資訊.

(3)設定響應HTTP請求狀态變化的函數.

(4)發送HTTP請求.

(5)擷取異步調用傳回的資料.

(6)使用JavaScript和DOM實作局部重新整理.

詳情：JavaScript學習總結（七）Ajax和Http狀态字

異步加載和延遲加載

1.異步加載的方案： 動态插入script标簽
2.通過ajax去擷取js代碼，然後通過eval執行
3.script标簽上添加defer或者async屬性
4.建立并插入iframe，讓它異步執行js
5.延遲加載：有些 js 代碼并不是頁面初始化的時候就立刻需要的，而稍後的某些情況才需要的。

前端安全問題？

sql注入原理

就是通過把

SQL

指令插入到

Web

表單遞交或輸入域名或頁面請求的查詢字元串，最終達到欺騙伺服器執行惡意的SQL指令。

總的來說有以下幾點：

1.永遠不要信任使用者的輸入，要對使用者的輸入進行校驗，可以通過正規表達式，或限制長度，對單引号和雙"-"進行轉換等。
2.永遠不要使用動态拼裝SQL，可以使用參數化的SQL或者直接使用存儲過程進行資料查詢存取。
3.永遠不要使用管理者權限的資料庫連接配接，為每個應用使用單獨的權限有限的資料庫連接配接。
4.不要把機密資訊明文存放，請加密或者hash掉密碼和敏感的資訊。

XSS原理及防範

Xss(cross-site scripting)

攻擊指的是攻擊者往Web頁面裡插入惡意

html

标簽或者

javascript

代碼。比如：攻擊者在論壇中放一個

看似安全的連結，騙取使用者點選後，竊取cookie中的使用者私密資訊；或者攻擊者在論壇中加一個惡意表單，

當使用者送出表單的時候，卻把資訊傳送到攻擊者的伺服器中，而不是使用者原本以為的信任站點。

XSS防範方法

1.代碼裡對使用者輸入的地方和變量都需要仔細檢查長度和對

”<”,”>”,”;”,”’”

等字元做過濾；其次任何内容寫到頁面之前都必須加以

encode

，避免不小心把

html tag

弄出來。這一個層面做好，至少可以堵住超過一半的

XSS

攻擊。

2.避免直接在

cookie

中洩露使用者隐私，例如

email

、密碼等等。

3.通過使cookie 和系統ip 綁定來降低

cookie

洩露後的危險。這樣攻擊者得到的cookie 沒有實際價值，不可能拿來重放。

4.盡量采用POST 而非GET 送出表單

XSS與CSRF有什麼差別嗎？

XSS

是擷取資訊，不需要提前知道其他使用者頁面的代碼和資料包。

CSRF

是代替使用者完成指定的動作，需要知道其他使用者頁面的代碼和資料包。

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

1.登入受信任網站A，并在本地生成Cookie。

　　2.在不登出A的情況下，通路危險網站B。

CSRF的防禦

1.服務端的CSRF方式方法很多樣，但總的思想都是一緻的，就是在用戶端頁面增加僞随機數。

2.使用驗證碼

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

IE6 兩個并發，iE7更新之後的6個并發，之後版本也是6個

Firefox，chrome也是6個

javascript裡面的繼承怎麼實作，如何避免原型鍊上面的對象共享

用構造函數和原型鍊的混合模式去實作繼承，避免對象共享可以參考經典的extend()函數，很多前端架構都有封裝的，就是用一個空函數當做中間變量

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

YUI Compressor 是一個用來壓縮 JS 和 CSS 檔案的工具，采用Java開發。

使用方法：

//壓縮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

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

Flash、Ajax各自的優缺點，在使用中如何取舍？

1、Flash ajax對比
Flash适合處理多媒體、矢量圖形、通路機器；對CSS、處理文本上不足，不容易被搜尋。
Ajax對CSS、文本支援很好，支援搜尋；多媒體、矢量圖形、機器通路不足。
共同點：與伺服器的無重新整理傳遞消息、使用者離線和線上狀态、操作DOM

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

概念:同源政策是用戶端腳本（尤其是

Javascript

）的重要的安全度量标準。它最早出自

Netscape Navigator2.0

，其目的是防止某個文檔或腳本從多個不同源裝載。

這裡的同源政策指的是：協定，域名，端口相同，同源政策是一種安全協定。

指一段腳本隻能讀取來自同一來源的視窗和文檔的屬性。

為什麼要有同源限制？

我們舉例說明：比如一個黑客程式，他利用

Iframe

把真正的銀行登入頁面嵌到他的頁面上，當你使用真實的使用者名，密碼登入時，他的頁面就可以通過

Javascript

讀取到你的表單中

input

中的内容，這樣使用者名，密碼就輕松到手了。

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

ECMAscript 5

添加了第二種運作模式：”嚴格模式”（strict mode）。顧名思義，這種模式使得

Javascript

在更嚴格的條件下運作。

設立”嚴格模式”的目的，主要有以下幾個：

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

注：經過測試

IE6,7,8,9

均不支援嚴格模式。

缺點：

現在網站的

JS

都會進行壓縮，一些檔案用了嚴格模式，而另一些沒有。這時這些本來是嚴格模式的檔案，被

merge

後，這個串就到了檔案的中間，不僅沒有訓示嚴格模式，反而在壓縮後浪費了位元組。

GET和POST的差別，何時使用POST？

    GET：一般用于資訊擷取，使用URL傳遞參數，對所發送資訊的數量也有限制，一般在2000個字元
    POST：一般用于修改伺服器上的資源，對所發送的資訊沒有限制。

    GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來擷取變量的值，
    也就是說Get是通過位址欄來傳值，而Post是通過送出表單來傳值。

然而，在以下情況中，請使用 POST 請求：
無法使用緩存檔案（更新伺服器上的檔案或資料庫）
向伺服器發送大量資料（POST 沒有資料量限制）
發送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠

哪些地方會出現css阻塞，哪些地方會出現js阻塞？

**js的阻塞特性：**所有浏覽器在下載下傳

JS

的時候，會阻止一切其他活動，比如其他資源的下載下傳，内容的呈現等等。直到

JS

下載下傳、解析、執行完畢後才開始繼續

并行下載下傳

其他資源并呈現内容。為了提高使用者體驗，新一代浏覽器都支援并行下載下傳

JS

，但是

JS

下載下傳仍然會阻塞其它資源的下載下傳（例如.圖檔，css檔案等）。

由于浏覽器為了防止出現

JS

修改

DOM

樹，需要重新建構

DOM

樹的情況，是以就會阻塞其他的下載下傳和呈現。

嵌入

JS

會阻塞所有内容的呈現，而外部

JS

隻會阻塞其後内容的顯示，2種方式都會阻塞其後資源的下載下傳。也就是說外部樣式不會阻塞外部腳本的加載，但會阻塞外部腳本的執行。

CSS

怎麼會阻塞加載了？

CSS

本來是可以并行下載下傳的，在什麼情況下會出現阻塞加載了(在測試觀察中，

IE6

下

CSS

都是阻塞加載）

當

CSS

後面跟着嵌入的

JS

的時候，該

CSS

就會出現阻塞後面資源下載下傳的情況。而當把嵌入

JS

放到

CSS

前面，就不會出現阻塞的情況了。

根本原因：因為浏覽器會維持

html

中

css

和

js

的順序，樣式表必須在嵌入的JS執行前先加載、解析完。而嵌入的

JS

會阻塞後面的資源加載，是以就會出現上面

CSS

阻塞下載下傳的情況。

嵌入

JS

應該放在什麼位置？

   1、放在底部，雖然放在底部照樣會阻塞所有呈現，但不會阻塞資源下載下傳。

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

   3、使用defer（隻支援IE）

   4、不要在嵌入的JS中調用運作時間較長的函數，如果一定要用，可以用`setTimeout`來調用

Javascript無阻塞加載具體方式

将腳本放在底部。 <link> 還是放在 head 中，用以保證在 js 加載前，能加載出正常顯示的頁面。 <script> 标簽放在 </body> 前。
成組腳本：由于每個 <script> 标簽下載下傳時阻塞頁面解析過程，是以限制頁面的 <script> 總數也可以改善性能。适用于内聯腳本和外部腳本。
非阻塞腳本：等頁面完成加載後，再加載 js 代碼。也就是，在 window.onload
事件發出後開始下載下傳代碼。

（1）
defer 屬性：支援IE4和 fierfox3.5
更高版本浏覽器

（2）動态腳本元素：文檔對象模型（DOM）允許你使用js動态建立
HTML 的幾乎全部文檔内容。代碼如下：

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

此技術的重點在于：無論在何處啟動下載下傳，檔案額下載下傳和運作都不會阻塞其他頁面處理過程。即使在head裡（除了用于下載下傳檔案的http連結）。

閉包相關問題？

詳情請見：詳解js閉包

js事件處理程式問題？

詳情請見：JavaScript學習總結（九）事件詳解

eval是做什麼的？

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

JavaScript原型，原型鍊 ? 有什麼特點？

*  原型對象也是普通的對象，是對象一個自帶隐式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不為null的話，我們就稱之為原型鍊。
*  原型鍊是由一些用來繼承和共享屬性的對象組成的（有限的）對象鍊。

事件、IE與火狐的事件機制有什麼差別？如何阻止冒泡？

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

ajax 是什麼?ajax 的互動模型?同步和異步的差別?如何解決跨域問題?

詳情請見：JavaScript學習總結（七）Ajax和Http狀态字

1. 通過異步模式，提升了使用者體驗

  2. 優化了浏覽器和伺服器之間的傳輸，減少不必要的資料往返，減少了帶寬占用

  3. Ajax在用戶端運作，承擔了一部分本來由伺服器承擔的工作，減少了大使用者量下的伺服器負載。

  2. Ajax的最大的特點是什麼。

  Ajax可以實作動态不重新整理（局部重新整理）
  readyState屬性 狀态 有5個可取值： 0=未初始化 ，1=啟動 2=發送，3=接收，4=完成

ajax的缺點

  1、ajax不支援浏覽器back按鈕。

  2、安全問題 AJAX暴露了與伺服器互動的細節。

  3、對搜尋引擎的支援比較弱。

  4、破壞了程式的異常機制。

  5、不容易調試。

跨域：jsonp、 iframe、window.name、window.postMessage、伺服器上設定代理頁面

js對象的深度克隆

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

AMD和CMD 規範的差別？

詳情請見：詳解JavaScript子產品化開發

網站重構的了解？

網站重構：在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一緻的行為。也就是說是在不改變UI的情況下，對網站進行優化，在擴充的同時保持一緻的UI。

對于傳統的網站來說重構通常是：

表格(table)布局改為DIV+CSS
使網站前端相容于現代浏覽器(針對于不合規範的CSS、如對IE6有效的)
對于移動平台的優化
針對于SEO進行優化
深層次的網站重構應該考慮的方面

減少代碼間的耦合
讓代碼保持彈性
嚴格按規範編寫代碼
設計可擴充的API
代替舊有的架構、語言(如VB)
增強使用者體驗
通常來說對于速度的優化也包含在重構中

壓縮JS、CSS、image等前端資源(通常是由伺服器來解決)
程式的性能優化(如資料讀寫)
采用CDN來加速資源加載
對于JS DOM的優化
HTTP伺服器的檔案緩存

如何擷取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數組去重

以下是數組去重的三種方法：

Array.prototype.unique1 = function () {
  var n = []; //一個新的臨時數組
  for (var i = 0; i < this.length; i++) //周遊目前數組
  {
    //如果目前數組的第i已經儲存進了臨時數組，那麼跳過，
    //否則把目前項push到臨時數組裡面
    if (n.indexOf(this[i]) == -1) n.push(this[i]);
  }
  return n;
}

Array.prototype.unique2 = function()
{
    var n = {},r=[]; //n為hash表，r為臨時數組
    for(var i = 0; i < this.length; i++) //周遊目前數組
    {
        if (!n[this[i]]) //如果hash表中沒有目前項
        {
            n[this[i]] = true; //存入hash表
            r.push(this[i]); //把目前數組的目前項push到臨時數組裡面
        }
    }
    return r;
}

Array.prototype.unique3 = function()
{
    var n = [this[0]]; //結果數組
    for(var i = 1; i < this.length; i++) //從第二項開始周遊
    {
        //如果目前數組的第i項在目前數組中第一次出現的位置不是i，
        //那麼表示第i項是重複的，忽略掉。否則存入結果數組
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
}

HTTP狀态碼

100  Continue  繼續，一般在發送post請求時，已發送了http header之後服務端将傳回此資訊，表示确認，之後發送具體參數資訊
200  OK   正常傳回資訊
201  Created  請求成功并且伺服器建立了新的資源
202  Accepted  伺服器已接受請求，但尚未處理
301  Moved Permanently  請求的網頁已永久移動到新位置。
302 Found  臨時性重定向。
303 See Other  臨時性重定向，且總是使用 GET 請求新的 URI。
304  Not Modified  自從上次請求後，請求的網頁未修改過。

400 Bad Request  伺服器無法了解請求的格式，用戶端不應當嘗試再次使用相同的内容發起請求。
401 Unauthorized  請求未授權。
403 Forbidden  禁止通路。
404 Not Found  找不到如何與 URI 相比對的資源。

500 Internal Server Error  最常見的伺服器端錯誤。
503 Service Unavailable 伺服器端暫時無法處理請求（可能是過載或維護）。

js操作擷取和設定cookie

//建立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 += '; expires=' + expires;
    }
    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傳輸的三次握手政策

為了準确無誤地把資料送達目标處，TCP協定采用了三次握手政策。用TCP協定把資料包送出去後，TCP不會對傳送  後的情況置之不理，它一定會向對方确認是否成功送達。握手過程中使用了TCP的标志：SYN和ACK。
發送端首先發送一個帶SYN标志的資料包給對方。接收端收到後，回傳一個帶有SYN/ACK标志的資料包以示傳達确認資訊。最後，發送端再回傳一個帶ACK标志的資料包，代表“握手”結束
若在握手過程中某個階段莫名中斷，TCP協定會再次以相同的順序發送相同的資料包。

說說你對Promise的了解

依照

Promise/A+

的定義，

Promise

有四種狀态：

pending: 初始狀态, 非 fulfilled 或 rejected.
fulfilled: 成功的操作.
rejected: 失敗的操作.
settled: Promise已被fulfilled或rejected，且不是pending

另外，

fulfilled

與

rejected

一起合稱

settled

。

Promise

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

“

Promise 的構造函數

構造一個

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)

接收兩個函數作為參數，一個在

fulfilled

的時候被調用，一個在

rejected

的時候被調用，接收參數就是

future，onFulfilled

對應

resolve

onRejected

對應

reject

。

Javascript垃圾回收方法

标記清除（mark and sweep）

這是

JavaScript

最常見的垃圾回收方式，當變量進入執行環境的時候，比如函數中聲明一個變量，垃圾回收器将其标記為“進入環境”，當變量離開環境的時候（函數執行結束）将其标記為“離開環境”。

垃圾回收器會在運作的時候給存儲在記憶體中的所有變量加上标記，然後去掉環境中的變量以及被環境中變量所引用的變量（閉包），在這些完成之後仍存在标記的就是要删除的變量了

引用計數(reference counting)

在低版本

IE

中經常會出現記憶體洩露，很多時候就是因為其采用引用計數方式進行垃圾回收。引用計數的政策是跟蹤記錄每個值被使用的次數，當聲明了一個變量并将一個引用類型指派給該變量的時候這個值的引用次數就加1，如果該變量的值變成了另外一個，則這個值得引用次數減1，當這個值的引用次數變為0的時候，說明沒有變量在使用，這個值沒法被通路了，是以可以将其占用的空間回收，這樣垃圾回收器會在運作的時候清理掉引用次數為0的值占用的空間。

在IE中雖然

JavaScript

對象通過标記清除的方式進行垃圾回收，但BOM與DOM對象卻是通過引用計數回收垃圾的，也就是說隻要涉及BOM及DOM就會出現循環引用問題。

談談性能優化問題

代碼層面：避免使用css表達式，避免使用進階選擇器，通配選擇器。

緩存利用：緩存Ajax，使用CDN，使用外部js和css檔案以便緩存，添加Expires頭，服務端配置Etag，減少DNS查找等

請求數量：合并樣式和腳本，使用css圖檔精靈，初始首屏之外的圖檔資源按需加載，靜态資源延遲加載。

請求帶寬：壓縮檔案，開啟GZIP，

移動端性能優化

“

盡量使用
css3 動畫，開啟硬體加速。适當使用 touch 事件代替 click 事件。避免使用 css3
漸變陰影效果。

盡可能少的使用
box-shadow 與 gradients 。 box-shadow 與 gradients 往往都是頁面的性能殺手

什麼是Etag？

浏覽器下載下傳元件的時候，會将它們存儲到浏覽器緩存中。如果需要再次擷取相同的元件，浏覽器将檢查元件的緩存時間，

假如已經過期，那麼浏覽器将發送一個條件GET請求到伺服器，伺服器判斷緩存還有效，則發送一個304響應，

告訴浏覽器可以重用緩存元件。

那麼伺服器是根據什麼判斷緩存是否還有效呢?答案有兩種方式，一種是前面提到的ETag，另一種是根據

Last-Modified

Expires和Cache-Control

Expires

要求用戶端和服務端的時鐘嚴格同步。HTTP1.1引入

Cache-Control

來克服Expires頭的限制。如果max-age和Expires同時出現，則max-age有更高的優先級。

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

棧和隊列的差別?

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

棧和堆的差別？

棧區（stack）—   由編譯器自動配置設定釋放   ，存放函數的參數值，局部變量的值等。
堆區（heap）   —   一般由程式員配置設定釋放，   若程式員不釋放，程式結束時可能由OS回收。
堆（資料結構）：堆可以被看成是一棵樹，如：堆排序；
棧（資料結構）：一種先進後出的資料結構。

關于Http 2.0 你知道多少？

HTTP/2

引入了“服務端推（serverpush）”的概念，它允許服務端在用戶端需要資料之前就主動地将資料發送到用戶端緩存中，進而提高性能。

HTTP/2

提供更多的加密支援

HTTP/2

使用多路技術，允許多個消息在一個連接配接上同時交差。

它增加了頭壓縮（header compression），是以即使非常小的請求，其請求和響應的

header

都隻會占用很小比例的帶寬。

點個『在看』支援下

超高頻前端【基礎】面試問題及答案整理