記一次網易前端實習面試

記一次網易前端實習面試

很幸運地能收到網易的面試通知，就毫不猶豫翹了課去面試了hhhh~三點的面試，因爲從來沒去過那個中關村西北旺區，吃完飯早早就去了,想象中那裏應該是繁華的地方hhhh，到了發現都在建設中，很多還在建設中，看到了網易旁邊的百度和搜狐，都是長長的大樓或者是高高的建築，滿滿大企業的既視感~一進網易樓就沒網= =，在裏面也沒事幹，就呆在外面看看前端的東西準備下，到2點40的時候跟前臺說了下，一個網易年輕姐姐就帶我上去了~

步入正題-筆試
本來我以爲只有面試的，發現那個姐姐並不是帶我去面試的，帶我去了個房間，留了兩張題目給我，說半小時來說，毫無防備hhh接下來步入正題吧~

1.alert(1&&2),alert(1||0)
具體我不記得了反正就這兩個，我以爲考的是純粹的與運算和或運算，後來發現太天真了

1    alert(1&&2)的結果是2
2    只要“&&”前面是false，無論“&&”後面是true還是false，結果都將返“&&”前面的值;
3    只要“&&”前面是true，無論“&&”後面是true還是false，結果都將返“&&”後面的值;
4
5    alert(0||1)的結果是1
6    只要“||”前面爲false,不管“||”後面是true還是false，都返回“||”後面的值。
7    只要“||”前面爲true,不管“||”後面是true還是false，都返回“||”前面的值。

2.mouseenter和mouseover的區別
這個之前看了下，大概是答出來了，但可能不夠詳細吧

1    不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。對應mouseout
2    只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。對應mouseleave

3.用正則表達式匹配字符串，以字母開頭，後面是數字、字符串或者下劃線，長度爲9-20
看到這題我是崩潰的，因爲正則學的不多，但是稍微寫了下也差不多隻是忘了些

1  var re=new RegExp("^[a-zA-Z][a-zA-Z0-9_]{9,20}$");

4.js字符串兩邊截取空白的trim的原型方法的實現

1  //我的笨方法，當時還想錯了一些，回來後實現了一下，思路是這樣
2  String.prototype.trim = function () { 
3    var arr=this.split("");  
4    while(1) {  
5       if(arr[0]==" ") {   
6          arr.shift();       
7      continue; 
8       }   
9    break;  
10   }
11   while(1){  
12     if(arr[arr.length-1]==" ") { 
13          arr.pop();    
14       continue;  
15    }    
16    break;   
17   }  
18  return arr.join("");
19  }
20  //後來面試官跟我說一句話就解決了，然而我正則都忘了，平時沒怎麼用
21  String.prototype.trim = function () {
22    return this.replace(/(^\s*)|(\s*$)/g,'');
23  };

5.三道判斷輸出的題都是經典的題

1  //5.1
2  var a=4;
3  function b() {
4     a=3; 
5   console.log(a); 
6   function a(){};
7  }
8 b();
9 //明顯輸出是3，因爲裏面修改了a這個全局變量，那個function a(){}是用來干擾的，雖然函數聲明會提升，就被a給覆蓋掉了，這是我的理解
10 //5.2
12 //不記得具體的就類似如下
13  var baz=3;
14  var bazz={  
15   baz: 2, 
16   getbaz: function() { 
17         return this.baz 
18   }
19  }
20  console.log(bazz.getbaz())
21  var g=bazz.getbaz;
22  console.log(g()) ;
23   //第一個輸出是2，第二個輸出是3，這題考察的就是this的指向，函數作爲對象本身屬性調用的時候this指向對象，作爲普通函數調用的時候就指向全局了
24  //5.3var arr=[1,2,3,4,5];
25  for(var i=0;i<arr.length;i++)
26  {   
27   arr[i]=function(){
28  alert(i)
29  }
30  }
31  arr[3]();
32  //典型的閉包啊，看都不用看，肯定彈出5啊

6.寫出position不同值和區別
突然想到還有inherit，當時忘記了，後來面試的時候又重新問了我一下

