前端开发面试题1

1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20

var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

reg.test("a1a__a1a__a1a__a1a__");

2，截取字符串abcdefg的efg

var str = "abcdefg";

if (/efg/.test(str))

{

var efg = str.substr(str.indexOf("efg"), 3);

alert(efg);

}

3，判断一个字符串中出现次数最多的字符，统计这个次数

//将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数

var str = "abcdefgaddda";

var obj = {};

for (var i = 0, l = str.length; i

{

var key = str[i];

if (!obj[key])

{

obj[key] = 1;

}

else

{

obj[key]++;

}

}

/*遍历这个hash table，获取value最大的key和value*/

var max = -1;

var max_key = "";

var key;

for (key in obj)

{

if (max

{

max = obj[key];

max_key = key;

}

}

alert("max:"+max+" max_key:"+max_key);

4．IE与FF脚本兼容性问题

(1) window.event：

表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

(2) 获取事件源

IE用srcElement获取事件源，而FF用target获取事件源

(3) 添加，去除事件

IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

(4) 获取标签的自定义属性

IE：div1.value或div1[“value”]

FF：可用div1.getAttribute(“value”)

(5) document.getElementByName()和document.all[name]

IE;document.getElementByName()和document.all[name]均不能获取div元素

FF：可以

(6) input.type的属性

IE：input.type只读

FF：input.type可读写

(7) innerText textContent outerHTML

IE：支持innerText, outerHTML

FF：支持textContent

(8) 是否可用id代替HTML元素

IE：可以用id来代替HTML元素

FF：不可以

这里只列出了常见的，还有不少，更多的介绍可以参看JavaScript在IE浏览器和Firefox浏览器中的差异总结

5，规避javascript多人开发函数重名问题

(1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀

(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就ok

6，javascript面向对象中继承实现

javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链，简单的代码如下：

function Animal(name)

{

this.name = name;

}

Animal.prototype.getName = function() {alert(this.name)}

function Dog() {};

Dog.prototype = new Animal("Buddy");

Dog.prototype.constructor = Dog;

var dog = new Dog();

7．FF下面实现outerHTML

FF不支持outerHTML，要实现outerHTML还需要特殊处理

思路如下：

在页面中添加一个新的元素A，克隆一份需要获取outerHTML的元素，将这个元素append到新的A中，然后获取A的innerHTML就可以了。 SPANDIV

SPAN

P

8，编写一个方法 求一个字符串的字节长度

假设：

一个英文字符占用一个字节，一个中文字符占用两个字节

function GetBytes(str)

{

var len = str.length;

var bytes = len;

for(var i=0; i

if (str.charCodeAt(i) > 255) bytes++;

}

return bytes;

}

alert(GetBytes("你好,as"));

9．编写一个方法 去掉一个数组的重复元素

var arr = [1 ,1 ,2, 3, 3, 2, 1];

Array.prototype.unique = function()

{

var ret = [];

var o = {};

var len = this.length;

for (var i=0; i

{

var v = this[i];

if (!o[v])

{

o[v] = 1;

ret.push(v);

}

return ret;

};

alert(arr.unique());

10，写出3个使用this的典型应用

(1)在html元素事件属性中使用，如

(2)构造函数

function Animal(name, color) {

this.name = name;

this.color = color;

}

(3)CSS expression表达式中使用this关键字

12，如何显示/隐藏一个DOM元素?

el.style.display = "";

el.style.display = "none";

el是要操作的DOM元素

13，JavaScript中如何检测一个变量是一个String类型?请写出函数实现 String类型有两种生成方式：

(1)

Var str = “hello world”;

(2)

Var str2 = new String(“hello world”);

function IsString(str){return (typeof str == "string" || str.constructor == String);}

var str = "";

alert(IsString(1));

alert(IsString(str));

alert(IsString(new String(str)));

14，网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”

15，补充代码，鼠标单击Button1后将Button1移动到Button2的后面

16，JavaScript有哪几种数据类型

简单：Number，Boolean，String，Null，Undefined

复合：Object，Array，Function

17，下面css标签在JavaScript中调用应如何拼写，border-left-color，-moz-viewport

borderLeftColor

mozViewport

18，JavaScript中如何对一个对象进行深度clone

function cloneObject(o)

{

if( !o || 'object' !== typeof o)

{

return o;

}

var c = 'function' === typeof o.pop ? [] : {};

var p, v;

for(p in o)

{

if(o.hasOwnProperty(p))

{

v = o[p];

if(v && 'object' === typeof v)

{

c[p] = Ext.ux.clone(v);

}

else

{

c[p] = v;

}

}

}

return c;

};

19，如何控制alert中的换行

\n alert(“p\np”);

20，请实现，鼠标点击页面中的任意标签，alert该标签的名称.(注意兼容性) SPANDIV

SPAN

P

21，请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如:

var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″; function parseQueryString(url)

{

var params = {};

var arr = url.split("?");

if (arr.length

return params;

arr = arr[1].split("&");

for(var i=0, l=arr.length; i

{

var a = arr[i].split("=");

params[a[0]] = a[1];

}

return params;

}

var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2"; var ps = parseQueryString(url);

alert(ps["key1"]);

22，ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题? Ajax是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用，并且用收到的数据来更新一个当前web页面而不必

刷新整个页面。该技术能够改进客户端的体验。包含的技术：

XHTML：对应W3C的XHTML规范，目前是XHTML1.0。

CSS：对应W3C的CSS规范，目前是CSS2.0

DOM：这里的DOM主要是指HTML DOM，XML DOM包括在下面的

XML中

JavaScript：对应于ECMA的ECMAScript规范

XML：对应W3C的XML DOM、XSLT、XPath等等规范

XMLHttpRequest：对应WhatWG的Web Applications1.0规范(http://whatwg.org/specs/web-apps/current-work/)

同步：脚本会停留并等待服务器发送回复然后再继续

异步：脚本允许页面继续其进程并处理可能的回复

跨域问题简单的理解就是因为JS同源策略的限制，a.com域名下的JS无法操作b.com或c.a.com下的对象。

PS：(1)如果是端口或者协议造成的跨域问题前端是无能为力的

(2) 在跨域问题上，域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP

前端对于跨域的解决办法：

(1) document.domain+iframe

(2) 动态创建script标签

23，什么是闭包?下面这个ul，如何点击每一列的时候alert其index?

这是第一条

这是第二条

这是第三条

内部函数被定义它的函数的外部区域调用的时候就产生了闭包。 (function A() {

var index = 0;

var ul = document.getElementById("test");

var obj = {};

for (var i = 0, l = ul.childNodes.length; i

{

if (ul.childNodes[i].nodeName.toLowerCase() == "li")

{

var li = ul.childNodes[i];

li.onclick = function()

{

index++;

alert(index);

}

}

}

})();

24，请给出异步加载js方案，不少于两种

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头

会导致加载很慢的话，是会严重影响用户体验的。

异步加载方式：

(1) defer，只支持IE

(2) async：

(3) 创建script，插入到DOM中，加载完毕后callBack，见代码： function loadScript(url, callback)

{

var script = document.createElement("script")

script.type = "text/javascript";

if (script.readyState)

{ //IE

script.onreadystatechange = function()

{

if (script.readyState == "loaded" ||script.readyState == "complete")

{

script.onreadystatechange = null;

callback();

}

};

}

else

{

//Others: Firefox, Safari, Chrome, and Opera

script.onload = function()

{

callback();

};

}

script.src = url;

document.body.appendChild(script);

}

25，请设计一套方案，用于确保页面中JS加载完全。

var n = document.createElement("script");

n.type = "text/javascript";

//以上省略部分代码

//ie支持script的readystatechange属性(IE

readystatechange event for script and css nodes)

if(ua.ie)

{

n.onreadystatechange = function()

{

var rs = this.readyState; support the

if('loaded' === rs || 'complete'===rs)

{

n.onreadystatechange = null;

f(id,url); //回调函数

}

};

//省略部分代码

//safari 3.x supports the load event for script nodes(DOM2) n.addEventListener('load',function(){

f(id,url);

});

//firefox and opera support onload(but not dom2 in ff) handlers for

//script nodes. opera, but no ff, support the onload event for link //nodes.

}

else

{

n.onload = function(){f(id,url);};

}

26．js中如何定义class,如何扩展prototype?

Ele.className = “***”; //***在css中定义，形式如下：.*** {…}

A.prototype.B = C;

A是某个构造函数的名字

B是这个构造函数的属性

C是想要定义的属性的值

27，如何添加html元素的事件,有几种方法.

(1) 为HTML元素的事件属性赋值

(2) 在JS中使用ele.on*** = function() {…}

(3) 使用DOM2的添加事件的方法 addEventListener或attachEvent

28，documen.write和 innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

29，多浏览器检测通过什么?

(1) navigator.userAgent

(2) 不同浏览器的特性，如addEventListener

30，js的基础对象有那些, window和document的常用的方法和属性列出来

String,Number,Boolean

Window:

方法：

setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open

属性：name,parent,screenLeft,screenTop,self,top,status Document方法：

createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln

属性：cookie,doctype,domain,documentElement,readyState,URL,

31，前端开发的优化问题

(1) 减少http请求次数：css spirit,data uri

(2) JS，CSS源码压缩

(3) 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

(4) 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

(5) 用setTimeout来避免页面失去响应

(6) 用hash-table来优化查找

(7) 当需要设置的样式很多时设置className而不是直接操作style

(8) 少用全局变量

(9) 缓存DOM节点查找的结果

(10) 避免使用CSS Expression

(11) 图片预载

(12) 避免在页面的主体布局中使用table，table要等其中的内容完全

下载之后才会显示出来，显示比div+css布局慢

32，如何控制网页在网络传输过程中的数据量

启用GZIP压缩

保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性

33，Flash、Ajax各自的优缺点，在使用中如何取舍?

Ajax的优势

(1) 可搜索型

(2) 开放性

(3) 费用

(4) 易用性

(5) 易于开发

Flash的优势

(1) 多媒体处理

(2) 兼容性

(3) 矢量图形 比SVG，Canvas优势大很多

(4) 客户端资源调度，比如麦克风，摄像头

亚信web前端面试题

1.判断字符串以字母开头，后面可以是数字，下划线，字母，长度为6-30

2.请举例使用callee属性实现函数的递归使用

3.Ajax同步和异步的区别，如何解决跨域问题?

4.apply和call方法有形似之处，请说出二者的区别

5.请解读一下javascript代码，并之处问题所在

var Obj=function(msg){

this.msg=msg;

this.shout=function(){

alert(this.msg);

}

this.waitAndShout=function(){

setTimeout(this.shout, 2000);

}

}

var aa=new Obj("abc");

aa.waitAndShout();

6.请给Array本地对象增加一个原型方法，他的用途是删除数组中重复的条目，并将新的数组返回

7.以下代码中 end字符串什么时候输出

查看源代码

打印

帮助

var t=true;

setTimeout(function(){

console.log(123);

t=false;

},1000);

while(t)

{ }

console.log('end');

8.你对前端开发工程师这个职位怎么理解的？前景如何？

9.前端开发的优化问题？

其他面试题集

题一

CSS

1、css选择器优先级顺序

2、将图片bg.jpg作为按钮的背景图片，并把文字隐藏

4、写出你所了解的目前主流浏览器(ie6,ie7,ie8,firefox,chrome)的css hack

JAVASCRIPT

1、表单验证

A、写一段正则表达式验证字符串匹配邮箱格式， 邮箱如

[email protected]、[email protected]。

B、验证字符串是否为数字字符串。如‘125’，‘2313.12’等为数字字符串。

2、写出下面代码的输出结果

A、

Var obj={};

Var ref=obj;

obj.name=”objectA”;

obj=["one","two","three"];

alert(ref.name);

alert(ref.length);

B、

Var outter=[];

Function clouseTest(){

Var array=["one","two","three","four"];

for(vari=0;i

Var x={};

x.no=i;

x.text=array[i];

x.invoke=function(){

alert(i);

}

outter.push(x);

}

}

//调用这个函数

clouseTest();

outter[0].invoke();

outter[3].invoke();

C、

$(function(){

Var con=$(“div#panel”);

this.id=”content”;

con.click(function(){

alert(this.id);

});

});

3、操作表格（可用javascript框架实现）

1

2

3

4

5

6

7

8

9

将第二行，第二列的内容改为55，背景色设置为红色。

4、算法题

A、快速排序算法

B、写一个函数实现字符串翻转

5、网站有一个广告，显示规则为：

a、第一次进入页面，广告显示10秒后隐藏

b、一个小时内第二次进入不显示广告简单描述下，实现的方法

6、列举你使用过的javascript操作字符串函数。

7、描述下你对js闭包、面向对象、继承的理解

8、你熟悉的Javascript框架，使用此框架实现过的最复杂的功能是？

题二

HTML+CSS

1.对WEB标准以及W3C的理解与认识

 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率；

 使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更

快；

 内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代

码和组件；

 容易维护、改版方便，不需要变动页面内容；

 提供打印版本而不需要复制内容、提高网站易用性；

2.xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同：

 XHTML 元素必须被正确地嵌套。

 XHTML 元素必须被关闭。

 标签名必须用小写字母。

 XHTML 文档必须拥有根元素。

3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档

加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

4.行内元素有哪些？块级元素有哪些？CSS的盒模型？

块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:内容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的区别是?

内联 内嵌 外链 导入

区别 ：同时加载；前者无兼容性，后者CSS2.1以下浏览器不支持；Link 支持使用javascript改变样式，后者不可

6.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

 标签选择符 类选择符 id选择符

 继承不如指定 Id>class>标签选择

 内联和important优先级高是后者优先级高

7.前端页面有哪三层构成，分别是什么？作用是什么？

结构层 Html 表示层 CSS 行为层 js

8.css的基本语句构成是？

选择器{属性1:值1;属性2:值2;……}

9.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

10.写出几种IE6 BUG的解决方法

 双边距BUG float引起的 使用display

 像素问题 使用float引起的 使用dislpay:inline -3px

 超链接hover 点击后失效 使用正确的书写顺序 link visited hover

active

 Ie z-index问题 给父级添加position:relative

 Png 透明 使用js代码改

 Min-height 最小高度 ！Important 解决’

 select 在ie6下遮盖 使用iframe嵌套

 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用

over:hidden,zoom:0.08 line-height:1px)

11.标签上title与alt属性的区别是什么？

 Alt 当图片不显示是 用文字代表。

 Title 为该属性提供信息

12.描述css reset的作用和用途。

Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

13.解释css sprites，如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

14.浏览器标准模式和怪异模式之间的区别是什么？

 盒子模型 渲染模式的不同

 使用 window.top.document.compatMode 可显示为什么模式

15.你如何对网站的文件和资源进行优化？期待的解决方案包括：  文件合并

 文件最小化/文件压缩

 使用CDN托管

 缓存的使用

16.什么是语义化的HTML？

直观的认识标签 对于搜索引擎的抓取有好处

17.清除浮动的几种方式，各自的优缺点

 使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意

义的标签）

 使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊

端,使用zoom:1用于兼容IE）

 是用afert伪元素清除浮动(用于非IE浏览器)

Javascript

1.javascript的typeof返回哪些数据类型

Object number function boolean underfind

2.例举3种强制类型转换和2种隐式类型转换？

强制（parseInt,parseFloat,number）

隐式（== – ===）

3.split() join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

5.事件绑定和普通事件有什么区别

6.IE和DOM事件流的区别

 执行顺序不一样、

 参数不一样

 事件加不加on

 this指向问题

7.IE和标准下有哪些兼容性的写法

 var ev = ev || window.event

 document.documentElement.clientWidth

document.body.clientWidth

 var target = ev.srcElement||ev.target

8.ajax请求的时候get 和post方式的区别 ||

一个在url后面一个放在虚拟载体里面

有大小限制

安全问题

应用不同一个是论坛等只需要请求的，一个是类似修改密码的

9.call和apply的区别

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

10.ajax请求时，如何解释json数据

使用eval 、parse 鉴于安全性考虑 使用parse更靠谱；eval不建议使用，它需要讲字符串解释成代码，然后再运行此代码，很消耗性能。

11.b继承a的方法

12.写一个获取非行间样式的函数

function getStyle(obj,attr,value)

{

if(!value)

if(obj.currentStyle)

{

return obj.currentStyle(attr)

}

else

{

obj.getComputedStyle(attr,false)

}

}

else

{

obj.style[attr]=value

}

}

13.事件委托是什么

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

http://www.webasily.com/?p=78 例子可见此链接

14.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

15.如何阻止事件冒泡和默认事件

canceBubble return false

16.添加 删除 替换 插入到某个接点的方法

 obj.appendChidl()

 obj.innersetBefore

 obj.replaceChild

 obj.removeChild

17.解释jsonp的原理，以及为什么不是真正的ajax

 动态创建script标签，回调函数

 Ajax是页面无刷新请求数据操作

18.javascript的本地对象，内置对象和宿主对象

 本地对象为array obj regexp等可以new实例化

 内置对象为gload Math 等不可以实例化的

 宿主为浏览器自带的document,window 等

19.document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js

Document.ready原生种没有这个方法，jquery中有 $().ready(function)

20.”==”和“===”的不同

前者会自动转换类型

后者不会

21.javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

22.编写一个数组去重的方法

function oSort(arr)

{

var result ={};

var newArr=[];

for(var i=0;i

{

if(!result[arr])

{

newArr.push(arr) result[arr]=1 }

}

return newArr }