Web前端開發筆試&面試_02（others）

AL>>

1.CSS 3 如何實現旋轉圖片？

　　答：transform : rotate

2.寫CSS 的工具？

　　答：LESS、SASS

3.JavaScript 倒計時？

　　答：setTimeout

4.setTimeout 和 setInterval 的區別？

　　答：setTimeout 指定在某時間段後調用一次； setInterval 則調用屢次。

5.setTimeout 如何調用屢次？

　　答：在回調函數裏再次調用 setTimeout。

6.JavaScript 怎麼處理異常？

　　答：throw 和catch

7.XML  和 JSON 的優缺點？

　　答：XML的優缺點：

　　　　　　優勢：a.格式統一，符合標準

　　　　　　　　　b.容易與其餘系統進行遠程交互，數據共享比較方便

　　　　　　　　　c.調用將 XML 用做傳輸的現有服務

　　　　　　　　　d.使用 XSLT 能夠動態轉換 XML。這是企業服務總線 (ESB) 方案中的理想功能。

　　 　　　  缺點：

　　　　　　　　　a.XML文件格式文件龐大，格式複雜，傳輸佔用帶寬

　　　　　　　　　b.服務器端和客戶端都須要花費大量代碼來解析XML，不論服務器端和客戶端代碼變的異常複雜和不容易維護

　　　　　　　　　c.客戶端不一樣瀏覽器之間解析XML的方式不一致，須要重複編寫不少代碼

　　　　　　　　　d.客戶端不一樣瀏覽器之間解析XML的方式不一致，須要重複編寫不少代碼

 　　     JSON的優缺點：

　　　　　　優勢：a.數據格式比較簡單，易於讀寫，格式都是壓縮的，佔用帶寬小，瀏覽器解析快

　　　　　　　　　b.易於解析這種語言，客戶端JavaScript能夠簡單的經過eval()進行JSON數據的讀取

　　　　　　　　　c.構造友好，支持多種語言，包括ActionScript， C，C#，ColdFusion，Java，JavaScript，Per，PHP，Python，Ruby等語言服務器端語言，便於服務器端的解析

　　　　　　　　　d.在PHP世界，已經有PHP-JSON和JSON-PHP出現了，便於PHP序列化後的程序直接調用，PHP服務器端的對象、數組等可以直接生JSON格式，便於客戶端的訪問提取

　　　　　　　　　e.由於JSON格式可以直接爲服務器端代碼使用，大大簡化了服務器端和客戶端的代碼開發量, 可是完成的任務不變, 且易於維護

　　　　　　　　　f.至關穩定。JSON 的附加內容將成爲超集

　　　　　　缺點：a.沒有XML格式這麼推廣的深刻人心和使用普遍，沒有XML那麼通用性

　　　　　　　　　b.沒有XML格式這麼推廣的深刻人心和使用普遍，沒有XML那麼通用性

　　（ref: http://www.lingdublog.com/134.html）

8.JavaScript 如何實現繼承？

　　答：prototype

9.對閉包的理解？　　

　　在程序語言範疇內的「閉包」指的是函數把其中的變量做用域都「包」在該函數的做用域內，造成一個「包」，外部函數沒法訪問內部變量。因此嚴格意義上來 說，JavaScript 中的函數都是閉包。但咱們常說的閉包，一般是指爲了讓外部函數訪問到內部函數中變量，使內部函數返回一個函數，在其中操做內部變量。

10.RESTful的操做名？

　　答：GET、POST、PUT、DELETE ~

11.HTTP 40四、30一、30二、500、403 狀態名是什麼意思？

　　答：404：（未找到）請求的網頁不存在。

　　　　301：（永久移動）永久移動轉移，請求的內容已永久移動其餘新位置。

　　　　302： （臨時移動）臨時移動轉移，請求的內容已臨時移動新的位置。

　　　　500： （服務器內部錯誤）服務器遇到錯誤，沒法完成請求。

　　　　403： （禁止）服務器拒絕請求。

12.position 的幾種值？

　　答：static（默認值） , relative , absolute , fixed

13.若是一個元素 absolute ，它是相對誰說的？

　　答：若是它的父元素是非 static 值，則相對父元素；不然相對是非 static 值的父元素的父元素……直到找到一個最近的非 static 值的祖先元素。若是都沒有，則是相對 window 而言。

14.若是一個元素 absolute ，沒設 left 、top，位置是哪裏？

　　答：至關於static 的默認位置。

15.width:100px;

    padding:50px;

    border:1px;

    margin:50px;

    則border 之間的距離是？

　　答：200px。（可是 IE 某些版本多是 100px。應該指定box-sizing，好比將其設爲：box-sizing：border-box，則距離都是100px）

16. 實現 var a=['a','b','c','d'] 每過一秒 alert 一下數組中的值　　

　　答：

<script>
    var i;
    for(var j=0;j<4;j++){
        (function(i){
            setTimeout(function(){
                alert(a[i]);
            },(i+1)*1000);
        })(j);
    }
    var a=['a','b','c','d'];
</script>

17. AJAX 請求須要作哪些事情？

　　答：（詳見：Ajax請求簡單實例）

18.爲何要減小HTTP的訪問次數？

　　答：瀏覽器進程請求連接的數目是有限的，若是有不少 HTTP 請求，有些就得等着；另外，創建 HTTP 連接的開銷比較大，須要三次握手之類，而相對地，一次鏈接中文件大小的邊際成本就很小。

 

 

 

BD>>

1.從瀏覽器輸入URL到頁面渲染髮生了什麼事？

　　答：1).當用戶輸入網頁URL時，WebKit 調用其資源加載器加載該URL對應的網頁。

   　　　2).加載依賴網絡模塊創建鏈接，發送請求並接收答覆。

　　　　3).WebKit 接收到各類網頁或者資源的數據，其中某些資源多是同步或異步獲取的。

　　　　4).網頁被交給HTML解釋器轉變成一系列的詞語（Token）。

　　　　5).解釋器根據詞語構建節點（Node），造成DOM樹。

　　　　6).若是節點是JavaScript代碼的話，調用JavaScript引擎解釋並執行。

　　　　7).JavaScript代碼可能會修改DOM樹的結構。

　　　　8).若是節點須要依賴其餘資源，例如圖片、CSS、視頻等，調用資源加載器來加載它們，可是它們是異步的，不會阻礙當前DOM樹的建立，直到JavaScript的資源加載並被JavaScript引擎執行後才繼續DOM樹的建立。

（更細力度的回答：從輸入 URL 到頁面加載完成的過程當中都發生了什麼事情？）

 

2.在 network 中看到不少 JavaScript 是並行發的，可是這就叫異步加載嗎？

　　答：不能，在默認狀況下 JavaScript 的加載是阻塞的，前面的 JavaScript 請求沒有處理、執行完，是會阻塞 DOM tree 的解析等的，須要 JavaScript 代碼徹底獲取到並執行完畢才繼續。

3.如何管理多個文件？

　　答：RequireJS。

4.RequireJS 裏 a 文件依賴於 b 文件，b 文件依賴於 c文件，加載順序如何？

　　答：先加載 c，再 b，再 a。

5.函數的 this 各類指向？

　　答：

6.下面代碼的 this 是什麼？

function a() {
    function b() {
        console.log(this);
    }
    b();
}
a();

　　答：window

7.如下代碼兩次 alert 的結果分別是什麼？爲何？

var a = "Hello";
function b() {
    alert(a);
    var a = "World";
    alert(a);
}
b();

　　答：undefined 和 world .

　　　　（用函數表達式形式定義的函數不會 hoist 到頂部，區別於函數語句定義會 hoist 。函數內的變量都會被 hoist 到頂部。在第一次 alert 以前，a 已經是 undefined 了，只是這時候還沒被賦值爲 world 。 故 兩次輸出的結果爲：undefined 和 world .）

8.你理解的 Web 前端將來的發展？

　　答：我認爲隨着 HTML、CSS 等的發展，網頁上能作的事情愈來愈豐富了，包括更酷炫的前端呈現方式、音視頻的處理，更趨向於可以作 Native 應用能作的事情了，可能之後 Web 和 Native 的邊界會愈來愈模糊。

