web前端--面试题

最新推荐文章于 2023-03-30 09:03:34 发布

it-小瑞

最新推荐文章于 2023-03-30 09:03:34 发布

阅读量924

点赞数

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″ οnclick=”???” />

<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分

#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分

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分

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′).οnclick=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()

{

});

}

//–>

</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编写一个方法求一个字符串的字节长度

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编写一个方法去掉一个数组的重复元素

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实例的方法不一样。。等等。。