前端面試大全（問題+答案）1

2017前端面試集合（面試題加答案）1

1.請你談談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的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節。

 

IE 提供了一種存儲能夠持久化用戶數據，叫作uerData，從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.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

 

2.簡單說一下瀏覽器本地存儲是怎樣的

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

 

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

 

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

 

而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

3.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等

4.display:none和visibility:hidden的區別？

display:none  隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，

就當他歷來不存在。

 

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

5.CSS中 link 和@import 的區別是？

(1) link屬於HTML標籤，而@import是CSS提供的; 

 

(2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

 

(3) import只在IE5以上才能識別，而link是HTML標籤，無兼容問題; 

 

(4) link方式的樣式的權重 高於@import的權重.

6.position的absolute與fixed共同點與不一樣點

A：共同點：

1.改變行內元素的呈現方式，display被置爲block；

2.讓元素脫離普通流，不佔據空間；

3.默認會覆蓋到非定位元素上

 

B不一樣點：

absolute的」根元素「是能夠設置的，而fixed的」根元素「固定爲瀏覽器窗口。

當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。  

7.介紹一下CSS的盒子模型？

1）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)

 

2）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 padding;

8.CSS3有哪些新特性？

1. CSS3實現圓角（border-radius），陰影（box-shadow），

2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

4. 增長了更多的CSS選擇器  多背景 rgba 

5. 在CSS3中惟一引入的僞元素是 ::selection.

6. 媒體查詢，多欄佈局

7. border-p_w_picpath

9.CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

CSS 選擇符：

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)

 

可繼承的樣式：

1.font-size

2.font-family

3.color

4.text-indent

 

不可繼承的樣式：

1.border

2.padding

3.margin

4.width

5.height

 

優先級算法：

1.優先級就近原則，同權重狀況下樣式定義最近者爲準;

2.載入樣式以最後載入的定位爲準;

3.!important >  id > class > tag  

4.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        單選框或複選框被選中。

10.列出display的值，說明他們的做用。position的值， relative和absolute分別是相對於誰進行定位的？

display 的值的做用： 

1.block 象塊類型元素同樣顯示。

2.inline 缺省值。象行內元素類型同樣顯示。

3.inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。

4.list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

 

position 的值的定位區別：

1.absolute 生成絕對定位的元素，相對於 static 定位之外的第一個祖先元素進行定位。 

2.fixed 生成絕對定位的元素，相對於瀏覽器窗口進行定位（老IE不支持）。

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

4.static 默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。

5.inherit 規定從父元素繼承 position 屬性的值。

 

11.爲何要初始化CSS樣式。

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

 

固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

 

*最簡單的初始化方法就是（不建議）：

{padding: 0; margin: 0;}

淘寶的樣式初始化： 

 

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

12.對BFC規範的理解？

BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裏面的子元素的樣式不會影響到外面的元素。在同一個 BFC 中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的 margin 會發生摺疊。

 

W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其餘元素的關係和相互做用。

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

CSS Sprites 其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用 CSS 的"background-p_w_picpath"，"background-repeat"，"background-position" 的組合進行背景定位，background-position 能夠用數字能精確的定位出背景圖片的位置。這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是也有限制，通常瀏覽器都是6個。對於將來而言，就不須要這樣作了，由於有了 http2。

14.說說你對語義化的理解？

1. 去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

2. 有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

3. 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

4. 便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

 

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

1. <!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器以何種模式來渲染文檔。 

2. 嚴格模式的排版和 JS 運做模式是  以該瀏覽器支持的最高標準運行。

3. 在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

4. DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。 

 

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

1. 該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。

2. HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

3. XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

4. Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

17.HTML與XHTML——兩者有什麼區別

1. 全部的標記都必需要有一個相應的結束標記

2. 全部標籤的元素和屬性的名字都必須使用小寫

3. 全部的 XML 標記都必須合理嵌套

4. 全部的屬性必須用引號 "" 括起來

5. 把全部 < 和 & 特殊符號用編碼表示

6. 給全部屬性賦一個值

7. 不要在註釋內容中使用 "--"

8. 圖片必須有說明文字

18.html常見兼容性問題？

1. png24位的圖片在iE6瀏覽器上出現背景

解決方案：作成PNG8，也能夠引用一段腳本處理.

 

2. 瀏覽器默認的margin和padding不一樣

解決方案：加一個全局的 *{margin:0;padding:0;} 來統一。

 

3. IE6雙邊距bug：在IE6下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。

1

#box{ float:left; width:10px; margin:0 0 0 10px;}

這種狀況之下IE會產生20px的距離

解決方案：在float的標籤樣式控制中加入 _display:inline; 將其轉化爲行內屬性。( _ 這個符號只有ie6會識別)

 

4. 漸進識別的方式，從整體中逐漸排除局部。

首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。

接着，再次使用 "+" 將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

.bb{

    background-color:#f1ee18; /*全部識別*/

    .background-color:#00deff\9; /*IE6、7、8識別*/

    +background-color:#a200ff; /*IE6、7識別*/

    _background-color:#1e0bd1; /*IE6識別*/

}

 

5.IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用 getAttribute() 獲取自定義屬性；Firefox下,只能使用getAttribute()獲取自定義屬性

解決方法：統一經過getAttribute()獲取自定義屬性

 

6. IE下，event對象有 x、y 屬性，可是沒有 pageX、pageY屬性; Firefox下，event對象有 pageX、pageY 屬性，可是沒有 x、y 屬性

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

 

7. Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示

解決方法：可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決

 

8. 超連接訪問事後 hover 樣式就不出現了，被點擊訪問過的超連接樣式不在具備 hover 和 active 了

解決方法：改變CSS屬性的排列順序 L-V-H-A

a:link {}

a:visited {}

a:hover {}

a:active {}

 

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

 

10. 上下margin重合問題：ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。

解決方法：養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。

 

11. ie6對png圖片格式支持很差

解決方案：引用一段腳本處理

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

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

 

1. 使用空標籤清除浮動。

這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。

 

2. 使用overflow。

給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。

 

3. 使用after僞對象清除浮動。

該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；

20.浮動元素引發的問題和解決辦法？

浮動元素引發的問題：

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

21.IE 8如下版本的瀏覽器中的盒模型有什麼不一樣

IE8如下瀏覽器的盒模型中定義的元素的寬高包括內邊距和邊框

22.DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。

1. 建立新節點

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

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

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

 

2. 添加、移除、替換、插入

appendChild()

removeChild()

replaceChild()

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

 

3. 查找

getElementsByTagName() // 經過標籤名稱

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

getElementById() // 經過元素Id，惟一性

 

23.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

新特性：

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

1. 拖拽釋放(Drag and drop) API

2. 語義化更好的內容標籤（header,nav,footer,aside,article,section）

3. 音頻、視頻API(audio,video)

4. 畫布(Canvas) API

5. 地理(Geolocation) API

6. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

7. sessionStorage 的數據在瀏覽器關閉後自動刪除

8. 表單控件，calendar、date、time、email、url、search  

9. 新的技術webworker, websocket, Geolocation

 

移除的元素：

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

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

 

支持HTML5新標籤：

1. IE8/IE7/IE6支持經過 document.createElement 方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式（固然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：

<!--[if lt IE 9]>

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

<![endif]-->

如何區分：

DOCTYPE聲明新增的結構元素、功能元素

 

24.iframe的優缺點？

優勢：

1. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

2. Security sandbox

3. 並行加載腳本

 

缺點：

1. iframe會阻塞主頁面的Onload事件

2. 即時內容爲空，加載也須要時間

3. 沒有語意

 

25.如何實現瀏覽器內多個標籤頁之間的通訊?

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

26.webSocket 如何兼容低瀏覽器？

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼發送 XHR 、 基於長輪詢的 XHR

 

 

27.線程與進程的區別

1. 一個程序至少有一個進程,一個進程至少有一個線程

2. 線程的劃分尺度小於進程，使得多線程程序的併發性高

3. 另外，進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率

4. 線程在執行過程當中與進程仍是有區別的。每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制 

5. 從邏輯角度來看，多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別

 

28.你如何對網站的文件和資源進行優化？

期待的解決方案包括：

1. 文件合併

2. 文件最小化/文件壓縮

3. 使用 CDN 託管

4. 緩存的使用（多個域名來提供緩存）

5. 其餘

29.請說出三種減小頁面加載時間的方法

1. 優化圖片 

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

3. 優化CSS（壓縮合並css，如 margin-top, margin-left...) 

4. 網址後加斜槓（如www.campr.com/目錄，會判斷這個目錄是什麼文件類型，或者是目錄。） 

5. 標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。 

當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了） 

6. 減小http請求（合併文件，合併圖片）

 

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

1. Profiler

2. JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）

3. Dromaeo

 

31.什麼是 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>元素就能夠了。

 

32.null和undefined的區別？

null是一個表示"無"的對象，轉爲數值時爲0

undefined是一個表示"無"的原始值，轉爲數值時爲NaN

 

當聲明的變量還未被初始化時，變量的默認值爲undefined

null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象

 

undefined表示 「缺乏值」，就是此處應該有一個值，可是尚未定義。典型用法是：

1. 變量被聲明瞭，但沒有賦值時，就等於 undefined

2. 調用函數時，應該提供的參數沒有提供，該參數等於 undefined

3. 對象沒有賦值的屬性，該屬性的值爲 undefined

4. 函數沒有返回值時，默認返回 undefined

 

null表示「沒有對象」，即該處不該該有值。典型用法是：

1. 做爲函數的參數，表示該函數的參數不是對象

2. 做爲對象原型鏈的終點

 

33.new操做符具體幹了什麼呢?

1. 建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型

2. 屬性和方法被加入到 this 引用的對象中

3. 新建立的對象由 this 所引用，而且最後隱式的返回 this

var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

 

34.你對JSON 的瞭解？

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小。

1

{"age":"12", "name":"back"}

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

 

1. defer和async

2. 動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）

3. 按需異步載入js

36.如何解決跨域問題?

1. jsonp（jsonp 的原理是動態插入 script 標籤）

2. document.domain + iframe

3. window.name、window.postMessage

4. 服務器上設置代理頁面

 

37.documen.write和 innerHTML 的區別

document.write 只能重繪整個頁面

 

innerHTML 能夠重繪頁面的一部分

 

38..call() 和 .apply() 的做用？

動態改變某個類的某個方法的運行環境

39.哪些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

 

1. setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

2. 閉包

3. 控制檯日誌

4. 循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

 

40.如何判斷當前腳本運行在瀏覽器仍是node環境中？

經過判斷 Global 對象是否爲window，若是不爲window，當前腳本沒有運行在瀏覽器中。即在node中的全局變量是global ,瀏覽器的全局變量是window。 能夠經過該全局變量是否認義來判斷宿主環境