1. absolute: 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。(不佔位)
2. relative: 生成相對定位的元素，相對於其正常位置進行定位。因此，”left:20” 會向元素的 LEFT 位置添加 20 像素。（佔位）
3. static：默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）inherit：規定應該從父元素繼承 position 屬性的值。
4. fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
   7.寫一個div+css佈局，左邊圖片右邊文字，文字環繞圖片，外面容器固定寬度，文字不固定（這是後來根據面試官描述的，筆試題上只有圖我就不放上來了)
   這道題我沒答好，剛開始我不清楚那個文字是要自適應的面試官說用p標籤包裹文字，我當時就緊張了下，把p標籤錯當成內聯了，然後我再修正，然後加左浮動,然後不行，我就跟面試官說，我以前都直接就一個img它float：left，加文字不加p標籤就好了然後我回來試一試才發現= =，直接加p標籤就可以了啊= =，omg我的錯誤！！！

8.講述你對reflow和repaint的理解
這個真不會了沒接觸，第一個我猜是重新佈局，第二個倒是見過就是重繪，就想到document.write(),這個後來也沒再問我了查查查

repaint就是重繪，reflow就是迴流。repaint主要是針對某一個DOM元素進行的重繪，reflow則是迴流，針對整個頁面的重排
嚴重性：
在性能優先的前提下，性能消耗 reflow大於repaint。

體現：
repaint是某個DOM元素進行重繪；reflow是整個頁面進行重排，也就是頁面所有DOM元素渲染。（web前端學習交流羣：328058344 禁止閒聊，非喜勿進！）

如何觸發：
style變動造成repaint和reflow。不涉及任何DOM元素的排版問題的變動爲repaint，例如元素的color/text-align/text-decoration等等屬性的變動。除上面所提到的DOM元素style的修改基本爲reflow。例如元素的任何涉及長、寬、行高、邊框、display等style的修改。

常見觸發場景：
觸發repaint：

1  color的修改，如color=#ddd；
2  text-align的修改，如text-align=center；
3  a:hover也會造成重繪。
4  :hover引起的顏色等不導致頁面迴流的style變動。

觸發reflow：

1  width/height/border/margin/padding的修改，如width=778px；
2  動畫，:hover等僞類引起的元素表現改動，display=none等造成頁面迴流；
3  appendChild等DOM元素操作；
4  font類style的修改；
5  background的修改，注意着字面上可能以爲是重繪，但是瀏覽器確實迴流了，經過瀏覽器廠家的優化，部分background的修改只觸發repaint，當然IE不用考慮；
6  scroll頁面，這個不可避免；
7  resize頁面，桌面版本的進行瀏覽器大小的縮放，移動端的話，還沒玩過能拖動程序，resize程序窗口大小的多窗口操作系統。
8 讀取元素的屬性（這個無法理解，但是技術達人是這麼說的，那就把它當做定理吧）：讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；

如何避免：
儘可能在DOM末梢通過改變class來修改元素的style屬性：儘可能的減少受影響的DOM元素。

避免設置多項內聯樣式：使用常用的class的方式進行設置樣式，以避免設置樣式時訪問DOM的低效率。

設置動畫元素position屬性爲fixed或者absolute：由於當前元素從DOM流中獨立出來，因此受影響的只有當前元素，元素repaint。

犧牲平滑度滿足性能：動畫精度太強，會造成更多次的repaint/reflow，犧牲精度，能滿足性能的損耗，獲取性能和平滑度的平衡。

避免使用table進行佈局：table的每個元素的大小以及內容的改動，都會導致整個table進行重新計算，造成大幅度的repaint或者reflow。改用div則可以進行針對性的repaint和避免不必要的reflow。

避免在CSS中使用運算式：學習CSS的時候就知道，這個應該避免，不應該加深到這一層再去了解，因爲這個的後果確實非常嚴重，一旦存在動畫性的repaint/reflow，那麼每一幀動畫都會進行計算，性能消耗不容小覷。

面試部分
半小時寫完筆試後，等待面試，hh中途遇到了北郵的師兄聊了一些nodejs的東西步入正題面試

1. 什麼時候開始學前端
2. 如何學前端
3. 看過誰的博客
4. 開始看我的簡歷問了，問項目，問webpack/gulp區別，問項目如何實現什麼的，再問了筆試題（上面講過了）
5. 等等等都問的項目
   基本也就這些，面試官人挺好的，感覺沒什麼壓力~最後也讓我過了吧，就後面暑假放假再去聯繫~說我還得多去看看基礎的東西~確實基礎還不夠紮實哈，不過總的來說，這人生第一次面試還挺順利的說，也是運氣好吧~希望學校早放假能去實習一番~