前端筆試面試題

 前段時間去某公司（不是BAT）面試實習生~在這分享一下說起的知識點~還有筆試題目等

一去到，先不計時的一份筆試題~寫完跟他說就行了~貌似我大概用了差很少一個小時吧，12道題的樣子，不過我已經所有記得了~我說說我記得的吧，順便貼一下，我回來以後去找的答案

1，談談前端性能的優化，分別說說CSS，JS有哪幾種優化方式？

當時給我寫的空間略小，我就簡單寫了一下比較常見的CSS置header，JS置body底部，優化圖片的大小，有sprite圖來減小HTTP請求，合併重複的CSS，JS代碼等等，後來想一想寫的還挺少的~不事後來面試沒問到~

而後我找到的答案是~說真的很多的趕腳~

對於爲何要儘可能減小 HTTP 請求 ，其實我以前並非很瞭解，剛剛找了一下發現前端亂燉有篇文章講得挺詳細的~

http://www.html-js.com/article/Number-of-requests-from-reduced-about-http

①CSS的優化

1. 把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)

2. 避免 CSS 表達式 (Avoid CSS Expressions)

3. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External

4. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

5. 使用 <link> 而不是@importChoose <link> over @import

6. 避免使用Filter (Avoid Filters)

①Javascript的優化

1. 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)

2. Make JavaScript and CSS External

3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

4. 移除重複腳本 (Remove Duplicate Scripts)

5. 減小 DOM 訪問 (Minimize DOM Access)

附上Yahoo前端優化性能規則

http://segmentfault.com/a/1190000000735395

最近翻博客的時候，有人提出前端優化應該不該忽視的HTML的優化~

http://www.infoq.com/cn/news/2010/05/baidu-html-optimize

2，盒子模型，標準模型（strict mode）和怪異模型（quirks mode）的區別

這個我直接給他兩個圖，兩句解釋一下完事~

IE盒子模型即怪異模型~

 

更多見：http://www.heshare.com/201308/419.html

3.談談語義化的理解

1，去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構2，有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；3，方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

4.什麼是閉包，寫一個簡單的閉包~談談閉包的優缺點

以前看了不少解釋都挺暈的~最近看了一篇感受是我看過講得最詳細最好的~

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

閉包優勢1.但願一個變量長期駐紮在內存中2.避免全局變量的污染3.私有成員的存在

閉包缺點：過分使用閉包會致使性能的降低。函數裏放匿名函數，則產生了閉包；產生內存泄露問題，因爲IE的js對象和DOM對象使用不一樣的垃圾收集方法，所以閉包在IE中會致使內存泄露問題，也就是沒法銷燬駐留在內存中的元素

5.call() 和 .apply() 的區別和做用？

這兩個方法的用途都是在特定的做用域中調用函數，實際上等於設置函數體內this對象的值。它們的區別僅在於接收參數的方式不一樣，apply（）方法接收兩個參數：一個是在其中運行函數的做用域，另外一個是參數數組。其中，第二個參數能夠是Array實例，也能夠是argument對象。而在使用call()方法的時，傳遞函數的參數必須逐個列舉出來。以下

Sum.apply(this, argument) 或 sum.apply(this, [num1，num2])

Sum.call(this, num1, num2)

更詳細的解釋可見：http://segmentfault.com/a/1190000000660786#articleHeader15

6.用兩種方式進行數組去重

第一種是比較常規的方法思路： 

1.構建一個新的數組存放結果 

2.for循環中每次從原數組中取出一個元素，用indexOf查找新數組中是否有該元素 

3.若沒有，則存到結果數組中

1 Array.prototype.unique=function(){
2     var outArr=[];
3     for(var i=0;i<this.length;i++){
4         if(outArr.indexOf(this[i])==-1){
5             outArr.push(this[i]);
6         }
7     }
8     return outArr;
9 };

 

 

第二種方法比上面的方法效率要高

思路：

1.先將原數組進行排序

2.檢查原數組中的第i個元素 與 結果數組中的最後一個元素是否相同，由於已經排序，因此重複元素會在相鄰位置

3.若是不相同，則將該元素存入結果數組中

 

第二種方法也會有必定的侷限性，由於在去重前進行了排序，因此最後返回的去重結果也是排序後的。若是要求不改變數組的順序去重，那這種方法便不可取了。

第三種方法（推薦使用）

思路：

1.建立一個新的數組存放結果

2.建立一個空對象

3.for循環時，每次取出一個元素與對象進行對比，若是這個元素不重複，則把它存放到結果數組中，同時把這個元素的內容做爲對象的一個屬性，並賦值爲1，存入到第2步創建的對象中。

說明：至於如何對比，就是每次從原數組中取出一個元素，而後到對象中去訪問這個屬性，若是能訪問到值，則說明重複。

 

除了上面那些，還常常被面試官要去現場用js手寫一些簡單的數據結構，例如二分法查找，排序等等~還有被問到幾回的就是寫一個閉包，用js寫一個類的繼承等等~

最後貼一下我以前看到算是比較全的前端面試題：

http://segmentfault.com/a/1190000002562454

但願以上對你們有用~在準備實習面試的期間，借這個機會真的學習到了不少~也算是在其中有所收穫~謝謝~也但願對你們有用~

/****************美麗分割線*******************/

PS：此文原址http://www.cnblogs.com/AllenChou/p/4684548.html，謝謝~

