2015百度前端研发笔试题

最新推荐文章于 2020-06-24 16:06:32 发布

我是敬哥哥啊

最新推荐文章于 2020-06-24 16:06:32 发布

阅读量523

点赞数

分类专栏：笔试百度前端

本文链接：https://blog.csdn.net/u010440760/article/details/48316745

版权

前端同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

笔试

1 篇文章 0 订阅

订阅专栏

百度

1 篇文章 0 订阅

订阅专栏

一、HTML的Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

1.<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

2.严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

二、请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>

 
 #demo { 

 
      
 width: 100px; 

 
      
 height: 100px; 

 
      
 background-color: #fff; 

 
      
 position: relative; 

 
      
 border: 2px solid # 
 333 
 ; 

}

 
 #demo:after, #demo:before { 

 
      
 border: solid transparent; 

 
      
 content:  
 ' ' 
 ; 

 
      
 height:  
 0 
 ; 

 
      
 left:  
 100 
 %; 

 
      
 position: absolute; 

 
      
 width:  
 0 
 ; 

}

 
 #demo:after { 

 
      
 border-width: 10px; 

 
      
 border-left-color: #fff; 

 
      
 top: 20px; 

}

 
 #demo:before { 

 
      
 border-width: 12px; 

 
      
 border-left-color: # 
 000 
 ; 

 
      
 top: 18px; 

}

三、简述document.write和 innerHTML的区别。

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

四、你知道的，javascript语言的执行环境是"单线程模式"，这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行，因此很多时候需要进行“异步模式”，请列举js异步编程的方法。

$.ajax, 异步加载请求，加载完成后执行回调。

Promise类。

 
        promise =  
        new 
         Promise( function(resolve, reject) { 
       
        // heavy function 
       
        resolve( 
        'ok' 
        ) 
       
        }); 
       
        promise.then( function(data1,data2) { 
       
        //here heavy function has been done 
       
        //your code here 
       
        })

自定义回调

var heavyFunc = function(callback) {

// heavy function here

// a lot of time

callback()

}

var callback = function() {

// execute when heavy function is done

// your code here

}

heavyFunc(callback)

五、用户从手机的浏览器访问www.baidu.com，看到的可能跟桌面PC电脑，是不太一样的网页效果，会更适合移动设备使用。请简要分析一下，实现这种网页区分显示的原因及技术原理

回答一：手机屏幕的px与css中写的px并不完全一致. 因为手机屏幕尺寸关系, 手机浏览器会对页面大小进行优化. 其方法就是改变屏幕分辨率算法, 比如将4个像素点算成1个像素点, 以此降低手机屏幕分辨率, 得到更好的显示效果. 如iphone, 其屏幕分辨率其实为320PX(此px对应css中的px). 而在head中设置viewport即是告诉手机浏览器, 该如何显示网页. 一般设置为viewport="device".

回答二：手机的网速问题、屏幕大小、内存、CPU等。通过不同设备的特征，实现不同的网页展现或输出效果。根据useragent、屏幕大小信息、IP、网速、css media Query等原理，实现前端或后端的特征识别和行为改变。

六、Flappy Bird是风靡一时的手机游戏，玩家要操作一只小鸟穿过无穷无尽的由钢管组成的障碍。如果要你在HTML前端开发这个游戏，为了保证游戏的流畅运行，并长时间运行也不会崩溃，请列举开发要注意的性能问题和解决的方法。

背景的卷轴效果优化。背景不能是无限长的图片拼接，必须有回收已移出的场景的方法。

将复杂运算从主UI线程中解耦。比如场景中小鸟的运动轨迹、碰撞算法等，需要在空闲时间片运算，不能和UI动画同时进行。

将比较大的运算分解成不同的时间片，防止阻塞主UI线程。最好使用webworker。

注意内存泄漏和回收。使用对象池管理内存，提高内存检测和垃圾回收。

进行预处理。将一些常用的过程进行预处理，

控制好帧率。将1秒分解成多个时间片，在固定间隔时间片进行UI动画，其他时间片用在后台运算。

通过 GPU 加速和 CSS transition 将小鸟飞行动画和背景动画分离

七、如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。

我看很多人的回答都没考虑清楚：
1、点击表头，也可以是点击“姓名”，需要区分中文和数字的排序方式；
2、“第一次点击为降序排序，再一次点击进行升序排序”，需要可逆，并且如果点击“力量”一次，再点击“敏捷”，然后再次点击“力量”，需要实现的是力量的降序，而不是力量的升序；
3、可扩展性，如果属性不止这4个，那么很多人的代码直接作废。

贴代码，原生JS写的：
var the_table=document.getElementById("the_table");
var the_table_tr=the_table.getElementsByTagName("tr");
var the_table_tbody=the_table.getElementsByTagName("tbody")[0];
var the_table_head_td=the_table_tr[0].getElementsByTagName("td");
var click_switch=[];
for(i=0;i<the_table_head_td.length;i++){
   (function each_one(_i){
       click_switch.push(0);
       the_table_head_td[_i].οnclick=function(){
           for(q=0;q<click_switch.length;q++){
               if(q!==_i){
                   click_switch[q]=0;
               }
           }
           var temp_arr=[];
           var the_table_tr_arr=[];
           for(j=1;j<the_table_tr.length;j++){
               temp_arr.push(the_table_tr[j].getElementsByTagName("td")[_i].innerHTML);
               the_table_tr_arr.push(the_table_tr[j].cloneNode(true));
           };
           var tr_length_temp=the_table_tr.length
           for(x=1;x<tr_length_temp;x++){
               the_table_tbody.removeChild(the_table_tbody.getElementsByTagName("tr")[1]);
           }
           if(temp_arr[0]*1){
               temp_arr.sort(function compare(a,b){return a-b;});
           }else{
               temp_arr.sort(function(a,b){return a<b?-1:1;});
           }
           if(click_switch[_i]==1){
               click_switch[_i]=0;
               for(k=temp_arr.length-1;k>=0;k--){
                   (function each_two(_k){
                       for(vv=0;vv<the_table_tr_arr.length;vv++){
                           if(temp_arr[_k]==the_table_tr_arr[vv].getElementsByTagName("td")[_i].innerHTML){

                               the_table_tbody.appendChild(the_table_tr_arr[vv]);
                           }
                       }
                   })(k);
               }
           }else{
               click_switch[_i]=1;
               for(k=0;k<temp_arr.length;k++){
                   (function each_two(_k){
                       for(vv=0;vv<the_table_tr_arr.length;vv++){
                           if(temp_arr[_k]==the_table_tr_arr[vv].getElementsByTagName("td")[_i].innerHTML){

                               the_table_tbody.appendChild(the_table_tr_arr[vv]);
                           }
                       }
                   })(k);
               }
           }
       }
   })(i)
}

我是敬哥哥啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2015百度前端研发笔试题

一、HTML的Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?1. 声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。2.严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。3.DOCTYPE不存在或格式不正确会导致文档以混
复制链接

扫一扫