網易前端面試題總結,你見過幾個?


划重點  

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

 

步入正題—筆試 

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

 

1.alert(1&&2),alert(1||0)

具體我不記得了反正就這兩個,我以為考的是純粹的與運算和或運算,后來發現太天真了

alert(1&&2)的結果是2

只要“&&”前面是false,無論“&&”后面是true還是false,結果都將返“&&”前面的值;

只要“&&”前面是true,無論“&&”后面是true還是false,結果都將返“&&”后面的值;

alert(0||1)的結果是

只要“||”前面為false,不管“||”后面是true還是false,都返回“||”后面的值

只要“||”前面為true,不管“||”后面是true還是false,都返回“||”前面的值。

 

2.mouseenter和mouseover的區別

這個之前看了下,大概是答出來了,但可能不夠詳細吧

不論鼠標指針穿過被選元素或其子元素,都會觸發 mouseover 事件。對應mouseout

只有在鼠標指針穿過被選元素時,才會觸發 mouseenter 事件。對應mouseleave

 

3.用正則表達式匹配字符串,以字母開頭,后面是數字、字符串或者下划線,長度為9-20

看到這題我是崩潰的,因為正則學的不多,但是稍微寫了下也差不多只是忘了些

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

 

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

//我的笨方法,當時還想錯了一些,回來后實現了一下,思路是這

String.prototype.trim = function () {

 var arr=this.split("");   

  while(1) {   

   if(arr[0]==" ") {    

       arr.shift();              

    continue;     

     }       

  break;    

  } 

  while(1){   

    if(arr[arr.length-1]==" ") {  

         arr.pop();             

     continue;      

   }       

   break;      

  }   

 return arr.join(""); 

 }  //后來面試官跟我說一句話就解決了,然而我正則都忘了,平時沒怎么用 

 String.prototype.trim = function () { 

   return this.replace(/(^s*)|(s*$)/g,'');   

 };

 

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

 //5.1

var a=4

function b()

    a=3;    

   console.log(a);   

  function a(){}; 

  } b();  

 //明顯輸出是3,因為里面修改了a這個全局變量,那個function a(){}是用來干擾的,雖然函數聲明會提升,就被a給覆蓋掉了,這是我的理解

 //5.2 

 //不記得具體的就類似如下

 var baz=3; 

  var bazz={    

   baz: 2,   

  getbaz: function() {  

         return this.baz        

  } 

  }  

  console.log(bazz.getbaz())  

  var g=bazz.getbaz;  

  console.log(g()) ;  

   //第一個輸出是2,第二個輸出是3,這題考察的就是this的指向,函數作為對象本身屬性調用的時候this指向對象,作為普通函數調用的時候就指向全局了  

  //5.3var arr=[1,2,3,4,5];  

 for(var i=0;i<arr.length;i++) 

  {     

   arr[i]=function(){  

  alert(i)  

  }  

  }  

  arr[3](); 

 //典型的閉包啊,看都不用看,肯定彈出5啊

 

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

absolute: 生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。(不占位)

relative: 生成相對定位的元素,相對於其正常位置進行定位。因此,”left:20” 會向元素的 LEFT 位置添加 20 像素。(占位)

static:默認值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)inherit:規定應該從父元素繼承 position 屬性的值。

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元素渲染。

 

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

 

常見觸發場景:
觸發repaint:

color的修改,如color=#ddd

text-align的修改,如text-align=center

a:hover也會造成重繪

:hover引起的顏色等不導致頁面回流的style變動。

觸發reflow:

width/height/border/margin/padding的修改,如width=778px;

動畫,:hover等偽類引起的元素表現改動,display=none等造成頁面回流appendChild等DOM元素操作;

font類style的修改;

background的修改,注意着字面上可能以為是重繪,但是瀏覽器確實回流了,經過瀏覽器廠家的優化,部分background的修改只觸發repaint,當然IE不用考慮;

scroll頁面,這個不可避免;

resize頁面,桌面版本的進行瀏覽器大小的縮放,移動端的話,還沒玩過能拖動程序,resize程序窗口大小的多窗口操作系統。

讀取元素的屬性(這個無法理解,但是技術達人是這么說的,那就把它當做定理吧):讀取元素的某些屬性(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的東西

步入正題面試

什么時候開始學前端

如何學前端

看過誰的博客

開始看我的簡歷問了,問項目,問webpack/gulp區別,問項目如何實現什么的,再問了筆試題(上面講過了)

等等等都問的項目

 

基本也就這些,面試官人挺好的,感覺沒什么壓力~最后也讓我過了吧,說我還得多去看看基礎的東西~確實基礎還不夠扎實哈,不過總的來說,這人生第一次面試還挺順利的說,也是運氣好吧~希望以后的路能踏實的走下去吧~

原文:https://www.cnblogs.com/Vhaomei0452/p/10951039.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM