百度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. 答案题目我会不定期更新，欢迎各位大牛指导