隨機面試題

1.截取字符串abcdefg裏面的cde

　　str.substring(2,5)  str.substr(2,3)  str.slice(2,3)

2.清除浮動的幾種方式，各自優缺點

　　（1：使用空標籤清除浮動clear:both。

　　　　原理：添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度

　　　　優勢：通俗易懂，容易掌握

　　　　缺點：會添加不少無心義的空標籤，有違結構與表現的分離，在後期維護中將是噩夢

　　　　建議：不推薦使用，但此方法是之前主要使用的一種清除浮動方法

　　（2：父級div定義overflow:hidden

　　　　原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度

　　　　優勢：簡單，代碼少，瀏覽器支持好

　　　　缺點：不能和position配合使用，由於超出的尺寸的會被隱藏

　　　　建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用

　　（3：父級div定義僞類:after和zoom(用於非IE瀏覽器)

　　　　原理：IE8以上和非IE瀏覽器才支持:after，原理和方法1有點相似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

　　　　優勢：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）。

　　　　缺點：代碼多，要兩句代碼結合使用，才能讓主流瀏覽器都支持

　　　　建議：推薦使用，建議定義公共類，以減小CSS代碼

3.閉包是什麼，有什麼特性

　　　　爲何產生閉包：javascript語言的特別之處就在於：函數內部能夠直接讀取全局變量，可是在函數外部沒法讀取函數內部的局部變量。出於種種緣由，咱們有時候須要獲取到函數內部的局部變量。可是，上面已經說過了，正常狀況下，這是辦不到的！只有經過變通的方法才能實現。那就是在函數內部，再定義一個函數。

　　　　什麼是閉包： 閉包就是可以讀取其餘函數內部變量的函數。在本質上，閉包是將函數內部和函數外部鏈接起來的橋樑。

　　　　優勢：最大用處有兩個，一個是能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中，不會在f1調用後被自動清除。

　　　　缺點：

　　　　　　1）因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。

　　　　　　2）閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

4.IE常見的兼容問題

　　　　（1：不一樣瀏覽器的標籤默認外補丁margin和內補丁padding不一樣

　　　　　　   發生機率：100%

　　　　　　   解決方案：使用CSS通配符*，設置內外補丁爲0

　　　　（2：塊屬性標籤float以後，又有橫向的margin值，在IE6中顯示會比設置的大（IE6雙邊距bug）

  　　　　　    發生機率：90%

　　　　　　   解決方案：在float標籤樣式控制中加入display:inline;

　　　　（3：滾動條到頂端的距離（滾動高度）到左端的距離

　　　　　　   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

　　　　　　   var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

　　　　（4: 獲取className的集合

　　　　　　　obj.getElementsByClassName（IE不支持）

 　　　　（5:   獲取非行內樣式兼容

　　　　　　　window.getComputedStyle ? getComputedStyle(obj,true)[attr] : obj.currentStyle[attr];

　　　　　(6：獲取事件對象的兼容

　　　　　　   evt = evt || window.event

　　　　 （7：獲取鍵盤按鍵編碼值的兼容

　　　　　　   var key = evt.keyCode || evt.charCode || evt.which;

　　　　（8：阻止事件冒泡的兼容和阻止超連接的默認行爲的兼容

　　　　　　  e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; 事件冒泡

　　　　　　  evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;組織默認行爲

　　　　 （9：添加事件監聽器的兼容和移除事件監聽的兼容

　　　　　　  obj.addEventListener(event,fn,boo);和obj.attachEvent('on' + event,fn);

　　　　　　  obj.removeEventListener(event,fn,boo);和obj.detachEvent('on' + event,fn);

　　　　（10：獲取事件源的兼容

　　　　　　  var target = event.target || event.srcElement;

5.如何居中不定寬高的div

　　　提供三種方法，供參考

　　　　　　使用Flex

　　　　　　只須要在父盒子設置：display: flex; justify-content: center;align-items: center;

　　　使用 CSS3 transform

　　　　　　父盒子設置:position:relative

　　　　　　Div 設置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

　　　使用 display:table-cell 方法

　　　　　　父盒子設置:display:table-cell; text-align:center;vertical-align:middle;

　　　　　　Div 設置: display:inline-block;vertical-align:middle;

 6.TCP的3次握手

　　握手

　　　一、客戶端採用TCP協議將帶有SYN標誌的數據包發送給服務器，等待服務器的確認。

　　　二、服務器端在收到SYN的數據包後，必須確認SYN，即本身發送的ACK標誌，同時，本身也將會向客戶端發送一個SYN標誌。

　　　三、客戶端在接收到服務器短的SYN+ACK包後，本身會向服務器發送ACK包，完成三次握手。那麼客戶端和服務器正式創建了鏈接，開始傳輸數據。

7.請簡述盒模型

　　CSS3中有個box-sizing屬性能夠控制盒子的計算方式，

　　content-box：padding和border不被包含在定義的width和height以內。對象的實際寬度等於設置的width值和border、padding之和。（W3C盒子模型）

　　border-box：padding和border被包含在定義的width和height以內。對象的實際寬度就等於設置的width值。（IE6盒子模型）

8.