百度前端面试题汇总及答案
1.请列举五个HTML块元素？列举你所知的CSS的盒模型？
div,p,h1,ul,form;margin,border,padding,content;
- 1
- 2
2.有如下代码：
<style type="text/css">
#a {font-size:12px}
div p{ font-size:13px }
div .c{ font-size:14px }
.a .b .c{ font-size:15px }
#b{ font-size:16px }
</style>
<div id=”a” class=”a”>
<div id=”b” class=”b”>
<p id=”c” class=”c”>I’am here</p>
</div>
</div>
请问在标准模式下显示的字符会是多大的字体？CSS的选择器的优先级规则是怎样的？
12px;!important>元素内的样式>id选择器>类选择器>标签选择器>通配符选择器>浏览器自定义或继承
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
3.请列举：为某一DOM元素绑定事件的方法。
.click,.on,.bind
- 1
- 2
4.如何用JS实现类、继承、私有变量。
5.输出下列运行的结果
var a=0,b=0;
function A(a){
A = function(b){
alert(a+b++);
}
alert(a++);
}
A(1);
A(2);
输出结果：1;4;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
6.请写一个JavaScript的trim函数(兼容ie,firefox,chrome等多种浏览器)
if(typeof String.prototype.trim=="undefind"){
String.prototype.trim = function(){
return this.replace(/^\s\s*/,'').replace(/\s\s*$/,'');
}
}
- 1
- 2
- 3
- 4
- 5
- 6
7.请列出你所知道的浏览器兼容的问题，以及对应的解决方法（可包含css和js）。
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：CSS里 *{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
- 1
- 2
- 3
- 4
- 5
- 6
8.请说出几种你知道的AJAX跨域的方法，这些跨域的方法分别有哪些特点，适合应用于哪些场景。
代理实现最麻烦，但使用最广泛，任何支持AJAX的浏览器都可以使用这种方式。
JSONP相对简单，但只支持GET方式调用。
XHR2最简单，但只支持HTML5，如果你是移动端开发，可以选择使用XHR2。
- 1
- 2
- 3
- 4
9.对于加快网页的加载速度都有哪些优化的方法。
1.优化图片资源的格式和大小;2.减少重定向请求;3.减少DNS查询次数4.压缩css和js内容.
- 1
- 2
10.写一个用CSS实现的圆角代码。
border-radius:4px;
- 1
- 2
11.请列举一下常用的Linux命令。
cd,ls,cp,find,mv,rm,cat,grep;
- 1
- 2
12. 有一组未知个数的数字，把它们分成三份，使每份的和尽量相等（不限语言）。
<script type="text/javascript">
var arrayfisrt = new Array(1,5,6,7,8,9,-1,-12,34,2,2,31,3);
arrayfisrt.sort(function (x,y) {
return y-x;
});
var array1 = new Array();
var array2 = new Array();
var array3 = new Array();
var arraysum = new Array();
var sum1=0,sum2=0,sum3=0;
for(var i=0;i<arrayfisrt.length;i++){
for(var j=0;j<array1.length;j++){
sum1 += array1[j];
}
for(var j=0;j<array2.length;j++){
sum2 += array2[j];
}
for(var j=0;j<array3.length;j++){
sum3 += array3[j];
}
arraysum = [];
arraysum.push(sum1,sum2,sum3);
//获取最小值
var minsum = Math.min.apply(null,arraysum);
var wherearray = 0;
for(var j=0;j<arraysum.length;j++){
if(arraysum[j] == minsum){
wherearray = j+1;
break;
}
}
if(wherearray==1){
array1.push(arrayfisrt[i]);
}else if(wherearray==2){
array2.push(arrayfisrt[i]);
}else if(wherearray==3){
array3.push(arrayfisrt[i]);
}
}
console.log(array1);console.log(array2);console.log(array3);
</script>1.请列举五个HTML块元素？列举你所知的CSS的盒模型？
div,p,h1,ul,form;margin,border,padding,content;
- 1
- 2
2.有如下代码：
<style type="text/css">
#a {font-size:12px}
div p{ font-size:13px }
div .c{ font-size:14px }
.a .b .c{ font-size:15px }
#b{ font-size:16px }
</style>
<div id=”a” class=”a”>
<div id=”b” class=”b”>
<p id=”c” class=”c”>I’am here</p>
</div>
</div>
请问在标准模式下显示的字符会是多大的字体？CSS的选择器的优先级规则是怎样的？
12px;!important>元素内的样式>id选择器>类选择器>标签选择器>通配符选择器>浏览器自定义或继承
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
3.请列举：为某一DOM元素绑定事件的方法。
.click,.on,.bind
- 1
- 2
4.如何用JS实现类、继承、私有变量。
5.输出下列运行的结果
var a=0,b=0;
function A(a){
A = function(b){
alert(a+b++);
}
alert(a++);
}
A(1);
A(2);
输出结果：1;4;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
6.请写一个JavaScript的trim函数(兼容ie,firefox,chrome等多种浏览器)
if(typeof String.prototype.trim=="undefind"){
String.prototype.trim = function(){
return this.replace(/^\s\s*/,'').replace(/\s\s*$/,'');
}
}
- 1
- 2
- 3
- 4
- 5
- 6
7.请列出你所知道的浏览器兼容的问题，以及对应的解决方法（可包含css和js）。
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：CSS里 *{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
- 1
- 2
- 3
- 4
- 5
- 6
8.请说出几种你知道的AJAX跨域的方法，这些跨域的方法分别有哪些特点，适合应用于哪些场景。
代理实现最麻烦，但使用最广泛，任何支持AJAX的浏览器都可以使用这种方式。
JSONP相对简单，但只支持GET方式调用。
XHR2最简单，但只支持HTML5，如果你是移动端开发，可以选择使用XHR2。
- 1
- 2
- 3
- 4
9.对于加快网页的加载速度都有哪些优化的方法。
1.优化图片资源的格式和大小;2.减少重定向请求;3.减少DNS查询次数4.压缩css和js内容.
- 1
- 2
10.写一个用CSS实现的圆角代码。
border-radius:4px;
- 1
- 2
11.请列举一下常用的Linux命令。
cd,ls,cp,find,mv,rm,cat,grep;
- 1
- 2
12. 有一组未知个数的数字，把它们分成三份，使每份的和尽量相等（不限语言）。
<script type="text/javascript">
var arrayfisrt = new Array(1,5,6,7,8,9,-1,-12,34,2,2,31,3);
arrayfisrt.sort(function (x,y) {
return y-x;
});
var array1 = new Array();
var array2 = new Array();
var array3 = new Array();
var arraysum = new Array();
var sum1=0,sum2=0,sum3=0;
for(var i=0;i<arrayfisrt.length;i++){
for(var j=0;j<array1.length;j++){
sum1 += array1[j];
}
for(var j=0;j<array2.length;j++){
sum2 += array2[j];
}
for(var j=0;j<array3.length;j++){
sum3 += array3[j];
}
arraysum = [];
arraysum.push(sum1,sum2,sum3);
//获取最小值
var minsum = Math.min.apply(null,arraysum);
var wherearray = 0;
for(var j=0;j<arraysum.length;j++){
if(arraysum[j] == minsum){
wherearray = j+1;
break;
}
}
if(wherearray==1){
array1.push(arrayfisrt[i]);
}else if(wherearray==2){
array2.push(arrayfisrt[i]);
}else if(wherearray==3){
array3.push(arrayfisrt[i]);
}
}
console.log(array1);console.log(array2);console.log(array3);
</script>