網易前端面試總結

2015-08-19

下午6點接到網易前端的面試電話，還是昨天提前預約的，而且今天超級准時的給我打電話，贊一個！！

1. 前端頁面優化

答：1. 減少http請求，2.-e 3.盡量靜態頁面，從簡原則 4.代碼規范

 

1. Css盒模型

答：magin+border+padding+width ,

當設置background顏色的時候，會覆蓋padding+width（其實還有border，因為當border為虛線dashed時，background背景色會嵌進去。）

還有原來ie瀏覽器還不兼容！！！

w3c中的盒子模型的寬:包括margin+border+padding+width;

    width: margin*2+border*2+padding*2+width;

    height: margin*2+border*2+padding*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

上面的兩個寬度相加的屬性是一樣的。不過在ie中content的寬度包括padding和border這兩個屬性；

例如一個盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解釋，那么這個盒子模型占用的寬度為：20*2+10*2+10*2+200=280px; 高度：20*2+10*2+20*2+50=130px;盒子的實際寬度大小為:10*2+10*2+200=240px;實際高度：10*2+10*2+50=90px;

 

用ie的盒子模型解釋 ：盒子在網頁中占據的大小為20*2+200=240px; 高：20*2+50=90px;

盒子的實際大小為：寬度:200px, 高度:50px;（ie5之前的版本）

我們常常理解的盒子模型是w3c這樣的盒子模型

 

解決問題

1. 避免導致這個問題的情景
2. 插入額外的標記
3. 使用條件注釋判斷語句
4. 使用CSS hacks

解決方法3：這些內容只能在IE/Win中被解析，下面的代碼只有在IE6以下的版本中被執行：

<!--[if lt IE 6]>
<style type="text/css">
  #news {width:250px}
</style>
<![endif]-->

解決方法4：css hacks

#news {

  padding:10px;

  border:1px solid;

  width:250px;

  width:228px;

}

所有的瀏覽器都會看到並理解“width:250px”，但IE 5.*/Win不會讀取下面的一行，width:228px，但這行會被其余的瀏覽器解析。所以最后，IE 5.*/Win得到的width值是250px，其他瀏覽器得到的是228px。這樣，在全部的瀏覽器中我們的新聞列表的總寬度就一致了。

1. Css選擇器，（特別是后代選擇器）， >

答：

.class	.intro	選擇 class="intro" 的所有元素。	1
#id	#firstname	選擇 id="firstname" 的所有元素。	1
*	*	選擇所有元素。	2
element	p	選擇所有 <p> 元素。	1
element,element	div,p	選擇所有 <div> 元素和所有 <p> 元素。	1
element element	div p	選擇 <div> 元素內部的所有 <p> 元素。	1
element>element	div>p	選擇父元素為 <div> 元素的所有 <p> 元素。(即不包括孫元素)	2
element+element	div+p	選擇緊接在 <div> 元素之后的所有 <p> 元素。	2
[attribute]	[target]	選擇帶有 target 屬性所有元素。	2
[attribute=value]	[target=_blank]	選擇 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 "flower" 的所有元素。	2
[attribute|=value]	[lang|=en]	選擇 lang 屬性值以 "en" 開頭的所有元素。	2

 

 

1. Position定位

答：①absolute ：絕對定位；脫離文檔流的布局，遺留下來的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為Body文檔本身。

②relative ：相對定位；脫離文檔流的布局，但還在文檔流原先的位置遺留空白區域。定位的起始位置為此元素原先在文檔流的位置。

③fixed ：固定定位；定位元素是相對於瀏覽器窗口。不隨着滾動條的移動而改變位置。（這里的瀏覽器窗口據我理解應該是可視區）

④static ：默認值；默認布局。

1. 事件代理

答： JavaScript事件是所有網頁互動性的根基（我指的是真正的互動性，而不僅是那些CSS下拉菜單）。在傳統的事件處理中，你按照需要為每一個元素添加或者是刪除事件處理器。然而，事件處理器將有可能導致內存泄露或者是性能下降——你用得越多這種風險就越大。JavaScript事件代理則是一種簡單的技巧，通過它你可以把事件處理器添加到一個父級元素上，這樣就避免了把事件處理器添加到多個子級元素上。

它是怎么運作的呢？

      事件代理用到了兩個在JavaSciprt事件中常被忽略的特性：事件冒泡以及目標元素。當一個元素上的事件被觸發的時候，比如說鼠標點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。任何一個事件的目標元素都是最開始的那個元素，在我們的這個例子中也就是按鈕，並且它在我們的元素對象中以屬性的形式出現。使用事件代理，我們可以把事件處理器添加到一個元素上，等待一個事件從它的子級元素里冒泡上來，並且可以得知這個事件是從哪個元素開始的。

