前端面試題總結，你見過幾個？

劃重點 
很幸運地能收到網易的面試通知，就堅決果斷去面試了~三點的面試，由於歷來沒去過那個中關村西北旺區，吃完飯早早就去了,想象中那裏應該是繁華的地方，到了發現都在建設中，不少還在建設中，看到了網易旁邊的百度和搜狐，都是長長的大樓或者是高高的建築，滿滿大企業的既視感~一進網易樓就沒網= =，在裏面也沒事幹，就呆在外面看看前端的東西準備下，到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區別，問項目如何實現什麼的，再問了筆試題（上面講過了） 
等等等都問的項目 


基本也就這些，面試官人挺好的，感受沒什麼壓力~最後也讓我過了吧，說我還得多去看看基礎的東西~確實基礎還不夠紮實哈，不過總的來講，這人生第一次面試還挺順利的說，也是運氣好吧~但願之後的路能踏實的走下去吧~ 

須要web前端學習資料的同窗，加羣434623999