前端面笔试题总结
2012-10-09 13:49
239 查看
1. 如何显示/隐藏一个DOM元素？
更改元素的css style，设为display: none。此外还可以将visibility设为hidden，透明度设为0，或长、宽设为0。
2. 一个定宽网页在浏览器（IE6，IE7，Firefox，IE5）中横向居中对齐的布局，请写出主要的HTML标签及CSS。
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh-CN” lang=”zh-CN”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>居中</title>
<style type=”text/css”>
body {width: 600px}
html, body {margin: auto; padding: 0}
div.wrap {text-align:center; margin: 0; padding: 0}
</style>
</head>
<body>
<div class=”wrap”>居中</div>
</body>
</html>
复制代码
3. CSS中margin和padding的区别
margin是外边距，属于元素之外，相邻元素的margin可以融合。
padding是内边距，在元素之内，相邻元素的padding不可融合。
4. JavaScript中如何检测一个变量是一个String类型？请写出函数实现
function(obj) {
returntypeof(obj) == ”string”;
}
5. 网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
这个看我论坛右上角的就知道了…
6. 如何控制网页在网络传输过程中的数据量
题目貌似有问题，应该是减少数据量吧。
最显著的方法是启用GZIP压缩。此外保持好的编码习惯，避免重复和css、JavaScript代码，多余的HTML标签和属性。
7. 补充代码，是鼠标单击后Button1到Button2的后面
<div>
<inputtype=”button” id =”button1″ value=”1″ onclick=”???” />
<inputtype=”button” id =”button2″ value=”2″ />
</div>
var parent =this.parentNode; parent.removeChild(this); parent.appendChild(this);
8. Linux中，将a、b打包为back.tar，命令是（ ）
不知道＝。＝
9. Flash、Ajax各自的优缺点，在使用中如何取舍？
Flash的缺点是需要客户端安装Flash插件，比较大，且更改了默认的HTML页面行为；但可以方便地实现很多特效及动画，且具有较高权限。
Ajax的缺点是编程较为复杂，需要服务器端的支持，能实现的效果只能是DOM API提供的，权限很低，较难跨域；但可以显著加快页面的载入速度和用户体验。
此外，二者都不能被搜索引擎索引（Google已支持Flash文本的索引），不利于SEO。
建议:重要和关键部分直接用HTML，交互部分可以使用Ajax，复杂的动画可采用Flash。
百度2010
1、JS主要数据类型？5分
答：主要的类型有number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。
2、img的alt和title的异同？10分
答：title属性为设置该属性的元素提供建议性的信息。比如为链接添加描述性文字。
为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。
3、CSS的JS调用？如font-family, -moz-border-radius 10分
答：fontFamily、MozBorderRadius
4、CSS布局：两列，左边宽度自适应，右边宽度固定200px 15分
下载: test-1.html
#box1{width:100%;height:600px;position:relative;}
#left1{margin-right:200px;border:1px solid red;height:100%;}
#right1{width:200px;height:100%;position:absolute;top:0px;right:0px;border:1px solid blue;}
<div id="box1">
<div id="left1"></div>
<div id="right1"></div>
</div>
5、js对象的深度克隆？20分
下载: test-2.html
Object.prototype.deepClone=function(){
function cloneObj(){}
cloneObj.prototype=this;
var obj=new cloneObj();
for(var o in obj){
if(typeof(obj[o])=="object")obj[o]=obj[o].deepClone();
} return obj;
}
6、动态打印时间，格式为yyyy-MM-dd hh:mm:ss? 15分
下载: test-3.html
function printTime(){
var timer1=new Date();
var timer=timer1.toLocaleString();
timer=timer.replace(/[年月]/g,"-");
timer=timer.replace(/日/,"");
time.innerHTML=timer;
}setInterval("printTime()",1000);
7、如何提高网页运行性能？20分
没写。
8、linux下删除当前目录下扩展名为c的文件（如a.c，b.c）5分
rm–r *.c
find. -name “*.doc” -type f -exec cp {} /tmp/doc \;找到当前目录（.）下扩展名为(doc)的文件并拷贝到指定目录【注意-type f 指普通文件，-exec ls-l{}列出文件，最后加上\】
cp[options] source dest 复制
9、flash as2.0和flash as3.0在面向对象方面的异同？10分
答：面向对象方面，2.0像javascript，3.0像java。
到了 AS 2.0,面向对象被引入了，但它实质上是动态脚本语言，虽然已经有了类的概念和class关键字，但对象支持还是基于类似JavaScript的prototype机制——动态继承。
3.0同时支持静态类型，即基于类的继承方式；以及动态类型，即基于prototype的继承方式。推荐用静态类型。
10、Flash、Ajax各自的优缺点，在使用中如何取舍？10分
1、Flashajax对比
Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM
2、项目中遇到什么问题？如何解决？
前端题目总结
HTML相关
<!DOCTYPE>标签的定义与用法。
块级元素和行内元素都有哪些？
你真的了解HTML吗？ 雅虎面试题把前面黄底那段拿去搜索下就知道了(曾在某浪公司面试的时候被问到过，确实是很好的问题)。
CSS相关
介绍所知道的CSS hack技巧(如：_， *， +， \9， !important 之类)。
介绍CSS盒模型。
CSS层叠是什么？介绍一下。
都知道哪些CSS浏览器兼容性问题。
有时会被问到些刁钻点的题，比如position值都有哪些，CSS3都有哪些新内容...
JavaScript基础相关
HTTP协议的状态消息都有哪些？(如200、302对应的描述)
AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?
同步和异步的区别?
简述JavaScript封装。
JavaScript继承有哪两种形式形式，进行描述。
什么是闭包？以下代码点击<p>会输出什么？为什么？能大概说明白的话继续问能想出几种解决办法。
答案: 5 解释: 由于闭包 i被保留在内存中,alert 显示的是i当前的值, 最后一次i++ 会导致i为5
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"
/>
<title>闭包演示</title>
<style type="text/css">
p {background:gold;}
</style>
<script type="text/javascript">
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
</script>
</head>
<body onload="init();">
<p>产品 0</p>
<p>产品 1</p>
<p>产品 2</p>
<p>产品 3</p>
<p>产品 4</p>
</body>
</html>
在JS中this关键字的使用场合和用法(如在构造函数中、setTimeout中等)。
简述下cookie的操作，还有cookie的属性都知道哪些。
IE与FF的JS兼容性都知道哪些。
DOM操作 -
怎样添加、移除、移动、复制、创建和查找节点(这个问题真心是基础题，一般不会问)。
jQuery相关
jQuery源码是否尝试去读过？说说基本的架构或者 jQuery.fn.init 中都做了哪些判断。
都知道哪些不好的jQuery书写方式。
Sizzle是否有读过？
其它相关的加分项：
都使用和了解过哪些编辑器？都使用和了解过哪些日常工具？
都知道有哪些浏览器内核？开发过的项目都兼容哪些浏览器？
国内外的JS牛人都知道哪些？
瀑布流布局或者流式布局是否有了解
正则表达式有系统学习过吗(看书或网上教程)？有的话就问问简单点的邮箱验证、URL验证， 或者问问
贪婪匹配与懒惰匹配 的理论知识。
Node.js是否有过尝试？到什么程度？说说个人理解的看法？
HTML5都有哪些新的JS API？
前端优化知识都知道哪些？
基础算法题（如快速排序，能否一两句说说重要的核心原理或者数组消重等）。
是否有接触过或者了解过重构。
其他一些总结
百度web前端笔试试卷上的题目：
1.判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20
2.截取字符串abcdefg的efg
3.让一个input的背景颜色变成红色
4。给一个页面，写html
css
5。div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域
6。判断一个字符串中出现次数最多的字符，统计这个次数
7。IE与FF脚本兼容性问题
又重新问的是1，4，6，7，这次问出题者的意图，并且让给出7的更多答案，以及IE
FF不兼容的原因
然后看了看简历，没有问简历上的项目，而是让自己随便谈谈
1对于web客户端技术未来趋势发展谈谈看法
javascript + ajax=RIA
Adobe Flash AS 3
Flex
Sliveright
2web开发团队人员应该如何分工协作
布局 CSS
脚本
比如脚本人员长期的积累可能铸造类型YUI这样的产品级脚本库（亮点）
3web开发曾经的团队有没有别人遇到问题，什么问题，向你请教
4如果要实习，什么时候可以
5自己在开发的过程中遇到什么问题，谈谈看法
6web开发脚本开发环境用什么、调试用什么
试过aptana，现在就用editplus
调试肯定用firebug，ie下看页面DOM用IEInspector
7如果有个新技术，现在需要掌握，你会怎么做
新技术的发现我一般是通过RSS工具，比如我用GoogleReader
每天有半个小时左右在看最新的资讯、技术走向
发现新技术，首先有个大概了解，如果有深入的必要
我一般会看他的官网，比如jquery，我会搜索到www.jquery.com，然后看Docs、samples
如果要用到项目中，有困难的问题，我会svn得到最新的这个技术的源码，深入跟踪进去，看实现原理
一般现在涌现的技术都是opensource
提问时间
1百度web开发脚本是否有做类似YUI库的打算
2百度web开发工程师打算招多少人
百度电话二面回忆 web开发部–web开发工程师
首先是自我介绍
然后谈谈做的web项目
然后开始问技术问题
前端开发的优化问题
答:
产品发布时，js的压缩，即函数名替换、整个文件压缩成一行
css开发的时候
注释写清楚，先有个base.css，然后根据不同页面需要再加css，发布的时候将css中的一个定义写成一行，目的是压缩文件大小
最终发布的时候甚至可以将css，js分别压缩成一个文件，甚至css、js通过技巧压缩到一个里边（亮点）
这样的目的是，减少用户访问web产品的http连接数
web前端产品的开发流程
答:首先根据产品的定位、用户群，确定配色，然后纸上设计整体布局，然后png或者psd出效果图，切出需要的小图片，然后手写代码div+css构造出页面，然后根据功能写脚本
参考126邮箱首页，将所有小图片放到一个图片中，通过css的background-position实现页面，还是为了优化，减少http连接数
规避javascript多人开发函数重名问题
答:首先是通过命名规范，比如根据不同的开发人员实现的功能，在函数名加前缀，虽然函数名看起来复杂，发布的时候还是可以替换，从而优化。
还有一种办法是，每个开发人员都把自己的函数封装到类中，然后调用的时候即使函数名相同，但是因为是要类.函数名来调用，所以也减少了重复的可能性。
javascript面向对象中继承实现
答：我是用prototype.js extend.js扩展
然后子类中parent.initialize()…
答的不好
正确答案：
// 1.
构造器
function Animal() {};
function Mammal() {};
function Canine() {};
function Dog() {};
// 2.
原型链表
Mammal.prototype = new Animal();
Canine.prototype = new Mammal();
Dog.prototype = new Canine();
prototype.js实现的基本原理
答：
将功能封装
比如Ajax.Request，还是有判断浏览器的代码；Position这样的实现页面元素位置的计算
prototye太大，如果一个页面功能不需要这样的，自己实现，怎么做
答：首先页面、css、脚本分离之后，脚本中将整个模块功能写成一个类var
Do={}
其中初始化函数init:function(){}，然后最后做Do.init()
其中init会对页面上form中需要交互的元素绑定事件，比如$(’input1′).onclick=function(){}
IE、FF下面脚本的区别
答：
1.IE有outerHTML，FF没有
2.页面元素id，IE可以直接取，FF必须document.getElementById()
3.Ajax里边FF是newXMLHttpRequest，而IE是
try new ActiveXObject(’Msxml2.XMLHTTP’)try
new ActiveXObject(’Microsoft.XMLHTTP’)
FF下面实现outerHTML
答：.parenet.firstChild .parent.innerHTML
这个没答好
正确答案：原理是，get：取到这个标签的tagname，然后属性循环构造成这个标签的属性
set：把字符串用insertBefore插入到这个元素前面，然后removeChild这个元素
<head>
<SCRIPTLANGUAGE=”JavaScript”>
<!–
if(typeof(HTMLElement)!=”undefined”&&
!window.opera)
{
HTMLElement.prototype.__defineGetter__(”outerHTML”,function()
{
var a=this.attributes, str=”<”+this.tagName,
i=0;
for(;i<a.length;i++)
if(a[i].specified)
str+=”
“+a[i].name+’=”‘+a[i].value+’”‘;
if(!this.canHaveChildren)
return str+”
/>”;
return str+”>”+this.innerHTML+”</”+this.tagName+”>”;
});
HTMLElement.prototype.__defineSetter__(”outerHTML”,function(s)
{
var d = document.createElement(”DIV”);
d.innerHTML= s;
for(var i=0;i<d.childNodes.length; i++)
this.parentNode.insertBefore(d.childNodes[i],this);
this.parentNode.removeChild(this);
});
HTMLElement.prototype.__defineGetter__(”canHaveChildren”,function()
{
return!/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
});
}
//–>
</SCRIPT>
IE、FF下面CSS的解释区别
答：
1.png透明背景，FF下面没有问题，IE需要用滤镜通道
2.z-index在IE、FF下面的解释问题，
IE会认为第一个z-index=0
3.长字符串，word-wrap:break-all可以解决IE，但是FF需要overflow:hidden才行
冯舒娅补充：
1、有些标签在ff中不能用，比如button
2、滤镜
3、鼠标cursor:hand
cursor:pointer
4、div的高度自适应
5、对box模型解析不一样
6、ul、ol的padding和margin
IE都能识别*，标准浏览器（如FF）不能识别*；
IE6能识别*，但不能识别
!important；
IE7能识别*，也能识别
!important；
FF不能识别*，但能识别
!important；
例如style=”*width:10px;!importantwidth:20px;”
这样在IE6下宽度为10px,在IE7下宽度时20px
web前端技术的展望
答：javascript ajax；flashAS；Flex；Sliveright
附上网上的百度web开发工程师笔试问题集
1编写一个方法
求一个字符串的字节长度
<script language=”javascript”type=”text/javascript”>
new function(s)
{
if(!arguments.length||!s) returnnull;
if(”"==s)
return 0;
var l=0;
for(var i=0;i<s.length;i++)
{
if(s.charCodeAt(i)>255) l+=2;
else l++;
}
alert(l);
}(”hello你好，我好,大家好！world!”);
</script>
2编写一个方法
去掉一个数组的重复元素
<script language=”javascript”type=”text/javascript”>
Array.prototype.strip=function()
{
if(this.length<2) return[this[0]]||[];
var arr=[];
for(var i=0;i<this.length;i++)
{
arr.push(this.splice(i–,1));
for(var j=0;j<this.length;j++)
{
if(this[j]==arr[arr.length-1])
{
this.splice(j–,1);
}
}
}
return arr;
}
vararr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];
alert(arr.strip());
</script>
3说出3条以上ff和ie的脚本兼容问题
IE
有children，FF没有；IE有parentElement，FF没有；IE有innerText,outerText,outerHTML，FF
没有；FF有HTMLElement,HTMLDivElement,XMLDocument,DocumentFragment,Node,Event,Element等等，IE没有；IE有数据岛，FF没有；IE跟FF创建HttpRequest实例的方法不一样。。等等。。
4用脚本写去除字符串的前后空格
String.prototype.trim =function(mode)
{//前后去空格
if (mode==’left’)
{
return ((this.charAt(0) ==
”
“ &&this.length > 0) ? this.slice(1).trim(’left’) : this);
} else
if (mode ==
’right’) {
return ((this.charAt(this.length -1) ==
”
“ && this.length > 0) ? this.slice(0, this.length -1).trim(’right’) : this);
} else {
return this.trim(’left’).trim(’right’);
}
};
5算出字符串中出现次数最多的字符是什么，出现了多少次
<scripttype=”text/javascript”>
//<![CDATA[var str="adadfdfseffserfefsefseeffffftsdg"; //命名一个变量放置给出的字符串
var maxLength = 0; //命名一个变量放置字母出现的最高次数并初始化为0
var result = ''; //命名一个变量放置结果输入
while( str != '' ){ //循环迭代开始，并判断字符串是否为空
oldStr = str; //将原始的字符串变量赋值给新变量
getStr = str.substr(0,1); //用字符串的substr的方法得到第一个字符（首字母）
eval("str =str.replace(/"+getStr+"/g,'')"); //详细如补充
if( oldStr.length-str.length >maxLength )
{ //判断原始的字符串的长度减去替代后字符串长度是否大于之前出现的最大的字符串长度
maxLength =oldStr.length-str.length; //两字符串长度相减得到最大的字符串长度
result = getStr + "=" +maxLength //返回最大的字符串结果（字母、出现次数）
}
}
alert(result) //弹出结果
//]]>
</script>
6写出3中使用this的典型应用
在HTML元素事件属性中inline方式使用this关键字：
7.最后一个问题是，如何制作一个combo选项，就是可以输入可以下拉菜单选择。
这个网上有很多成品，主要是通过绝对定位和相对定位结合的方式，改造原有的select
标签和input标签的方法。
更改元素的css style，设为display: none。此外还可以将visibility设为hidden，透明度设为0，或长、宽设为0。
2. 一个定宽网页在浏览器（IE6，IE7，Firefox，IE5）中横向居中对齐的布局，请写出主要的HTML标签及CSS。
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh-CN” lang=”zh-CN”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>居中</title>
<style type=”text/css”>
body {width: 600px}
html, body {margin: auto; padding: 0}
div.wrap {text-align:center; margin: 0; padding: 0}
</style>
</head>
<body>
<div class=”wrap”>居中</div>
</body>
</html>
复制代码
3. CSS中margin和padding的区别
margin是外边距，属于元素之外，相邻元素的margin可以融合。
padding是内边距，在元素之内，相邻元素的padding不可融合。
4. JavaScript中如何检测一个变量是一个String类型？请写出函数实现
function(obj) {
returntypeof(obj) == ”string”;
}
5. 网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
这个看我论坛右上角的就知道了…
6. 如何控制网页在网络传输过程中的数据量
题目貌似有问题，应该是减少数据量吧。
最显著的方法是启用GZIP压缩。此外保持好的编码习惯，避免重复和css、JavaScript代码，多余的HTML标签和属性。
7. 补充代码，是鼠标单击后Button1到Button2的后面
<div>
<inputtype=”button” id =”button1″ value=”1″ onclick=”???” />
<inputtype=”button” id =”button2″ value=”2″ />
</div>
var parent =this.parentNode; parent.removeChild(this); parent.appendChild(this);
8. Linux中，将a、b打包为back.tar，命令是（ ）
不知道＝。＝
9. Flash、Ajax各自的优缺点，在使用中如何取舍？
Flash的缺点是需要客户端安装Flash插件，比较大，且更改了默认的HTML页面行为；但可以方便地实现很多特效及动画，且具有较高权限。
Ajax的缺点是编程较为复杂，需要服务器端的支持，能实现的效果只能是DOM API提供的，权限很低，较难跨域；但可以显著加快页面的载入速度和用户体验。
此外，二者都不能被搜索引擎索引（Google已支持Flash文本的索引），不利于SEO。
建议:重要和关键部分直接用HTML，交互部分可以使用Ajax，复杂的动画可采用Flash。
百度2010
1、JS主要数据类型？5分
答：主要的类型有number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。
2、img的alt和title的异同？10分
答：title属性为设置该属性的元素提供建议性的信息。比如为链接添加描述性文字。
为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。
3、CSS的JS调用？如font-family, -moz-border-radius 10分
答：fontFamily、MozBorderRadius
4、CSS布局：两列，左边宽度自适应，右边宽度固定200px 15分
下载: test-1.html
#box1{width:100%;height:600px;position:relative;}
#left1{margin-right:200px;border:1px solid red;height:100%;}
#right1{width:200px;height:100%;position:absolute;top:0px;right:0px;border:1px solid blue;}
<div id="box1">
<div id="left1"></div>
<div id="right1"></div>
</div>
5、js对象的深度克隆？20分
下载: test-2.html
Object.prototype.deepClone=function(){
function cloneObj(){}
cloneObj.prototype=this;
var obj=new cloneObj();
for(var o in obj){
if(typeof(obj[o])=="object")obj[o]=obj[o].deepClone();
} return obj;
}
6、动态打印时间，格式为yyyy-MM-dd hh:mm:ss? 15分
下载: test-3.html
function printTime(){
var timer1=new Date();
var timer=timer1.toLocaleString();
timer=timer.replace(/[年月]/g,"-");
timer=timer.replace(/日/,"");
time.innerHTML=timer;
}setInterval("printTime()",1000);
7、如何提高网页运行性能？20分
没写。
8、linux下删除当前目录下扩展名为c的文件（如a.c，b.c）5分
rm–r *.c
find. -name “*.doc” -type f -exec cp {} /tmp/doc \;找到当前目录（.）下扩展名为(doc)的文件并拷贝到指定目录【注意-type f 指普通文件，-exec ls-l{}列出文件，最后加上\】
cp[options] source dest 复制
9、flash as2.0和flash as3.0在面向对象方面的异同？10分
答：面向对象方面，2.0像javascript，3.0像java。
到了 AS 2.0,面向对象被引入了，但它实质上是动态脚本语言，虽然已经有了类的概念和class关键字，但对象支持还是基于类似JavaScript的prototype机制——动态继承。
3.0同时支持静态类型，即基于类的继承方式；以及动态类型，即基于prototype的继承方式。推荐用静态类型。
10、Flash、Ajax各自的优缺点，在使用中如何取舍？10分
1、Flashajax对比
Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM
2、项目中遇到什么问题？如何解决？
前端题目总结
HTML相关
<!DOCTYPE>标签的定义与用法。
块级元素和行内元素都有哪些？
你真的了解HTML吗？ 雅虎面试题把前面黄底那段拿去搜索下就知道了(曾在某浪公司面试的时候被问到过，确实是很好的问题)。
CSS相关
介绍所知道的CSS hack技巧(如：_， *， +， \9， !important 之类)。
介绍CSS盒模型。
CSS层叠是什么？介绍一下。
都知道哪些CSS浏览器兼容性问题。
有时会被问到些刁钻点的题，比如position值都有哪些，CSS3都有哪些新内容...
JavaScript基础相关
HTTP协议的状态消息都有哪些？(如200、302对应的描述)
AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?
同步和异步的区别?
简述JavaScript封装。
JavaScript继承有哪两种形式形式，进行描述。
什么是闭包？以下代码点击<p>会输出什么？为什么？能大概说明白的话继续问能想出几种解决办法。
答案: 5 解释: 由于闭包 i被保留在内存中,alert 显示的是i当前的值, 最后一次i++ 会导致i为5
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"
/>
<title>闭包演示</title>
<style type="text/css">
p {background:gold;}
</style>
<script type="text/javascript">
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
</script>
</head>
<body onload="init();">
<p>产品 0</p>
<p>产品 1</p>
<p>产品 2</p>
<p>产品 3</p>
<p>产品 4</p>
</body>
</html>
在JS中this关键字的使用场合和用法(如在构造函数中、setTimeout中等)。
简述下cookie的操作，还有cookie的属性都知道哪些。
IE与FF的JS兼容性都知道哪些。
DOM操作 -
怎样添加、移除、移动、复制、创建和查找节点(这个问题真心是基础题，一般不会问)。
jQuery相关
jQuery源码是否尝试去读过？说说基本的架构或者 jQuery.fn.init 中都做了哪些判断。
都知道哪些不好的jQuery书写方式。
Sizzle是否有读过？
其它相关的加分项：
都使用和了解过哪些编辑器？都使用和了解过哪些日常工具？
都知道有哪些浏览器内核？开发过的项目都兼容哪些浏览器？
国内外的JS牛人都知道哪些？
瀑布流布局或者流式布局是否有了解
正则表达式有系统学习过吗(看书或网上教程)？有的话就问问简单点的邮箱验证、URL验证， 或者问问
贪婪匹配与懒惰匹配 的理论知识。
Node.js是否有过尝试？到什么程度？说说个人理解的看法？
HTML5都有哪些新的JS API？
前端优化知识都知道哪些？
基础算法题（如快速排序，能否一两句说说重要的核心原理或者数组消重等）。
是否有接触过或者了解过重构。
其他一些总结
百度web前端笔试试卷上的题目：
1.判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20
2.截取字符串abcdefg的efg
3.让一个input的背景颜色变成红色
4。给一个页面，写html
css
5。div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域
6。判断一个字符串中出现次数最多的字符，统计这个次数
7。IE与FF脚本兼容性问题
又重新问的是1，4，6，7，这次问出题者的意图，并且让给出7的更多答案，以及IE
FF不兼容的原因
然后看了看简历，没有问简历上的项目，而是让自己随便谈谈
1对于web客户端技术未来趋势发展谈谈看法
javascript + ajax=RIA
Adobe Flash AS 3
Flex
Sliveright
2web开发团队人员应该如何分工协作
布局 CSS
脚本
比如脚本人员长期的积累可能铸造类型YUI这样的产品级脚本库（亮点）
3web开发曾经的团队有没有别人遇到问题，什么问题，向你请教
4如果要实习，什么时候可以
5自己在开发的过程中遇到什么问题，谈谈看法
6web开发脚本开发环境用什么、调试用什么
试过aptana，现在就用editplus
调试肯定用firebug，ie下看页面DOM用IEInspector
7如果有个新技术，现在需要掌握，你会怎么做
新技术的发现我一般是通过RSS工具，比如我用GoogleReader
每天有半个小时左右在看最新的资讯、技术走向
发现新技术，首先有个大概了解，如果有深入的必要
我一般会看他的官网，比如jquery，我会搜索到www.jquery.com，然后看Docs、samples
如果要用到项目中，有困难的问题，我会svn得到最新的这个技术的源码，深入跟踪进去，看实现原理
一般现在涌现的技术都是opensource
提问时间
1百度web开发脚本是否有做类似YUI库的打算
2百度web开发工程师打算招多少人
百度电话二面回忆 web开发部–web开发工程师
首先是自我介绍
然后谈谈做的web项目
然后开始问技术问题
前端开发的优化问题
答:
产品发布时，js的压缩，即函数名替换、整个文件压缩成一行
css开发的时候
注释写清楚，先有个base.css，然后根据不同页面需要再加css，发布的时候将css中的一个定义写成一行，目的是压缩文件大小
最终发布的时候甚至可以将css，js分别压缩成一个文件，甚至css、js通过技巧压缩到一个里边（亮点）
这样的目的是，减少用户访问web产品的http连接数
web前端产品的开发流程
答:首先根据产品的定位、用户群，确定配色，然后纸上设计整体布局，然后png或者psd出效果图，切出需要的小图片，然后手写代码div+css构造出页面，然后根据功能写脚本
参考126邮箱首页，将所有小图片放到一个图片中，通过css的background-position实现页面，还是为了优化，减少http连接数
规避javascript多人开发函数重名问题
答:首先是通过命名规范，比如根据不同的开发人员实现的功能，在函数名加前缀，虽然函数名看起来复杂，发布的时候还是可以替换，从而优化。
还有一种办法是，每个开发人员都把自己的函数封装到类中，然后调用的时候即使函数名相同，但是因为是要类.函数名来调用，所以也减少了重复的可能性。
javascript面向对象中继承实现
答：我是用prototype.js extend.js扩展
然后子类中parent.initialize()…
答的不好
正确答案：
// 1.
构造器
function Animal() {};
function Mammal() {};
function Canine() {};
function Dog() {};
// 2.
原型链表
Mammal.prototype = new Animal();
Canine.prototype = new Mammal();
Dog.prototype = new Canine();
prototype.js实现的基本原理
答：
将功能封装
比如Ajax.Request，还是有判断浏览器的代码；Position这样的实现页面元素位置的计算
prototye太大，如果一个页面功能不需要这样的，自己实现，怎么做
答：首先页面、css、脚本分离之后，脚本中将整个模块功能写成一个类var
Do={}
其中初始化函数init:function(){}，然后最后做Do.init()
其中init会对页面上form中需要交互的元素绑定事件，比如$(’input1′).onclick=function(){}
IE、FF下面脚本的区别
答：
1.IE有outerHTML，FF没有
2.页面元素id，IE可以直接取，FF必须document.getElementById()
3.Ajax里边FF是newXMLHttpRequest，而IE是
try new ActiveXObject(’Msxml2.XMLHTTP’)try
new ActiveXObject(’Microsoft.XMLHTTP’)
FF下面实现outerHTML
答：.parenet.firstChild .parent.innerHTML
这个没答好
正确答案：原理是，get：取到这个标签的tagname，然后属性循环构造成这个标签的属性
set：把字符串用insertBefore插入到这个元素前面，然后removeChild这个元素
<head>
<SCRIPTLANGUAGE=”JavaScript”>
<!–
if(typeof(HTMLElement)!=”undefined”&&
!window.opera)
{
HTMLElement.prototype.__defineGetter__(”outerHTML”,function()
{
var a=this.attributes, str=”<”+this.tagName,
i=0;
for(;i<a.length;i++)
if(a[i].specified)
str+=”
“+a[i].name+’=”‘+a[i].value+’”‘;
if(!this.canHaveChildren)
return str+”
/>”;
return str+”>”+this.innerHTML+”</”+this.tagName+”>”;
});
HTMLElement.prototype.__defineSetter__(”outerHTML”,function(s)
{
var d = document.createElement(”DIV”);
d.innerHTML= s;
for(var i=0;i<d.childNodes.length; i++)
this.parentNode.insertBefore(d.childNodes[i],this);
this.parentNode.removeChild(this);
});
HTMLElement.prototype.__defineGetter__(”canHaveChildren”,function()
{
return!/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
});
}
//–>
</SCRIPT>
IE、FF下面CSS的解释区别
答：
1.png透明背景，FF下面没有问题，IE需要用滤镜通道
2.z-index在IE、FF下面的解释问题，
IE会认为第一个z-index=0
3.长字符串，word-wrap:break-all可以解决IE，但是FF需要overflow:hidden才行
冯舒娅补充：
1、有些标签在ff中不能用，比如button
2、滤镜
3、鼠标cursor:hand
cursor:pointer
4、div的高度自适应
5、对box模型解析不一样
6、ul、ol的padding和margin
IE都能识别*，标准浏览器（如FF）不能识别*；
IE6能识别*，但不能识别
!important；
IE7能识别*，也能识别
!important；
FF不能识别*，但能识别
!important；
例如style=”*width:10px;!importantwidth:20px;”
这样在IE6下宽度为10px,在IE7下宽度时20px
web前端技术的展望
答：javascript ajax；flashAS；Flex；Sliveright
附上网上的百度web开发工程师笔试问题集
1编写一个方法
求一个字符串的字节长度
<script language=”javascript”type=”text/javascript”>
new function(s)
{
if(!arguments.length||!s) returnnull;
if(”"==s)
return 0;
var l=0;
for(var i=0;i<s.length;i++)
{
if(s.charCodeAt(i)>255) l+=2;
else l++;
}
alert(l);
}(”hello你好，我好,大家好！world!”);
</script>
2编写一个方法
去掉一个数组的重复元素
<script language=”javascript”type=”text/javascript”>
Array.prototype.strip=function()
{
if(this.length<2) return[this[0]]||[];
var arr=[];
for(var i=0;i<this.length;i++)
{
arr.push(this.splice(i–,1));
for(var j=0;j<this.length;j++)
{
if(this[j]==arr[arr.length-1])
{
this.splice(j–,1);
}
}
}
return arr;
}
vararr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];
alert(arr.strip());
</script>
3说出3条以上ff和ie的脚本兼容问题
IE
有children，FF没有；IE有parentElement，FF没有；IE有innerText,outerText,outerHTML，FF
没有；FF有HTMLElement,HTMLDivElement,XMLDocument,DocumentFragment,Node,Event,Element等等，IE没有；IE有数据岛，FF没有；IE跟FF创建HttpRequest实例的方法不一样。。等等。。
4用脚本写去除字符串的前后空格
String.prototype.trim =function(mode)
{//前后去空格
if (mode==’left’)
{
return ((this.charAt(0) ==
”
“ &&this.length > 0) ? this.slice(1).trim(’left’) : this);
} else
if (mode ==
’right’) {
return ((this.charAt(this.length -1) ==
”
“ && this.length > 0) ? this.slice(0, this.length -1).trim(’right’) : this);
} else {
return this.trim(’left’).trim(’right’);
}
};
5算出字符串中出现次数最多的字符是什么，出现了多少次
<scripttype=”text/javascript”>
//<![CDATA[var str="adadfdfseffserfefsefseeffffftsdg"; //命名一个变量放置给出的字符串
var maxLength = 0; //命名一个变量放置字母出现的最高次数并初始化为0
var result = ''; //命名一个变量放置结果输入
while( str != '' ){ //循环迭代开始，并判断字符串是否为空
oldStr = str; //将原始的字符串变量赋值给新变量
getStr = str.substr(0,1); //用字符串的substr的方法得到第一个字符（首字母）
eval("str =str.replace(/"+getStr+"/g,'')"); //详细如补充
if( oldStr.length-str.length >maxLength )
{ //判断原始的字符串的长度减去替代后字符串长度是否大于之前出现的最大的字符串长度
maxLength =oldStr.length-str.length; //两字符串长度相减得到最大的字符串长度
result = getStr + "=" +maxLength //返回最大的字符串结果（字母、出现次数）
}
}
alert(result) //弹出结果
//]]>
</script>
6写出3中使用this的典型应用
在HTML元素事件属性中inline方式使用this关键字：
7.最后一个问题是，如何制作一个combo选项，就是可以输入可以下拉菜单选择。
这个网上有很多成品，主要是通过绝对定位和相对定位结合的方式，改造原有的select
标签和input标签的方法。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 拼多多2018提前批前端笔试总结
- 2017阿里巴巴秋招前端笔试题总结
- 网易2018春招 前端开发师 笔试题型总结
- 58同城2018提前批前端笔试题总结
- 2017网易前端笔试题总结
- 2015阿里巴巴前端实习生在线笔试考后总结
- 前端笔试中总结1---null和undefined
- 2018年网易前端笔试题总结
- 前端笔试题总结---持续更新
- 2017腾讯Web前端实习生招聘笔试题总结
- 【其他？？】前端笔试题总结
- 前端笔试题总结（一）
- 前端笔试题总结
- 关于前端学习和笔试面试的总结
- 2017盛大游戏2017前端工程师校招笔试题总结
- 总结的一些前端开发笔试题
- 2014-07-18笔试面试总结（前端）
- 前端笔试题总结
- 阿里巴巴2016前端工程师笔试题1总结
- 我所遇-前端笔试题总结