百度2015校園招聘前端筆試題匯總

博主本人前兩天剛參加了百度前端校園招聘筆試，現把能記住的跟大家分享探討下，還有一些是網上搜集來的其他地區的筆試

1、列舉所知道的圖片格式，說明其應用場景和優缺點

　　當時只填出png，jpg，gif這幾個格式，應用場景和優缺點只能隨便寫了幾句話。

　　網上搜集的資料如下：

1. bmp(位圖)格式：它是Windows操作系統中的標准圖像文件格式，能夠被多種Windows應用程序所支持。圖像信息較豐富，幾乎不進行壓縮，但由此導致了它與生俱生來的缺點——占用磁盤空間過大。
2. gif格式：可以同時存儲若干幅靜止圖象進而形成連續的動畫。目前Internet上大量采用的彩色動畫文件多為這種格式的文件。缺點是不能存儲超過256色的圖像。
3. jpeg格式：文件擴展名為.jpg或.jpeg，其壓縮技術十分先進，可以用最少的磁盤空間得到較好的圖像質量。應用非常廣泛，特別是在網絡和光盤讀物上。
4. png格式：一種新興的網絡圖像格式，結合GIF及JPG兩家之長，是目前保證最不失真的格式，它汲取了GIF和JPG二者的優點，存貯形式豐富。PNG的缺點是不支持動畫應用效果。

以上資料摘自網上搜索結果。

2、跨域通信問題解決方法

　　作答時只寫了利用document.domain

　　詳情請見我另一篇博客web跨域通信問題解決

3、父元素設置了一個透明度，讓子元素不繼承父元素透明度，有什么解決方法

　　博主表示平常透明度用的就不多，更沒有遇到子元素繼承的情況，所以此題你懂的

　　解決辦法：a、利用絕對布局，不使用子元素，使其看似是子元素，但由於position:absolute，可能會出現很多問題

　　　　　　　b、IE中，子元素添加position:relative，非IE，使用background:rgba(120,120,120,0.7)來實現。

4、考察加號減號運算符

console.log(2+'1')    //'21'

console.log(2-'1')    //1

console.log(1+ -'1'+'2')    //'02'

console.log(+'1'+'1'+'2')    //'112'

console.log(1+ +'2'+'2')    //'32'

console.log('A'-'B'+2)    //NaN

console.log('A'-'b'+'2')    //'NaN2'

5、手機端瀏覽器，當用戶使用百度搜索某一結果時，返回N條記錄，用戶可向下滾動查看記錄，而不是像電腦上的翻頁效果

　　我覺得是考的AJAX無刷新修改頁面的問題，當用戶搜索時，先返回搜索記錄的前n調數據（不用太多），當滾動到底端時，利用ajax技術，取得后n條數據，然后將取得的數據append進頁面中。

6、設計一個once函數，這個函數只執行一次，若再執行，直接返回上次的結果。　

　　我認為是利用立即執行加閉包的方式，再利用hash-table判斷是否已經執行

/*只執行一次的函數*/
var test1 =function(){
    alert('OK1'); //只會彈出一次
    console.log('OK1');
}

var test2 =function(){
    alert('OK2'); //只會彈出一次
    console.log('OK');
}

var once = function(){
    var obj = {},i = -1;
    return function(fn){
        if(arguments.length<1){
            alert('請傳入要執行的函數');
            return;
        }
        for(var key in obj){
            if(obj[key].func === fn){
                return obj[key].result;
            }
        }
        var result = fn();
        i++;
        obj[i] = {func:fn,result:result};
        return result;
    }
}()

7、問了些自己平常做的事情

---------------------------------------------------------------分割線---------------------------------------------------------------------------

以下是網上搜集來的題目

a、html5語義化標簽

　　在HTML 5出來之前，我們用div來表示頁面章節，但是這些div都沒有實際意義(例如<div id="header"></div>  <div id="footer"></div>等等)，html5的出現改變了這一規則。語義化標簽優點：結構更好，更利於搜索引擎的抓取（SEO的優化）和開發人員的維護(可維護性更高，結構清晰，易於閱讀)；更有利於特殊終端的閱讀等。

• <header></header> 網頁的頁眉，通常包含h1-h6元素或hgroup，作為整個頁面或者一個內容塊的標題。也可以包裹一節的目錄部分，一個搜索框，一個nav，或者任何相關logo。整個頁面沒有限制header元素的個數，可以擁有多個，可以為每個內容塊增加一個header元素。
• <footer></footer> 網頁的頁腳，通常含有該節的一些基本信息，譬如：作者，相關文檔鏈接，版權資料。如果footer元素包含了整個節，那么它們就代表附錄，索引，提拔，許可協議，標簽，類別等一些其他類似信息。
• <hgroup></hgroup> 代表“網頁”或“section”的標題，當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題的組合。如果只需要一個h1-h6標簽就不用hgroup。
• <nav></nav> 元素代表頁面的導航鏈接區域。用於定義頁面的主要導航部分。
• <aside></aside> 元素被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的相關資料、標簽、名次解釋等（特殊的section）。
• <section></section> 元素代表文檔中的“節”或“段”，“段”可以是指一篇文章里按照主題的分段；“節”可以是指一個頁面里的分組。section通常還帶標題，雖然html5中section會自動給標題h1-h6降級，但是最好手動給他們降級。article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實際意義的就用div。
• <article></article> 元素最容易跟section和div容易混淆，其實article代表一個在文檔，頁面或者網站中自成一體的內容，其目的是為了讓開發者獨立開發或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的widget小工具。（特殊的section）除了它的內容，article會有一個標題（通常會在header里），會有一個footer頁腳。如果在article內部再嵌套article，那就代表內嵌的article是與它外部的內容有關聯的。article內部嵌套section，這樣能讓瀏覽器更容易區分各個章節所包括的內容。section內部嵌套article，section將這些自成一體的article包裹，就組成了一個團體。

b、客戶端存儲

• cookie 可以允許的最大存儲為4KB，不適合存儲任何復雜數據。
• webStorage W3C規范，HTML5新方法，提供了在客戶端存儲數據的功能，它可以維持數據直到會話結束（sessionStorage），或者更久（localStorage）。有getItem(key),setItem(key,value),removeItem(key),clear()四種方法。
• sessionStorage 針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后，數據會被刪除。
• localStorage  存儲的數據沒有時間限制。第二天、第二周或下一年之后，數據依然可用。
• 離線緩存application cache  CACHE MANIFEST

c、RGB HEX轉換

/*RGB(255,255,0),rgb(25,12,100)*/
var rgbToHex = function(rgb) {
    var reg = /RGB|rgb|\(|\)/g;
    var rColor = rgb.replace(reg,'').split(',');
    var strHex = '#';
    for(var i=0,len=rColor.length;i<len;i++) {
        var hex = Number(rColor[i]).toString(16);
        if(hex.length == 1){
            hex = '0' + hex;
        }
        strHex = strHex + hex;
    }
    return strHex;
}

/*#ff00f0,#ff0*/
var hexToRgb = function(hex) {
    if(hex.length==4){ //將3位的顏色變為6位的形式
        var hColor = '#';
        for(var i=1;i<4;i++) {
            hColor = hColor + hex.substring(i,i+1) + hex.substring(i,i+1);
        }
        hex = hColor;
    }
    var strRgbArr = [];
    for(var i=1;i<7;i=i+2){
        strRgbArr.push(parseInt('0x'+hex.substring(i,i+2)));
    }
    return 'RGB(' + strRgbArr.join(',') + ')';
}

d、前端優化

雅虎網站頁面性能優化的34條黃金守則

PS. 答案題目我會不定期更新，歡迎各位大牛指導