前端面試題

1、數組去重

方法1var a = new Array(1,2,2,2,2,5,3,2,9,5,6,3);
Array.prototype.unique1 = function(){
    var n = [];     //一個新的臨時數組
    for(var i=0; i<this.length; i++){
        //如果把當前數組的第i已經保存進了臨時數組, 那麼跳過
        if(n.indexOf(this[i]) == -1){
            n.push(this[i]);
        }
    }
    return n;
}
console.log(a.unique1());

方法2:
Array.prototype.unique2 = function(){
    var hash = {},
        n = [];     //hash 作爲哈希表, n爲臨時數組
    for(var i=0; i<this.length; i++){
        if(!hash[this[i]]){         //如果hash表中沒有當前項
            hash[this[i]] = true;   //存入hash表
            n.push(this[i]);        //當前元素push到臨時數組中
        }
    }
    return n;
}
方法3:(先排序再去重)
Array.prototype.unique4 = function(){
    this.sort(function(a, b){ return a - b;});
    var n = [this[0]];
    for(var i=1; i<this.length; i++){
        if(this[i] != this[i-1]){
            n.push(this[i]);
        }
    }
    return n;
}

2、瀏覽器內核分別有:

IE瀏覽器的內核Trident;

Mozilla的Gecko;

Chrome的Blink(WebKit的分支);

Opera內核原爲Presto,現爲Blink;

3、前端頁面有哪三層構成,分別是什麼?作用是什麼?

a. 結構層:由 HTML 或 XHTML 之類的標記語言負責創建,僅負責語義的表達。解決了頁面“內容是什麼”的問題。

b. 表示層:由CSS負責創建,解決了頁面“如何顯示內容”的問題。

c. 行爲層:由腳本負責。解決了頁面上“內容應該如何對事件作出反應”的問題。

4、AMD和CMD 規範的區別?

AMD 提前執行依賴 - 儘早執行,requireJS 是它的實現

CMD 按需執行依賴 - 懶執行,seaJS 是它的實現

5、請解釋一下 JavaScript 的同源策略

同源策略指的是:協議,域名,端口相同,同源策略是一種安全協議。

指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

6、平時如何管理你的項目?

a. 先期團隊必須確定好全局樣式(globe.css),編碼模式(utf-8) 等;

b. 編寫習慣必須一致(例如都是採用繼承式的寫法,單樣式都寫成一行);

c. 標註樣式編寫人,各模塊都及時標註(標註關鍵樣式調用的地方);

d. 頁面進行標註(例如 頁面 模塊 開始和結束);

e. CSS跟HTML 分文件夾並行存放,命名都得統一(例如style.css);

f. JS 分文件夾存放 命名以該JS功能爲準的英文翻譯。

g. 圖片採用整合的 images.png png8 格式文件使用 儘量整合在一起使用方便將來的管理

7、對前端界面工程師這個職位是怎麼樣理解的?

a. 前端是最貼近用戶的程序員,前端的能力就是能讓產品從 90分進化到 100 分,甚至更好

b. 參與項目,快速高質量完成實現效果圖,精確到1px;

c. 與團隊成員,UI設計,產品經理的溝通;

d. 做好的頁面結構,頁面重構和用戶體驗;

e. 處理hack,兼容、寫出優美的代碼格式;

f. 針對服務器的優化、擁抱最新前端技術。

8、什麼叫優雅降級和漸進增強?

漸進增強 progressive enhancement:

針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation:

一開始就構建完整的功能,然後再針對低版本瀏覽器進行兼容。

區別:

a. 優雅降級是從複雜的現狀開始,並試圖減少用戶體驗的供給

b. 漸進增強則是從一個非常基礎的,能夠起作用的版本開始,並不斷擴充,以適應未來環境的需要

c. 降級(功能衰減)意味着往回看;而漸進增強則意味着朝前看,同時保證其根基處於安全地帶

9、線程與進程的區別?

a. 一個程序至少有一個進程,一個進程至少有一個線程

b. 線程的劃分尺度小於進程,使得多線程程序的併發性高

c. 進程在執行過程中擁有獨立的內存單元,而多個線程共享內存,從而極大地提高了程序的運行效率

d. 每個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。但是線程不能夠獨立執行,必須依存在應用程序中,由應用程序提供多個線程執行控制

e. 多線程的意義在於一個應用程序中,有多個執行部分可以同時執行。但操作系統並沒有將多個線程看做多個獨立的應用,來實現進程的調度和管理以及資源分配

10、web storage和cookie的區別

a. Cookie的大小是受限的

b. 每次你請求一個新的頁面的時候Cookie都會被髮送過去,這樣無形中浪費了帶寬

c. cookie還需要指定作用域,不可以跨域調用

d. Web Storage擁有setItem,getItem等方法,cookie需要前端開發者自己封裝setCookie,getCookie

e. Cookie的作用是與服務器進行交互,作爲HTTP規範的一部分而存在 ,而Web Storage僅僅是爲了在本地“存儲”數據而生

f. IE7、IE6中的UserData通過簡單的代碼封裝可以統一到所有的瀏覽器都支持web storage

11、對BFC規範的理解

BFC全稱是Block Formatting Context,即塊格式化上下文。它是CSS2.1規範定義的,關於CSS渲染定位的一個概念。

BFC是頁面CSS 視覺渲染的一部分,用於決定塊盒子的佈局及浮動相互影響範圍的一個區域。

BFC的一個最重要的效果是,讓處於BFC內部的元素與外部的元素相互隔離,使內外元素的定位不會相互影響。

利用BFC可以閉合浮動,防止與浮動元素重疊。

12、瀏覽器本地存儲:

在HTML5中提供了sessionStorage和localStorage。

sessionStorage用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬,是會話級別的存儲。

localStorage用於持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。

13、請你談談Cookie的弊端

a. 每個特定的域名下最多生成的cookie個數有限制

b. IE和Opera 會清理近期最少使用的cookie,Firefox會隨機清理cookie

c. cookie的最大大約爲4096字節,爲了兼容性,一般不能超過4095字節

d. 安全性問題。如果cookie被人攔截了,那人就可以取得所有的session信息。

14、講講輸入完網址按下回車,到看到網頁這個過程中發生了什麼

a. 域名解析

b. 發起TCP的3次握手

c. 建立TCP連接後發起http請求

d. 服務器端響應http請求,瀏覽器得到html代碼

e. 瀏覽器解析html代碼,並請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現給用戶

15、ajax過程:

(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象.

(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.

(3)設置響應HTTP請求狀態變化的函數.

(4)發送HTTP請求.

(5)獲取異步調用返回的數據.

(6)使用JavaScript和DOM實現局部刷新.

16、GET和POST的區別,何時使用POST?

 GET:一般用於信息獲取,使用URL傳遞參數,對所發送信息的數量也有限制,一般在2000個字符
 POST:一般用於修改服務器上的資源,對所發送的信息沒有限制。
 GET方式需要使用Request.QueryString來取得變量的值,而POST方式通過Request.Form來獲取變量的值,
    也就是說Get是通過地址欄來傳值,而Post是通過提交表單來傳值。

然而,在以下情況中,請使用 POST 請求:
無法使用緩存文件(更新服務器上的文件或數據庫)
向服務器發送大量數據(POST 沒有數據量限制)
發送包含未知字符的用戶輸入時,POST 比 GET 更穩定也更可靠
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章