---恢復內容結束---

 前端筆試面試題

q前段時間去某公司（不是BAT）面試實習生~在這分享一下說起的知識點~還有筆試題目等~

一去到，先不計時的一份筆試題~寫完跟他說就行了~貌似我大概用了差很少一個小時吧，12道題的樣子，不過我已經所有記得了~我說說我記得的吧，順便貼一下，我回來以後去找的答案~

1，談談前端性能的優化，分別說說CSS，JS有哪幾種優化方式？

當時給我寫的空間略小，我就簡單寫了一下比較常見的CSS置header，JS置body底部，優化圖片的大小，有sprite圖來減小HTTP請求，合併重複的CSS，JS代碼等等，後來想一想寫的還挺少的~不事後來面試沒問到~

而後我找到的答案是~說真的很多的趕腳~

對於爲何要儘可能減小 HTTP 請求 ，其實我以前並非很瞭解，剛剛找了一下發現前端亂燉有篇文章講得挺詳細的~

http://www.html-js.com/article/Number-of-requests-from-reduced-about-http

①CSS的優化

1. 把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)

2. 避免 CSS 表達式 (Avoid CSS Expressions)

3. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External

4. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

5. 使用 <link> 而不是@importChoose <link> over @import

6. 避免使用Filter (Avoid Filters)

①Javascript的優化

1. 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)

2. Make JavaScript and CSS External

3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

4. 移除重複腳本 (Remove Duplicate Scripts)

5. 減小 DOM 訪問 (Minimize DOM Access)

附上Yahoo前端優化性能規則

http://segmentfault.com/a/1190000000735395

最近翻博客的時候，有人提出前端優化應該不該忽視的HTML的優化~

http://www.infoq.com/cn/news/2010/05/baidu-html-optimize

2，盒子模型，標準模型（strict mode）和怪異模型（quirks mode）的區別

這個我直接給他兩個圖，兩句解釋一下完事~

IE盒子模型即怪異模型~

 

更多見：http://www.heshare.com/201308/419.html

3.談談語義化的理解

1，去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構2，有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；3，方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

4.什麼是閉包，寫一個簡單的閉包~談談閉包的優缺點

以前看了不少解釋都挺暈的~最近看了一篇感受是我看過講得最詳細最好的~

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

閉包優勢1.但願一個變量長期駐紮在內存中2.避免全局變量的污染3.私有成員的存在

閉包缺點：過分使用閉包會致使性能的降低。函數裏放匿名函數，則產生了閉包；產生內存泄露問題，因爲IE的js對象和DOM對象使用不一樣的垃圾收集方法，所以閉包在IE中會致使內存泄露問題，也就是沒法銷燬駐留在內存中的元素

5.call() 和 .apply() 的區別和做用？

這兩個方法的用途都是在特定的做用域中調用函數，實際上等於設置函數體內this對象的值。它們的區別僅在於接收參數的方式不一樣，apply（）方法接收兩個參數：一個是在其中運行函數的做用域，另外一個是參數數組。其中，第二個參數能夠是Array實例，也能夠是argument對象。而在使用call()方法的時，傳遞函數的參數必須逐個列舉出來。以下

Sum.apply(this, argument) 或 sum.apply(this, [num1，num2])

Sum.call(this, num1, num2)

更詳細的解釋可見：http://segmentfault.com/a/1190000000660786#articleHeader15

6.用兩種方式進行數組去重

第一種是比較常規的方法思路： 

1.構建一個新的數組存放結果 

2.for循環中每次從原數組中取出一個元素，用indexOf查找新數組中是否有該元素 

3.若沒有，則存到結果數組中

1 Array.prototype.unique=function(){
2     var outArr=[];
3     for(var i=0;i<this.length;i++){
4         if(outArr.indexOf(this[i])==-1){
5             outArr.push(this[i]);
6         }
7     }
8     return outArr;
9 };

 

 

第二種方法比上面的方法效率要高

思路：

1.先將原數組進行排序

2.檢查原數組中的第i個元素 與 結果數組中的最後一個元素是否相同，由於已經排序，因此重複元素會在相鄰位置

3.若是不相同，則將該元素存入結果數組中

 

第二種方法也會有必定的侷限性，由於在去重前進行了排序，因此最後返回的去重結果也是排序後的。若是要求不改變數組的順序去重，那這種方法便不可取了。

第三種方法（推薦使用）

思路：

1.建立一個新的數組存放結果

2.建立一個空對象

3.for循環時，每次取出一個元素與對象進行對比，若是這個元素不重複，則把它存放到結果數組中，同時把這個元素的內容做爲對象的一個屬性，並賦值爲1，存入到第2步創建的對象中。

說明：至於如何對比，就是每次從原數組中取出一個元素，而後到對象中去訪問這個屬性，若是能訪問到值，則說明重複。

 

除了上面那些，還常常被面試官要去現場用js手寫一些簡單的數據結構，例如二分法查找，排序等等~還有被問到幾回的就是寫一個閉包，用js寫一個類的繼承等等~

最後貼一下我以前看到算是比較全的前端面試題：

http://segmentfault.com/a/1190000002562454

但願以上對你們有用~在準備實習面試的期間，借這個機會真的學習到了不少~也算是在其中有所收穫~謝謝~也但願對你們有用~

/****************美麗分割線*******************/

PS：此文原址http://www.cnblogs.com/AllenChou/p/4684548.html，謝謝~