這對我有什么好處呢？

      想象一下現在我們有一個10列、100行的HTML表格，你希望在用戶點擊表格中的某一單元格的時候做點什么。比如說我有一次就需要讓表格中的每一個單元格在被點擊的時候變成可編輯狀態。如果把事件處理器加到這1000個單元格會產生一個很大的性能問題，並且有可能導致內存泄露甚至是瀏覽器的崩潰。相反地，使用事件代理，你只需要把一個事件處理器添加到table元素上就可以了，這個函數可以把點擊事件給截下來，並且判斷出是哪個單元格被點擊了。

用代碼寫出來是什么樣呢？

     代碼很簡單，我們所要關心的只是如何檢測目標元素而已。比方說我們有一個table元素，ID是“report”，我們為這個表格添加一個事件處理器以調用editCell函數。editCell函數需要判斷傳到table來的事件的目標元素。考慮到我們要寫的幾個函數中都有可能用到這一功能，所以我們把它單獨放到一個名為getEventTarget的函數中：

function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}

e這個變量表示的是一個事件對象，我們只需要寫一點點跨瀏覽器的代碼來返回目標元素，在IE里目標元素放在srcElemnt屬性中，而在其它瀏覽器里則是target屬性。

接下來就是editCell函數了，這個函數調用到了getEventTarget函數。一旦我們得到了目標元素，剩下的事情就是看看它是否是我們所需要的那個元素了。

function editCell(e) 

{
           var target = getEventTarget(e);
           if(target.tagName.toLowerCase() =='td') 

           {
                // DO SOMETHING WITH THE CELL
          }
}

在editCell函數中，我們通過檢查目標元素標簽名稱的方法來確定它是否是一個表格的單元格。這種檢查也許過於簡單了點；如果它是這個目標元素單元格里的另一個元素呢？我們需要為代碼做一點小小的修改以便於其找出父級的td元素。如果說有些單元格不需要被編輯怎么辦呢？此種情況下我們可以為那些不可編輯的單元格添加一個指定的樣式名稱，然后在把單元格變成可編輯狀態之前先檢查它是否不包含那個樣式名稱。選擇總是多樣化的，你只需找到適合你應用程序的那一種。

有哪些優點和缺點呢？

      JavaScript事件代理帶來的好處有：

那些需要創建的以及駐留在內存中的事件處理器少了。這是很重要的一點，這樣我們就提高了性能，並降低了崩潰的風險。 
在DOM更新后無須重新綁定事件處理器了。如果你的頁面是動態生成的，比如說通過Ajax，你不再需要在元素被載入或者卸載的時候來添加或者刪除事件處理器了。 
潛在的問題也許並不那么明顯，但是一旦你注意到這些問題，你就可以輕松地避免它們：

你的事件管理代碼有成為性能瓶頸的風險，所以盡量使它能夠短小精悍。 

不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一樣冒泡。事實上blur和focus可以用事件捕獲而非事件冒泡的方法獲得（在IE之外的其它瀏覽器中）。 

在管理鼠標事件的時候有些需要注意的地方。如果你的代碼處理mousemove事件的話你遇上性能瓶頸的風險可就大了，因為mousemove事件觸發非常頻繁。而mouseout則因為其怪異的表現而變得很難用事件代理來管理。 

 

1. 創建和插入元素

答：創建元素documents.createElement,

父元素.appendChild( 新元素 )，插入在最后。

父元素.insertBefore(新元素，定位元素(即插入在改元素之前) )，

刪除子元素: 父元素.removeChild(待刪除的子元素)

如何在指定元素的后面插入元素，實現insertAfter的方法：(用原生js)

先找到該元素的父元素，然后判斷該元素是否是最后一個元素，如果是最后一個元素就直接在父元素上appendChild，如果不是父元素，就找到該元素的下一個元素，然后在它的下一個元素之前用insertBefore插入。

 

1. bootstrap的自適應是如何實現的?

答：

1. 事件發生的順序？

答：事件產生的順序變成：

事件從根節點開始，逐級派送到子節點，若節點綁定了事件動作，則執行動作，然后繼續走，這個階段稱為“捕獲階段(Capture)”；
執行完捕獲階段后，事件由子節點往根節點派送，若節點綁定了事件動作，則執行動作，然后繼續走，這個階段稱為“冒泡階段(Bubble)”。

1. js中基本數據類型，如何判斷？

答：js中的數值類型有：字符串、數字、布爾、數組、對象、Null、Undefined

Undefined 這個值表示變量不含有值。

可以通過將變量的值設置為 null 來清空變量。

對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔。

判斷數據類型方法：

1.  使用 typeof方法。

2.  使用 instanceof  的方式

使用typeof 可以區別出String 和 Object 的類型。

但是如果對一個數組進行typeof 的話， 發現值也是 object , 也就是說， 無法判斷出0bject 和 Array 的區別.

2. instanceof 是對象型使用的方法。

對於字符串來說有 基本類型的String 和 對象型的String, 這個Java 的概念有點類似。

比較以下的區別：

var str1 = "11";

var str2 = new String("11");

alert(typeof(str1)); // string

alert(typeof(str2)); // object

alert(str1 instanceof String); //false

alert(str2 instanceof String); //true