2015百度前端研发笔试题
2015-09-09 15:30
483 查看
一、HTML的Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
1.<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
2.严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
二、请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>
三、简述document.write和
innerHTML的区别。
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。
innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
四、你知道的，javascript语言的执行环境是"单线程模式"，这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行，因此很多时候需要进行“异步模式”，请列举js异步编程的方法。
$.ajax, 异步加载请求，加载完成后执行回调。
Promise类。
自定义回调
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].onclick=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)
}
1.<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
2.严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
二、请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>
三、简述document.write和
innerHTML的区别。
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。
innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
四、你知道的，javascript语言的执行环境是"单线程模式"，这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行，因此很多时候需要进行“异步模式”，请列举js异步编程的方法。
$.ajax, 异步加载请求，加载完成后执行回调。
Promise类。
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].onclick=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)
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- logback（html页面）
- 【JAVASCRIPT】React学习- 数据流（组件通信）
- js获取某个ID的class名称
- BufferedInputStream 源码分析
- 关于jQuery版本不同而产生的问题、写法的记录
- chef client注册为node
- jquery的智能提示控件
- javascript小插件-多选框全选
- jQuery 清除div内容
- Json转译
- simplejson json
- Uva 10622 Perfect Pth Power 唯一分解定理
- CSS的盒子高度height使用100%后浏览器不兼容的解决办法
- prefixfree.js和依托应用之Animatable
- CSS3 选择器——属性选择器
- JS中的prototype
- Half Life 2 Source 引擎介绍
- Effective Java 创建和销毁对象
- 详解CSS3特性@Media如何实现响应式设计
- HTML/CSS（五）HTML5服务器推送事件