前端笔试题总结

标签：

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的区别是?

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

补充：@import最优写法
@import的写法一般有下列几种：

@import ‘style.css‘ //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url(‘style.css‘) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

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

6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高

7.前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js

8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}

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

10.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义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.清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用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事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.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)

call方法: 
语法：call(thisObj，Object)
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 

apply方法： 
语法：apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。 
说明： 
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。 
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

10.ajax请求时，如何解释json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
11.b继承a的方法
b.prototype = new 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.闭包是什么，有什么特性，对页面有什么影响,应用场景

function a(){

    var i = 50;

    function b(){

        alert(i);

    }

    return b;

}

var result = new a();

result();

特性：1、闭包可以读取函数内部变量    2、将函数内部变量的值始终保存在内存中

场景：1.使用闭包代替全局变量

　　2.函数外或在其他函数中访问某一函数内部的参数

　　3.在函数执行之前为要执行的函数提供具体参数

　　4.在函数执行之前为函数提供只有在函数执行或引用时才能知道的具体参数

     5.为节点循环绑定click事件，在事件函数中使用当次循环的值或节点，而不是最后一次循环的值或节点

     6.暂停执行

     7.包装相关功能

闭包就是能够读取其他函数内部变量的函数。
http://blog.csdn.net/gaoshanwudi/article/details/7355794 此链接可查看（问这个问题的不是一个公司）

15.如何阻止事件冒泡和默认事件
canceBubble return false
1.阻止事件冒泡,使成为捕获型事件触发机制.

2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.

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<arr.length;i++)
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}

//2

Function noEqual(){

         Var n=[];

         For(var i=0;i<this.length;i++){

         If(n.indexof(this[i]==0)){

                   n.push(this[i]);

}

}

Return n;

}

23.javascript类型转换方法

 24.javascript中数据类型有几种？

Null、unfinded/string/Number/Object/Boolean/

25.深度克隆对象

function clone(obj){

                   var temp;

                   if(obj instanceOf Array){

                            temp = [];

                            var i = this.length;

                            while(i--){

                                     temp[i]=clone(obj[i]);

                            }

                            return temp;

                   }

                   else if(obj instanceOf Object){

                            temp = {};

                            for ( var k in obj){

                                     temp[k] = clone(obj[k]);

                            }

                            return temp;

                   }

                   else{

                            return obj;

                   }

         }

26编写一个JavaScript函数，实时显示当前时间，格式“年-月-日 时:分:秒”

var timer = function (){

                   var now = new Date();

                   var year = now.getFullYear();

                   var month = now.getMonth()+1;

                   var date  = now.getDate();

                   var hour = now.getHours();

                   var minu = now.getMinutes();

                   var second = now.getSeconds();

                   var time = year+‘-‘+month+‘-‘+date+‘ ‘+hour+‘:‘+minu+":"+second;

                   document.getElementById(‘time‘).innerHTML = time;

         }

         // setTimeout()

         setInterval(timer,1000);

27.基于HTTP协议的客户端/服务器请求响应机制的信息交换过程包含下面几个步骤：

1)     建立连接：客户端与服务器建立TCP连接

2)     发送请求：打开一个连接后，客户端把请求信息发送到服务器的相应端口上，完成请求动作提交。

3)     发送响应：服务器在处理完客户端请求之后，要向客户端发送响应消息。

4)     关闭连接：客户端和服务器端都可以关闭套接字来结束TCP/IP对话

28 http请求后，服务器返回statue状态值

1xx - 信息提示

100 - 初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1新）

101 - 服务器将遵从客户的请求转换到另外一种协议。（HTTP 1.1新）

2xx - 成功

200 - OK 一切正常，对GET和POST请求的应答文档跟在后面。

201 - Created 服务器已经创建了文档，Location头给出了它的URL。

202 - Accepted 已经接受请求，但处理尚未完成。

203 - Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝，非权威性信息（HTTP 1.1新）。

204 - No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。

205 - Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容（HTTP 1.1新）。

206 - Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它（HTTP 1.1新）。

3xx - 重定向

300 - Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。

301 - Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。

302 - Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。注意，在HTTP1.0中对应的状态信息是“Moved Temporatily”。出现该状态代码时，浏览器能够自动访问新的URL，因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如，如果浏览器错误地请求 http://host/~user （缺少了后面的斜杠），有的服务器返回301，有的则返回302。严格地说，我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。

303 - See Other 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取（HTTP 1.1新）。

304 - Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

305 - Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取（HTTP 1.1新）。

307 - Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。（HTTP 1.1新）

4xx - 客户端错误

400 - Bad Request 请求出现语法错误。

401 - Unauthorized 访问被拒绝，客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。

404 - Not Found 无法找到指定位置的资源。这也是一个常用的应答。

405 - Method Not Allowed 请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）对指定的资源不适用，用来访问本页面的 HTTP 谓词不被允许（方法不被允许）（HTTP 1.1新）

406 - Not Acceptable 指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容，客户端浏览器不接受所请求页面的 MIME 类型（HTTP 1.1新）。

407 - Proxy Authentication Required 要求进行代理身份验证，类似于401，表示客户必须先经过代理服务器的授权。（HTTP 1.1新）

408 - Request Timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。（HTTP 1.1新）

409 - Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。（HTTP 1.1新）

410 - Gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。（HTTP 1.1新）

411 - Length Required 服务器不能处理请求，除非客户发送一个Content-Length头。（HTTP 1.1新）

412 - Precondition Failed 请求头中指定的一些前提条件失败（HTTP 1.1新）。

413 – Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头（HTTP 1.1新）。

414 - Request URI Too Long URI太长（HTTP 1.1新）。

415 – 不支持的媒体类型。

416 – Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头。（HTTP 1.1新）

417 – 执行失败。

423 – 锁定的错误。

5xx - 服务器错误

500 - Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求。

501 - Not Implemented 服务器不支持实现请求所需要的功能，页眉值指定了未实现的配置。

502 - Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。 亦说Web 服务器用作网关或代理服务器时收到了无效响应。

503 - Service Unavailable 服务不可用，服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头。这个错误代码为 IIS 6.0 所专用。

504 - Gateway Timeout 网关超时，由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答。（HTTP 1.1新） 。

505 - HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本。（HTTP 1.1新）。

28. 截取字符串abcdefg的efg

var str=‘abcdefg‘;

var ss = str.substring(4);

// var sd = str.substr(3,NAN);

// alert(sd);

alert(ss);

29获取事件源

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

30添加，去除事件

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

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

31获取标签的自定义属性

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

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

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

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

FF：可以

33. input.type的属性

IE：input.type只读

FF：input.type可读写

34innerText textContent outerHTML

IE：支持innerText, outerHTML

FF：支持textContent

35是否可用id代替HTML元素

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

FF：不可以

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

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

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

37javascript面向对象中继承实现

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();

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

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

　　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"));

39JavaScript中如何检测一个变量是一个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)));

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

borderLeftColor

　　mozViewport

41请编写一个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 <= 1)

　　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"]);

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

(1) document.domain+iframe

　　(2) 动态创建script标签

43js中如何定义class,如何扩展prototype

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

　　A.prototype.B = C;

　　A是某个构造函数的名字

　　B是这个构造函数的属性

　　C是想要定义的属性的值

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

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

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

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

45前端开发的优化问题

(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布局慢

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

启用GZIP压缩

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

前端笔试题总结

标签：

原文地址：http://www.cnblogs.com/gryBlog/p/4344720.html