9.WebRTC 相比 Web Socket 有什麼好處？

 

10. CSS selector 優先級？

 

（11-17，xuqiujuanxuejie_bd_）

11.寫出下列表達式的值

　　「1」+ 2 = ？    =12  //任何類型與字符串（雙引號引發來的便是）相加都會被轉換成字符串類型

　　「1」* 2 = ？　 =2    //字符串和數字相乘。。會有隱性轉換，轉換成數字  

　　「a」* 2 = ？    =NaN  //可是a轉換不成數字，因此會是NaN，:not a number

　　答：如上。

12.說說在javascript中聲明變量時不加var都有哪些壞處？

　　答：

13.用html+css實現兩列布局，要求

A、 右側欄目固定寬度100px

B、 左側欄目寬度隨瀏覽器寬度而變化（兩欄目佔滿整個屏幕）

　　答：

14.用javascript設計實現一個全漢字顯示時鐘。如假設當地時間爲「2012.05.06 10:11:11」，顯示爲「二零一二年五月六日十時十一分十一秒」，下一秒則顯示爲「二零一二年五月六日十時十一分十二秒」。請寫出設計思路或代碼。

　　答：

15.假設一個公司有500人，設計一個算法，算出公司任何一我的與你同月同日生的人的機率。

　　答：

16.在javascript中如何實現類、繼承、私有變量？

　　答：

17.描述你最滿意的一個做品

A、 是如何設計、實現的？

B、 你在其中擔任什麼角色？

c、  還能夠從哪些方面對它進行改進優化？

　　答：

 

 

MT>>

16041120152115

1.使用CSS3將一個div水平垂直均居中。寫出多種方案。

　　(詳見：使用css3將一個div水平和垂直居中顯示)

2.使用高效CSS時須要注意的問題。

　　(詳見：CSS 在工程中改變——面向對象的CSS （OO CSS）)

3.下列函數在頁面中依次alert出的內容是：（undefined，2，1，3）

<script>
    var a=1;
    function test(){
        alert(a);
        var a=2;
        alert(a);
        alert(this.a);
        var a=3;
        alert(a);
    }
    test();
</script>

驗證截圖：

 

4.對數組 var nums =[1,2,3,2,2,2,2,3,4] 進行去重處理。

　　示例答案以下：

<script>
       Array.prototype.unique3=function() {

           var res=[];
           var json={};
           for(var i=0;i<this.length;i++){
               if(!json[this[i]]){
                   res.push(this[i]);
                   json[this[i]]=1;
               }
           }
           return res;
       }
       var arr=[1,2,3,2,2,2,2,3,4];
       alert(arr.unique3());
   </script>

　　（亦可詳見：JS數組元素去重的方法）

5.寫出能減小網頁加載時間的方法，至少5項。

　　（詳見：減小頁面加載時間的方法）

6.寫出你最擅長的前端技術棧，並說明掌握及應用狀況。

 

一、  寫出下列表達式的值

「1」+ 2 = ？

「1」* 2 = ？

「a」* 2 = ？

二、  說說在javascript中聲明變量時不加var都有哪些壞處？

三、  用html+css實現兩列布局，要求

A、 右側欄目固定寬度100px

B、 左側欄目寬度隨瀏覽器寬度而變化（兩欄目佔滿整個屏幕）

四、  用javascript設計實現一個全漢字顯示時鐘。如假設當地時間爲「2012.05.06 10:11:11」，顯示爲「二零一二年五月六日十時十一分十一秒」，下一秒則顯示爲「二零一二年五月六日十時十一分十二秒」。請寫出設計思路或代碼。

五、  假設一個公司有500人，設計一個算法，算出公司任何一我的與你同月同日生的人的機率。（PS:不曉得這題要不要用js）

六、  在javascript中如何實現類、繼承、私有變量？

七、  描述你最滿意的一個做品

A、 是如何設計、實現的？

B、 你在其中擔任什麼角色？

c、  還能夠從哪些方面對它進行改進優化？