前端面试真题（2）

145、需要将变量 e 的值修改为“a+b+c+d”,请写出对应的代码

var e=”abcd”;

设计一段代码能够遍历下列整个 DOM 节点

<div>

<p>

<span><a/></span>

<span><a/></span>

</p>

</div>

<ul>

<li></li>

<li></li>

</ul>

146、怎样实现两栏等高？

147、使用 js 实现这样的效果：在文本域里输入文字时，当按下 enter 键时不换行，而是替换成“{{enter}}”,(只需要考虑在行尾按下 enter 键的情况).

148、以下代码中 end 字符串什么时候输出

var t=true; setTimeout(function(){

console.log(123);

t=false;

},1000);

while(t){} console.log(‘end’);

149 、 specify(‘hello,world’)//=>’h,e,l,l,o,w,o,r,l,d’ 实 现 specify函数

150、请将一个 URL 的 search 部分参数与值转换成一个 json 对象151、请用原生 js 实现 jquery 的 get\post 功能，以及跨域情况下

152、请简要描述 web 前端性能需要考虑哪方面，你的优化思路是什么？

153、简述 readyonly 与 disabled 的区别

154、判断一个字符吕串出现次数最多的字符，统计这个次数并输出

155、编写一个方法，去掉一个数组的复重元素

156、写出 3 个使用 this 的典型应用

157、请尽可能详尽的解释 ajax 的工作原理

158、为什么扩展 javascript 内置对象不是好的做法？

159、请解释一下 javascript 的同源策略

160、什么是三元表达式？“三元”表示什么意思？

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

162、如果设计中使用了非标准的字体，你该如何去实现？

163、用 css 分别实现某个 div 元素上下居中和左右居中

164、modulo(12,5)//2 实现满足这个结果的 modulo 函数

165、HTTP 协议中，GET 和 POST 有什么区别？分别适用什么场景 ？

166、HTTP 状态消息 200 302 304 403 404 500 分别表示什么

167 、 HTTP 协 议 中 ， header 信 息 里 面 ， 怎 么 控 制 页 面 失 效 时 间

（last-modified,cache-control,Expires 分别代表什么）

168、HTTP 雷锋议目前常用的有哪几个？KEEPALIVE 从哪个版本开始出现的？

169、业界常用的优化 WEB 页面加载速度的方法（可以分别从页面元素展现，请求连接，css,js,服务器等方面介绍）

170、列举常用的 web 页面开发，调试以及优化工具

171、解释什么是 sql 注入，xss 漏洞

172、如何判断一个 js 变量是数组类型

173、请列举 js 数组类型中的常用方法

174、FF 与 IE 中如何阻止事件冒泡，如何获取事件对象，以及如何获取触发事件的元素

175、列举常用的 js 框架以及分别适用的领域

176 、 js 中 如 何 实 现 一 个 map 177、js 可否实现面向对象编程，如果可以如何实现 js 对象的继承

178、约瑟夫环—已知 n 个人（以编号 1，2，3…分别表示）围坐在一张圆桌周围。从编号为 k 的人开始报数，数到 m 的那个人出列；他的下一个人又从 1 开始报数，数到 m 的那个人又出列；依此规律重复下去，直到圆桌周围的人全部出列。

179、有 1 到 10w 这个 10w 个数，去除 2 个并打乱次序，如何找出那两个数？

180、如何获取对象 a 拥有的所有属性（可枚举的、不可枚举的，不包括继承来的属性）

181、有下面这样一段 HTML 结构，使用 css 实现这样的效果：

左边容器无论宽度如何变动，右边容器都能自适应填满父容器剩余的宽度。

<div class=”warp”>

<div class=”left”></div>

<div class=”right”></div>

</div>

182、下面这段代码想要循环昝输出结果 01234，请问输出结果是否正确，如果不正确，请说明为什么，并修改循环内的代码使其输出正确结果

for(var i=0;i<5;++i){ setTimeout(function(){

console.log(i+’’);

},100*i);

}

183、解释下这个 css 选择器什么发生什么？ [role=nav]>ul a:not([href^-mailto]){} 184、JavaScript 以下哪条语句会产生运行错误

A. var obj = (); B. var obj = []; C. var obj = {}; D. var obj = //;

答案：AD

185、以下哪些是 javascript 的全局函数：（ABC）

1. escape 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。ECMAScript v3 反对使用该方法，应用使用 decodeURI() 和 decodeURIComponent() 替代它。

1. parseFloat parseFloat() 函数可解析一个字符串，并返回一个浮点数。

该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字 的末端为止，然后以数字返回该数字，而不是作为字符串。

1. eval 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

1. setTimeout
2. alert

186、关于 IE 的 window 对象表述正确的有：（ACD）

1. window.opener 属性本身就是指向 window 对象

1. window.reload()方法可以用来刷新当前页面 应该是 location.reload 或者window.location.reload

1. window.location=”a.html”和 window.location.href=”a.html”的作用都是把当前页面替换成 a.html 页面

1. 定义了全局变量 g；可以用 window.g 的方式来存取该变量

187、描述错误的是

A：Http 状态码 302 表示暂时性转移 对

B:domContentLoaded 事件早于 onload 事件 onload 事件会在页面或图像加载完成后立即发生。

C: IE678 不支持事件捕获

D:localStorage 存储的数据在电脑重启后丢失 没有时间限制

try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)

188、关于 link 和@import 的区别正确的是 A

A: link 属于 XHTML 标签，而@import 是 CSS 提供的；

B：页面被加载时，link 会同时被加载，而后者引用的 CSS 会等到页面被加载完再加载C：import 只在 IE5 以上才能识别 而 link 是 XHTML 标签，无兼容问题

D: link 方式的样式的权重高于@import 的权重

189、下面正确的是 A

A: 跨域问题能通过 JsonP 方案解决 B：不同子域名间仅能通过修改 window.name 解决跨域还可以通过 script 标签 src jsonp 等 h5 Java split 等

C：只有在 IE 中可通过 iframe 嵌套跨域 D：MediaQuery 属性是进行视频格式检测的属性是做响应式的

188、错误的是

A: Ajax 本质是 XMLHttpRequest

B: 块元素实际占用的宽度与它的 width、border、padding 属性有关，与 background 无关C: position 属性 absolute、fixed、---relative---会使文档脱标

D: float 属性 left 也会使 div 脱标

189、不用任何插件，如何实现一个 tab 栏切换？

190、基本数据类型的专业术语以及单词拼写

191、变量的命名规范以及命名推荐

192、三种弹窗的单词以及三种弹窗的功能

193、console.log( 8 | 1 ); 输出值是多少？

答案：9

194、只允许使用 + - * / 和 Math.* ，求一个函数 y = f(x, a, b);当 x > 100 时返回 a 的值，否则返回 b 的值，不能使用 if else 等条件语句，也不能使用|,?:,数组。

答案：

function f(x, a, b) {

var temp = Math.ceil(Math.min(Math.max(x - 100, 0), 1)); return a * temp + b * (1 - temp);

}

console.log(f(-10, 1, 2));

195、JavaScriptalert(0.4*0.2);结果是多少？和你预期的一样吗？如果不一样该如何处理？

有误差，应该比准确结果偏大。 一般我会将小数变为整数来处理。当前之前遇到这个问题时也上网查询发现有人用 try catch return 写了一个函数，

当然原理也是一致先转为整数再计算。看起来挺麻烦的，我没用过。

196、一个 div，有几种方式得到这个 div 的 jQuery 对象？<div class='aabbcc'

id='nodesView'></div>想直接获取这个 div 的 dom 对象，如何获取？dom 对象如何转化为 jQuery 对象？

197、主流浏览器内核

IE trident 火狐 gecko 谷歌苹果 webkit Opera：Presto

198、如何显示/隐藏一个 dom 元素？请用原生的 JavaScript 方法实现

199、JavaScript 有哪几种数据类型

Number String Boolean Null Undefined Object

200、jQuery 框架中$.ajax()的常用参数有哪些？写一个 post 请求并带有发送数据和返回数据的样例

201、JavaScript 数组元素添加、删除、排序等方法有哪些？

Array.concat( ) 连接数组

Array.join( ) 将数组元素连接起来以构建一个字符串

Array.length 数组的大小

Array.pop( ) 删除并返回数组的最后一个元素 Array.push( ) 给数组添加元素 Array.reverse( ) 颠倒数组中元素的顺序 Array.shift( ) 将元素移出数组

Array.slice( ) 返回数组的一部分

Array.sort( ) 对数组元素进行排序

Array.splice( ) 插入、删除或替换数组的元素 Array.toLocaleString( ) 把数组转换成局部字符串 Array.toString( ) 将数组转换成一个字符串 Array.unshift( ) 在数组头部插入一个元素

202、如何添加 html 元素的事件，有几种方法？请列举

直接在标签里添加；在元素上添加、使用事件注册函数添加

203、JavaScript 的循环语句有哪些？

while for do while forEach

204、作用域-编译期执行期以及全局局部作用域问题

理解 js 执行主要的两个阶段：预解析和执行期

205、闭包：下面这个 ul，如何点击每一列的时候 alert 其 index？

<ul id="test">

<li>这是第一条</li>

<li>这是第二条</li>

<li>这是第三条</li>

</ul>

206、列出 3 条以上 ff 和 IE 的脚本兼容问题

1、在 IE 下可通过 document.frames["id"];得到该 IFRAME 对象，

而在火狐下则是通过 document.getElementById("content_panel_if").contentWindow;

2、IE 的写法： _tbody=_table.childNodes[0]

在 FF 中，firefox 会在子节点中包含空白则第一个子节点为空白""， 而 ie 不会返回空白可以通过 if("" != node.nodeName)过滤掉空白子对象 3、模拟点击事件

if(document.all){ //ie 下

document.getElementById("a3").click();

}

else{ //非 IE

var evt = document.createEvent("MouseEvents"); evt.initEvent("click", true, true); document.getElementById("a3").dispatchEvent(evt);

}

4、事件注册

if (isIE){window.attachEvent("onload", init);}else{window.addEventListener("load", init, false);}

207、列举可以哪些方面对前端开发进行优化

代码压缩、合并减少 http 请求，图片制作精灵图、代码优化

208、至少列出一种 JavaScript 继承的实现方式

209、如现在有一个效果，有显示用户头像、用户昵称、用户其他信息；当用户鼠标移到头像上时，会弹出用户的所有信息；如果是你，你会如何实现这个功能，请用代码实现？

210、call 与 apply 有什么作用？又有什么什么区别？用 callee 属性实现函数递归？

apply 的参数是数组,call 的参数是单个的值，除此之外，两者没有差别，重点理解 this 的改变，callee 已经不推荐使用

211、用正则表达式，写出由字母开头，其余由数字、字母、下划线组成的 6~30 的字符串？

212、列举浏览器对象模型 BOM 里常用的至少 4 个对象，并列举 window 对象的常用方法至少 5 个 （10 分）

对象：Window document location screen history navigator 方法：Alert() confirm() prompt() open() close()

213、Javascript 中 callee 和 caller 的作用？

caller 是返回一个对函数的引用，该函数调用了当前函数；

callee 是返回正在被执行的 function 函数，也就是所指定的 function 对象的正文。

214、对于 apply 和 call 两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数：?apply 传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而 call 则作为 call 的参数传入（从第二个参数开始）。?如 func.call(func1,var1,var2,var3)对应的 apply 写法为：

func.apply(func1,[var1,var2,var3]) 。

215、在 Javascript 中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望 length 属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的 argument 参数，还有像调用getElementsByTagName,document.childNodes 之类的,它们都返回 NodeList 对象都属于伪数组。可以使用 Array.prototype.slice.call(fakeArray)将数组转化为真正的 Array 对象。

216、写一个函数可以计算 sum(5,0,-5);输出 0; sum(1,2,3,4);输出 10;

Js 基本功

217、事件代理怎么实现？

在元素的父节点注册事件，通过事件冒泡，在父节点捕获事件

218、《正则》写出正确的正则表达式匹配固话号，区号 3-4 位，第一位为 0， 中横线，7-8 位数字，中横线，3-4 位分机号格式的固话号

常用正则表达式语法要熟悉

219、《算法》 一下 A,B 可任选一题作答，两题全答加分

A:农场买了一只羊，第一年是小羊，第二年底生一只，第三年不生，第四年底再生一只，第 五年死掉。

B:写出代码对下列数组去重并从大到小排列{5,2,3,6,8,6,5,4,7,1,9}

220、请写出一张图片的 HTML 代码，已知道图片地址为“images/abc.jpg”,宽 100px，高 50px

221、请写一个正则表达式：要求最短 6 位数，最长 20 位，阿拉伯数和英文字母（不区分大小写）组成

^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,20}$

222、统计 1 到 400 亿之间的自然数中含有多少个 1？比如 1-21 中，有 1、10、

11、21 这四个自然数有 5 个 1

223、删除与某个字符相邻且相同的字符，比如 fdaffdaaklfjklja 字符串处理之后成为“fdafdaklfjklja”

224、请写出三种以上的 Firefox 有但 InternetExplorer 没有的属性和函数

1、在 IE 下可通过 document.frames["id"];得到该 IFRAME 对象，

而在火狐下则是通过 document.getElementById("content_panel_if").contentWindow; 2、IE 的写法： _tbody=_table.childNodes[0]

在 FF 中，firefox 会在子节点中包含空白则第一个子节点为空白""， 而 ie 不会返回空白可以通过 if("" != node.nodeName)过滤掉空白子对象

3、模拟点击事件if(document.all){ //ie 下

document.getElementById("a3").click();

}

else{ //非 IE

var evt = document.createEvent("MouseEvents"); evt.initEvent("click", true, true); document.getElementById("a3").dispatchEvent(evt);

}

4、事件注册

if (isIE){window.attachEvent("onload", init);}else{window.addEventListener("load", init, false);}

225、请写出一个程序，在页面加载完成后动态创建一个 form 表单，并在里面添 加 一 个 input 对 象 并 给 它 任 意 赋 值 后 义 post 方 式 提 交 到 ： http://127.0.0.1/save.php

226、用 JavaScript 实现冒泡排序。数据为 23、45、18、37、92、13、24 面试经常遇到的排序，查找算法要熟悉 227、解释一下什么叫闭包，并实现一段闭包代码

简单理解就是函数的嵌套形成闭包，闭包包括函数本身及其外部作用域

228、简述一下什么叫事件委托以及其原理

在元素的父节点注册事件，通过事件冒泡，在父节点捕获事件

229、前端代码优化的方法

var User = { 对象count = 1，属性

getCount：function（）{ 方法

return this.count;

}

}

console.log(User.getCount()); var func = User.getCount; console.log(func());

1 undefined（window）;

230、下列 JavaScript 代码执行后，依次 alert 的结果是

(function test(){

var a=b=5; alert(typeof a); alert(typeof b);

})();

alert(typeof a); alert(typeof b);

231、下列 JavaScript 代码执行后，iNum 的值是

var iNum = 0;

for(var i = 1; i< 10; i++){ if(i % 5 == 0){

continue;

}

iNum++;

}

232、输出结果是多少？

1） var a; var b = a * 0; if (b == b) {

console.log(b * 2 + "2" - 0 + 4);

} else {

console.log(!b * 2 + "2" - 0 + 4);

}

答案：26

1. <script>

var a = 1;

</script>

<script> var a;

var b = a * 0; if (b == b) {

console.log(b * 2 + "2" - 0 + 4);

} else {

console.log(!b * 2 + "2" - 0 + 4);

}

</script> 答案：6

1. var t = 10; function test(t){

var t = t++;

}test(t);

console.log(t); 答案：10

1. var t = 10; function test(test){

var t = test++;

}test(t);

console.log(t); 答案：10

1. var t = 10; function test(test){

t = test++;

}test(t); console.log(t); 答案：10

1. var t = 10; function test(test){

t = t + test; console.log(t); var t = 3;

}test(t);

console.log(t); 答案：NaN 10 8）var a;

var b = a / 0; if (b == b) {

console.log(b * 2 + "2" - 0 + 4);

} else {

console.log(!b * 2 + "2" - 0 + 4);

}

答 案 ：26 9）<script>

var a = 1;

</script>

<script>

var a;

var b = a / 0; if (b == b) {

console.log(b * 2 + "2" + 4);

} else {

console.log(!b * 2 + "2" + 4);

}

</script>

答案：Infinity24

233、

<body>

<form id='form1'>

<div id='div1'></div>

<div id='div2'></div>

<div id='div3'></div>

<div id='div4'></div>

<div id='div5'></div>

<div id='div3'>id 名重复的元素</div>

</form>

</body>

用程序实现找到 html 中 id 名相同的元素？

234、下列 JavaScript 代码执行后，运行的结果是

<button id='btn'>点击我</button>

var btn = document.getElementById('btn'); var handler = {

id: '_eventHandler', exec: function(){

alert(this.id);

}

}

btn.addEventListener('click', handler.exec.false);

235、下列 JavaScript 代码执行后，依次 alert 的结果是

var obj = {proto: {a:1,b:2}}; function F(){};

F.prototype = obj.proto; var f = new F();

obj.proto.c = 3; obj.proto = {a:-1, b:-2}; alert(f.a);

alert(f.c);

delete F.prototype['a'];

alert(f.a);

alert(obj.proto.a);

236、下列 JavaScript 代码执行后的效果是

<ul id='list'>

<li>item</li>

<li>item</li>

<li>item</li>

<li>item</li>

<li>item</li>

</ul>

var items = document.querySelectorAll('#list>li'); for(var i = 0;i < items.length; i++){

setTimeout(function(){ items[i].style.backgroundColor = '#fee';

}, 5);

}

237、下列 JavaScript 代码执行后的 li 元素的数量是

<ul>

<li>Item</li>

<li></li>

<li></li>

<li>Item</li>

<li>Item</li>

</ul>

var items = document.getElementsByTagName('li'); for(var i = 0; i< items.length; i++){

if(items[i].innerHTML == ''){ items[i].parentNode.removeChild(items[i]);

}

}

238、程序中捕获异常的方法？

window.error try{}catch(){}finally{}

239、将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成 10，{$name}替换成 Tony （使用正则表达式）

答案：”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g,?’ 10′).replace(/{\$name}/g,?‘Tony’);

240、给 String 对象添加一个方法，传入一个 string 类型的参数，然后将 string 的每个字符间价格空格返回，例如：

addSpace(“hello world”) // -> ‘h e l l o ?w o r l d’

String.prototype.spacify = function(){

return this.split('').join(' ');

};

241、写出函数 DateDemo 的返回结果，系统时间假定为今天

function DateDemo(){

var d, s="今天日期是："; d = new Date();

s += d.getMonth() + "/"; s += d.getDate() + "/"; s += d.getYear(); return s;

}

结果：今天日期是：7/17/2010

242、输出今天的日期，以 YYYY-MM-DD 的方式，比如今天是 2014 年 9 月 26 日，

则输出 2014-09-26

var d = new Date();

// 获取年，getFullYear()返回 4 位的数字var year = d.getFullYear();

// 获取月，月份比较特殊，0 是 1 月，11 是 12 月

var month = d.getMonth() + 1;

// 变成两位

month = month < 10 ? '0' + month : month;

// 获取日

var day = d.getDate();

day = day < 10 ? '0' + day : day; alert(year + '-' + month + '-' + day);

243、已知数组 var?stringArray?=?[“This”,?“is”,?“Baidu”,?“Campus”]， Alert 出”This?is?Baidu?Campus”。

答案：alert(stringArray.join(“”))

244、已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示法”getElementById”。

function combo(msg){ var arr=msg.split("-");

for(var i=1;i<arr.length;i++){ arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

}

msg=arr.join(""); return msg;

}

245、.varnumberArray=[3,6,2,4,1,5]; （考察基础 API）

1)实现对该数组的倒排，输出[5,1,4,2,6,3]

2)实现对该数组的降序排列，输出[6,5,4,3,2,1] function combo(msg){

var arr=msg.split("-"); for(var i=1;i<arr.length;i++){

arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);

}

msg=arr.join("");

return msg;

}

246、把两个数组合并，并删除第二个元素。

var array1 = ['a','b','c'];

var bArray = ['d','e','f']; var cArray = array1

247、如何消除一个数组里面重复的元素？

var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];

function deRepeat(){ var newArr=[];

var obj={}; var index=0;

var l=arr.length; for(var i=0;i<l;i++){

if(obj[arr[i]]==undefined)

{

obj[arr[i]]=1; newArr[index++]=arr[i];

}

else if(obj[arr[i]]==1)

}

return newArr;

}

var newArr2=deRepeat(arr); alert(newArr2); //输出 1,2,3,4,5,6,9,25

248、用 js 实现随机选取 10–100 之间的 10 个数字，存入一个数组，并排序。

var iArray = [];

funtion getRandom(istart, iend){

var iChoice = istart - iend +1;

return Math.floor(Math.random() * iChoice + istart;

}

for(var i=0; i<10; i++){ iArray.push(getRandom(10,100));

}

iArray.sort();

249、正则表达式构造函数 var reg=new RegExp(“xxx”)与正则表达字面量 var

reg=//有什么不同？匹配邮箱的正则表达式？

答案：当使用 RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\\表示一个\）。使用正则表达字面量的效率更高。?

250、1 var regMail =

/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

正则表达式对象 3 – 清除空格

写一个 function，清除字符串前后的空格。（兼容所有浏览器） 使用自带接口 trim()，考虑兼容性：

if (!String.prototype.trim) { String.prototype.trim = function() {

return this.replace(/^\s+/, "").replace(/\s+$/,"");

} }

// test the function

var str = " \t\n test string ".trim(); alert(str == "test string"); // alerts "true"

251、数组和字符串

<script lang="JavaScript" type="text/javascript"> function outPut(s) {

document.writeln(s);

}

var a = "lashou"; var b = a;

outPut(b); a = "拉手"; outPut(a); outPut(b);

var a_array = [1, 2, 3]; var b_array = a_array; outPut(b_array); a_array[3] = 4; outPut(a_array); outPut(b_array);

</script> 输出结果：

答案：lashou 拉手 lashou 1,2,3 1,2,3,4 1,2,3,4

252、下列控制台都输出什么

第 1 题：

function setName(){

name="张三";

}

setName(); console.log(name); 答案："张三"

253、第 2 题：

//考点：1、变量声明提升 2、变量搜索机制var a=1;

function test(){ console.log(a); var a=1;

}

test();

答案：undefined

254、第 3 题：

var b=2; function test2(){

window.b=3;

console.log(b);

}

test2(); 答案：3

255、第 4 题：

c=5;//声明一个全局变量 c function test3(){

window.c=3;

console.log(c); 并且没有被赋值

var c;

//答案：undefined，原因：由于此时的 c 是一个局部变量 c，

console.log(window.c);//答案：3，原因：这里的 c 就是一个全局变量 c

}

test3();

256、第 5 题：

var arr = []; arr[0] = 'a';

arr[1] = 'b';

arr[10] = 'c'; alert(arr.length); //答案：11

console.log(arr[5]); //答案：undefined

257、第 6 题：

var a=1; console.log(a++); console.log(++a);

//答案：1

//答案：3

258、第 7 题：

console.log(null==undefined); //答案：true

console.log("1"==1);

console.log("1"===1);

259、第 8 题：

typeof 1; "number"

//答案：true，因为会将数字 1 先转换为字符串 1

//答案：false，因为数据类型不一致

typeof "hello"; typeof /[0-9]/;

typeof {};

typeof null;

"string"

"object" "object"

"object"

typeof undefined; typeof [1,2,3];

"undefined" "object"

typeof function(){};

//"function"

260、第 9 题：

parseInt(3.14); //3 parseFloat("3asdf"); parseInt("1.23abc456"); parseInt(true);//"true" NaN

261、第 10 题：

//考点：函数声明提前function bar() {

return foo;

foo = 10; function foo() {}

//var foo = 11;

//3

}

alert(typeof bar());//"function"

262、第 11 题：考点：函数声明提前

var foo = 1; function bar() {

foo = 10;

return;

function foo() {}

}

bar();

alert(foo);//答案：1

263、第 12 题：

console.log(a);//是一个函数var a = 3;

function a(){} console.log(a);////3

264、第 13 题：

//考点：对 arguments 的操作function foo(a) {

arguments[0] = 2;

alert(a);//答案：2，因为：a、arguments 是对实参的访问，b、通过 arguments[i] 可以修改指定实参的值

}

foo(1);

265、第 14 题： function foo(a) {

alert(arguments.length);//答案：3，因为 arguments 是对实参的访问

}

foo(1, 2, 3);

266、第 15 题

bar();//报错

var foo = function bar(name) { console.log("hello"+name); console.log(bar);

};

//alert(typeof bar); foo("world");//"hello" console.log(bar);//undefined console.log(foo.toString());

bar();//报错

267、第 16 题

function test(){ console.log("test 函数");

}

setTimeout(function(){ console.log("定时器回调函数");

}, 0)

test(); function foo(){

var name="hello";

}

三、Jquery

1、jQuery 的 slideUp 动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?

四、HTML5 CSS3

1、CSS3 有哪些新特性？

1. CSS3 实现圆角（border-radius），阴影（box-shadow），
2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） 3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
3. 增加了更多的 CSS 选择器 多背景 rgba
4. 在 CSS3 中唯一引入的伪元素是 ::selection.
5. 媒体查询，多栏布局
6. border-image

2、html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性：

1. 拖拽释放(Drag and drop) API

1. 语义化更好的内容标签（header,nav,footer,aside,article,section）
2. 音频、视频 API(audio,video)
3. 画布(Canvas) API
4. 地理(Geolocation) API
5. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
6. sessionStorage 的数据在浏览器关闭后自动删除
7. 表单控件，calendar、date、time、email、url、search
8. 新的技术 webworker, websocket, Geolocation 移除的元素：
9. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
10. 对可用性产生负面影响的元素：frame，frameset，noframes；

支持 HTML5 新标签：

1. IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架）：

<!--[if lt IE 9]>

<script> src=" http:// html5shim.googlecode.com /svn/trunk/html5.js "</script>

<![endif]--> 如何区分：

DOCTYPE 声明新增的结构元素、功能元素

3、本地存储（Local Storage ）和 cookies（储存在用户本地终端上的数据） 之间的区别是什么？

Cookies:服务器和客户端都可以访问；大小只有 4KB 左右；有有效期，过期后将会删除； 本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过 POST 或者 GET 的通道发送到服务器；每个域 5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用 Javascript 代码移除

4、如何实现浏览器内多个标签页之间的通信?

调用 localstorge、cookies 等本地存储方式

5、你如何对网站的文件和资源进行优化？

文件合并

文件最小化/文件压缩使用 CDN 托管

缓存的使用

6、什么是响应式设计？

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有 的人能在这些设备上让网站运行正常

7、新的 HTML5 文档类型和字符集是？

答：HTML5 文档类型：<!doctype html>

HTML5 使用的编码<meta charset=”UTF-8”>

8、HTML5 Canvas 元素有什么用？

答：Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

9、HTML5 存储类型有什么区别？

答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer

API、Command API、Constraint Validation API、History API

10、用 H5+CSS3 解决下导航栏最后一项掉下来的问题

11、CSS3 新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

12、请用 CSS 实现：一个矩形内容，有投影，有圆角，hover 状态慢慢变透明。

css 属性的熟练程度和实践经验

13、描述下 CSS3 里实现元素动画的方法

动画相关属性的熟悉程度

14、html5\CSS3 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。

* 绘画 canvas 元素

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search

CSS3 实现圆角，阴影，对文字加特效，增加了更多的 CSS 选择器 多背景 rgba 新的技术 webworker, websockt, Geolocation

移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u； 对可用性产生负面影响的元素：frame，frameset，noframes；

• 是 IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签， 可以利用这一特性让这些浏览器支持 HTML5 新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

• 当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

<!--[if lt IE 9]>

<script> src=" http:// html5shim.googlecode.com /svn/trunk/html5.js "</script>

<![endif]-->

15、你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?

• 首先划分成头部、body、脚部；。。。。。
• 实现效果图是最基本的工作，精确到 2px； 与设计师，产品经理的沟通和项目的参与做好的页面结构，页面重构和用户体验

处理 hack，兼容、写出优美的代码格式针对服务器的优化、拥抱 HTML5。

16、你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏 览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从 一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功 能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点 “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被

认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对

象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无

妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被 直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作， 还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强” 成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

那么问题了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃 CSS3），你会如何说服他？

17、为什么利用多个域名来存储网站资源会更有效？

CDN 缓存更方便

突破浏览器并发限制节约 cookie 带宽

节约主域名的连接数，优化页面响应速度防止不必要的安全问题

18、请谈一下你对网页标准和标准制定机构重要性的理解。

（无标准答案）网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG、安全问题，最终提高网站易用性。

19、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage 和 cookie 的区别

Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie 的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。

除此之外， Web Storage 拥有 setItem,getItem,removeItem,clear 等方法， 不像cookie 需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而Web Storage 仅仅是为了在本地“存储”数据而生。

20、知道 css 有个 content 属性吗？有什么作用？有什么应用？

知道。css 的 content 属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。

//一种常见利用伪类清除浮动的代码

.clearfix:after {

content:"."; //这里利用到了 content 属性display:block;

height:0;

; clear:both; }

.clearfix {

*zoom:1;

}

after 伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用

clear:both 清除浮动。

那么问题继续还有，知道 css 计数器（序列数字字符自动递增）吗？如何通过css content 属性实现 css 计数器？

答案：css 计数器是通过设置 counter-reset 、counter-increment 两个属性 、及counter()/counters()一个方法配合 after / before 伪类实现。

21、如何在 HTML5 页面中嵌入音频?

HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：

<audio controls>

<source src="jamshed.mp3" type="audio/mpeg">

Your browser does'nt support audio embedding feature.

</audio>

22、如何在 HTML5 页面中嵌入视频？

和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：

<video width="450" height="340" controls>

<source src="jamshed.mp4" type="video/mp4">

Your browser does'nt support video embedding feature.

</video>

23、HTML5 引入什么新的表单属性？

Datalist emailurl

datetime output keygen date month week time number range

24、CSS3 新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

25、(写)描述一段语义的 html 代码吧。

（HTML5 中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等） 就是基于语义化设计原则）

< div id="header">

< h1>标题< /h1>

< h2>专注 Web 前端技术< /h2>

< /div>

语义 HTML 具有以下特性：

文字包裹在元素中，用以反映内容。例如： 段落包含在 <p> 元素中。

顺序表包含在<ol>元素中。

从其他来源引用的大型文字块包含在<blockquote>元素中。

HTML 元素不能用作语义用途以外的其他目的。例如：

<h1>包含标题，但并非用于放大文本。

<blockquote>包含大段引述，但并非用于文本缩进。空白段落元素 ( <p></p> ) 并非用于跳行。

文本并不直接包含任何样式信息。例如： 不使用 <font> 或 <center> 等格式标记。类或 ID 中不引用颜色或位置。

cookie 在浏览器和服务器间来回传递。 sessionStorage 和 localStorage 区别

sessionStorage 和 localStorage 的存储空间更大；

sessionStorage 和 localStorage 有更多丰富易用的接口；

sessionStorage 和 localStorage 各自独立的存储空间；

27、html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

* 绘画 canvas

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search

新的技术 webworker, websockt, Geolocation

• 移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u； 对可用性产生负面影响的元素：frame，frameset，noframes；

支持 HTML5 新标签：

• IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签， 可以利用这一特性让这些浏览器支持 HTML5 新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

• 当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

<!--[if lt IE 9]>

<script> src=" http:// html5shim.googlecode.com /svn/trunk/html5.js "</script>

<![endif]-->

28、如何区分： DOCTYPE 声明\新增的结构元素\功能元素

29、语义化的理解？

用正确的标签做正确的事情！

html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 在没有样式 CCS 情况下也以一种文档格式显示，并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

30、HTML5 的离线储存？

localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 数据在浏览器关闭后自动删除。

31、写出 HTML5 的文档声明方式

<DOCYPE html>

32、HTML5 和 CSS3 的新标签

HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio... CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image, border-color, transform...;

33、自己对标签语义化的理解

在我看来，语义化就是比如说一个段落， 那么我们就应该用 <p>标签来修饰， 标题就应该用 <h?> 标签等。符合文档语义的标签。

五、移动 web 开发

1、移动端常用类库及优缺点

知识面宽度，多多益善

2、Zepto 库和 JQ 区别

Zepto 相对 jQuery 更加轻量，主要用在移动端，jQuery 也有对应的 jQuerymobile 移动端框架

六、Ajax

1、Ajax 是什么? 如何创建一个 Ajax？

Ajax 并不算是一种新的技术，全称是 asychronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早 期的浏览器并不能原生支持 ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对 ajax 的原生支持

使 用 ajax 原 生 方 式 发 送 请 求 主 要 通 过 XMLHttpRequest( 标 准 浏 览 器 ) 、ActiveXObject(IE 浏览器)对象实现异步通信效果

基本步骤：

var xhr =null;//创建对象if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.open(“方式”,”地址”,”标志位”);//初始化请求

xhr.setRequestHeader(“”,””);//设置 http 头信息 xhr.onreadystatechange =function(){}//指定回调函数

xhr.send();//发送请求

js 框架（jQuery/EXTJS 等）提供的 ajax API 对原生的 ajax 进行了封装，熟悉了基础理论，再学习别的框架就会得心应手，好多都是换汤不换药的内容

2、同步和异步的区别?

同步：阻塞的

-张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭

=浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面

异步：非阻塞的

-张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃

=浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面）， 服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

3、如何解决跨域问题?

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

出于安全考虑，服务器不允许 ajax 跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建 script 标签，使用标签的 src 属性访问 js 文件的形式获取 js 脚本，并且这个 js 脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的 数据，这就是解决跨域问题的主流解决方案

4、页面编码和被请求的资源编码如果不一致如何处理？

对于 ajax 请求传递的参数，如果是 get 请求方式，参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式不同，所以对于 get 请求的参数需要使用encodeURIComponent 函数对参数进行编码处理，后台开发语言都有相应的解码 api。对于 post 请求不需要

进行编码

5、简述 ajax 的过程。

1. 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
3. 设置响应 HTTP 请求状态变化的函数
4. 发送 HTTP 请求
5. 获取异步调用返回的数据
6. 使用 JavaScript 和 DOM 实现局部刷新




6、阐述一下异步加载。

1. 异步加载的方案： 动态插入 script 标签
2. 通过 ajax 去获取 js 代码，然后通过 eval 执行
3. script 标签上添加 defer 或者 async 属性
4. 创建并插入 iframe，让它异步执行 js

7、请解释一下 JavaScript 的同源策略。




同源策略是客户端脚本（尤其是 Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的




是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源 的窗口和文档的属性。




8、GET 和 POST 的区别，何时使用 POST？

GET：一般用于信息获取，使用 URL 传递参数，对所发送信息的数量也有限制，一般在

2000 个字符，有的浏览器是 8000 个字符POST：一般用于修改服务器上的资源，对所发送的信息没有限制在以下情况中，请使用 POST 请求：

1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

9、ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?

1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax 在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。







10、 Ajax 的最大的特点是什么。




Ajax 可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源；




11、ajax 的缺点




1、ajax 不支持浏览器 back 按钮。2、安全问题 AJAX 暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

12、ajax 请求的时候 get 和 post 方式的区别






get 一般用来进行查询操作，url 地址有长度限制，请求的参数都暴露在 url 地址当中， 如果传递中文参数，需要自己进行编码操作，安全性较低。

post 请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于 http 请求体中，数据不会暴漏在 url 地址中。




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






Jsonp 并不是一种数据格式，而 json 是一种数据格式，jsonp 是用来解决跨域获取数据的一种解决方案，具体是通过动态创建 script 标签，然后通过标签的 src 属性获取 js 文件中的 js 脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是 ajax 技术




14、什么是 Ajax 和 JSON，它们的优缺点。






Ajax 是全称是 asynchronous JavaScript andXML，即异步 JavaScript 和 xml，用于在

Web 页面中实现异步数据交互，实现页面局部刷新。

优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用 户不断刷新或者跳转页面，提高用户体验

缺点：对搜索引擎不友好；要实现 ajax 下的前后退功能成本较大；可能造成请求数的增加跨域问题限制；

JSON 是一种轻量级的数据交换格式，ECMA 的一个子集

优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类 型（数组、对象、字符串、数字）




15、http 常见的状态码有那些？分别代表是什么意思？




200

- 请求成功

301

- 资源（网页等）被永久转移到其它 URL

404

- 请求的资源（网页等）不存在

500

- 内部服务器错误




16、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为 4 个步骤：

1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由 客户端发出该请求已经被接受的报文。
3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
4. 此时，Web 服务器提供资源服务，客户端开始下载资源。












get 一般用来进行查询操作，url 地址有长度限制，请求的参数都暴露在 url 地址当中， 如果传递中文参数，需要自己进行编码操作，安全性较低。

post 请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于 http 请求体中，数据不会暴漏在 url 地址中。




18、ajax 请求时，如何解释 json 数据




使用 eval() 或者 JSON.parse() 鉴于安全性考虑，推荐使用 JSON.parse()更靠谱，对数据的安全性更好。




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




本地对象为独立于宿主环境的 ECMAScript 提供的对象，包括 Array Object RegExp 等可以 new 实例化的对象

内置对象为 Gload，Math 等不可以实例化的(他们也是本地对象，内置对象是本地对象的一个子集)

宿主对象为所有的非本地对象，所有的 BOM 和 DOM 对象都是宿主对象，如浏览器自带的

document,window 等对象

20、为什么利用多个域名来存储网站资源会更有效？




确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他郁 闷访问网站，并且不同的资源放到不同的服务器上有利于减轻单台服务器的压力。




21、请说出三种减低页面加载时间的方法

1、压缩 css、js 文件

2、合并 js、css 文件，减少 http 请求

3、外部 js、css 文件放在最底下

4、减少 dom 操作，尽可能用变量替代不必要的 dom 操作

22、HTTP 状态码都有那些。




200

OK //客户端请求成功

400

Bad Request //客户端请求有语法错误，不能被服务器所理解

403

Forbidden //服务器收到请求，但是拒绝提供服务

404

Not Found //请求资源不存在，输入了错误的 URL

500

Internal Server Error //服务器发生不可预期的错误

503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常









七、JS 高级

1、JQuery 一个对象可以同时绑定多个事件，这是如何实现的？

jQuery 可以给一个对象同时绑定多个事件，低层实现方式是使用 addEventListner 或

attachEvent 兼容不同的浏览器实现事件的绑定，这样可以给同一个对象注册多个事件。




2、知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么?




Webkit 是浏览器引擎，包括 html 渲染和 js 解析功能，手机浏览器的主流内核，与之相对应的引擎有 Gecko（Mozilla Firefox 等使用）和 Trident（也称 MSHTML，IE 使用）。

对于浏览器的调试工具要熟练使用，主要是页面结构分析，后台请求信息查看，js 调试工具使用，熟练使用这些工具可以快速提高解决问题的效率




3、如何测试前端代码? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?




了解 BDD 行为驱动开发与 TDD 测试驱动开发已经单元测试相关概念， 4、 前端 templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

Web 模板引擎是为了使用户界面与业务数据（内容）分离而产生的，

Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在Javascript、PHP、Python、Perl 等多种编程语言中。

Underscore 封装了常用的 JavaScript 对象操作方法，用于提高开发效率。

Handlebars 是 JavaScript 一个语义模板库，通过对 view 和 data 的分离来快速构建

Web 模板。

5、简述一下 Handlebars 的基本用法？

没有用过的话说出它是干什么的即可




6、简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？

学习技术不仅要会用，还有熟悉它的实现机制，这样在开发中遇到问题时才能更好的解决

7、用 js 实现千位分隔符?

原生 js 的熟练度，实践经验，实现思路

8、检测浏览器版本版本有哪些方式？

IE 与标准浏览器判断，IE 不同版本的判断，userAgent var ie = /*@cc_on !@*/false;




9、我们给一个 dom 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获

对两种事件模型的理解

10、实现一个函数 clone，可以对 JavaScript 中的 5 种主要的数据类型（包括

Number、String、Object、Array、Boolean）进行值复制






考察点 1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚

考察点 2：是否知道如何判断一个变量是什么类型的考察点 3：递归算法的设计

// 方法一：

Object.prototype.clone = function(){

var o = this.constructor === Array ? [] : {}; for(var e in this){

o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];

}

return o;

}

//方法二：

/**

• 克隆一个对象
• @param Obj
• @returns

*/

function clone(Obj) {

var buf;

if (Obj instanceof Array) {

buf = [];//创建一个空的数组var i = Obj.length;

while (i--) {

buf[i] = clone(Obj[i]);

}

return buf;

}else if (Obj instanceof Object){ buf = {};//创建一个空对象

for (var k in Obj) { //为这个对象添加新的属性buf[k] = clone(Obj[k]);

}

return buf;

}else{ //普通变量直接赋值return Obj;




}

}




11、如何消除一个数组里面重复的元素？

var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];

function deRepeat(){

var newArr=[]; var obj={}; var index=0;

var l=arr.length; for(var i=0;i<l;i++){

if(obj[arr[i]]==undefined)

{

obj[arr[i]]=1;

newArr[index++]=arr[i];

}

else if(obj[arr[i]]==1) continue;

}

return newArr;

}

var newArr2=deRepeat(arr);

alert(newArr2); //输出 1,2,3,4,5,6,9,25




12、小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：




function Dog() {

this.wow = function() {

alert(’Wow’);

}

this.yelp = function() {

this.wow();

}

}



小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承， 原型，setInterval）







function MadDog() {




this.yelp = function() {

var self = this;

setInterval(function() {

self.wow();

}, 500);

}

}

MadDog.prototype = new Dog();

//for test

var dog = new Dog(); dog.yelp();

var madDog = new MadDog(); madDog.yelp();




13、下面这个 ul，如何点击每一列的时候 alert 其 index?（闭包）

<ul id=”test”>

<li>这是第一条</li>

<li>这是第二条</li>

<li>这是第三条</li>

</ul>

// 方法一：

var lis=document.getElementById('2223').getElementsByTagName('li'); for(var i=0;i<3;i++)

{

lis[i].index=i;

lis[i].onclick=function(){

alert(this.index);

};

}

//方法二：

var lis=document.getElementById('2223').getElementsByTagName('li'); for(var i=0;i<3;i++){

lis[i].index=i;

lis[i].onclick=(function(a){ return function() {

alert(a);

}




})(i);

}




14、编写一个 JavaScript 函数，输入指定类型的选择器(仅需支持 id，class，

tagName 三种简单 CSS 选择器，无需兼容组合选择器)可以返回匹配的 DOM 节点， 需考虑浏览器兼容性和性能。






/*** @param selector {String} 传入的 CSS 选择器。* @return {Array}*/

var query = function(selector) { var reg = /^(#)?(\.)?(\w+)$/img;

var regResult = reg.exec(selector); var result = [];

//如果是 id 选择器if(regResult[1]) { if(regResult[3]) {

if(typeof document.querySelector === "function") { result.push(document.querySelector(regResult[3]));

}else {

result.push(document.getElementById(regResult[3]));

}

}

}

//如果是 class 选择器

else if(regResult[2]) { if(regResult[3]) {

if(typeof document.getElementsByClassName === 'function') { var doms = document.getElementsByClassName(regResult[3]); if(doms) {

result = converToArray(doms);

}

}

//如果不支持 getElementsByClassName 函数

else {

var allDoms = document.getElementsByTagName("*") ; for(var i = 0, len = allDoms.length; i < len; i++) {

if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) { result.push(allDoms[i]);

}




}

}

}

}

//如果是标签选择器

else if(regResult[3]) {

var doms = document.getElementsByTagName(regResult[3].toLowerCase()); if(doms) {

result = converToArray(doms);

}

}

return result;

}

function converToArray(nodes){ var array = null;

try{

array = Array.prototype.slice.call(nodes,0);//针对非 IE 浏览器

}catch(ex){

array = new Array();

for( var i = 0 ,len = nodes.length; i < len ; i++ ) { array.push(nodes[i])

}

}

return array;

}




15、请评价以下代码并给出改进意见。

if(window.addEventListener){

var addListener = function(el,type,listener,useCapture){ el.addEventListener(type,listener,useCapture);

};

}

else if(document.all){

addListener = function(el,type,listener){

el.attachEvent("on"+type,function(){ listener.apply(el);

});

}




}



不应该在 if 和 else 语句中声明 addListener 函数，应该先声明；

不需要使用 window.addEventListener 或 document.all 来进行检测浏览器，应该使用能力检测；

由于 attachEvent 在 IE 中有 this 指向问题，所以调用它时需要处理一下















改进如下：

function addEvent(elem, type, handler){ if(elem.addEventListener){

elem.addEventListener(type, handler, false);

}else if(elem.attachEvent){

elem['temp' + type + handler] = handler; elem[type + handler] = function(){ elem['temp' + type + handler].apply(elem);

};

elem.attachEvent('on' + type, elem[type + handler]);

}else{

elem['on' + type] = handler;

}

}




16、给 String 对象添加一个方法，传入一个 string 类型的参数，然后将 string 的每个字符间价格空格返回，例如：






addSpace(“hello world”) // -> ‘h e l l o w o r l d’

String.prototype.spacify = function(){

return this.split('').join(' ');

};






接着上述问题答案提问，1）直接在对象的原型上添加方法是否安全？尤其是在 Object 对象上。(这个我没能答出？希望知道的说一下。) 2）函数声明与函数表达式的区别？

答案：在 js 中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于 函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

17、定义一个 log 方法，让它可以代理 console.log 的方法。






可行的方法一：

function log(msg) {




console.log(msg);

}

log("hello world!") // hello world!



如果要传入多个参数呢？显然上面的方法不能满足要求，所以更好的方法是：




function log(){

console.log.apply(console, arguments);

};



到此，追问 apply 和 call 方法的异同。

对于 apply 和 call 两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象

替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数： apply 传入的

是一个参数数组，也就是将多个参数组合成为一个数组传入，而 call 则作为 call 的参数传入（从第二个参数开始）。 如 func.call(func1,var1,var2,var3)对应的 apply 写法为：

func.apply(func1,[var1,var2,var3]) 。

























18、在 Javascript 中什么是伪数组？如何将伪数组转化为标准数组？









伪数组（类数组）：无法直接调用数组方法或期望 length 属性有什么特殊的行为，但仍可

以对真正数组遍历方法来遍历它们。典型的是函数的 argument 参数，还有像调用getElementsByTagName,document.childNodes 之类的,它们都返回 NodeList 对象都属于伪

数组。可以使用 Array.prototype.slice.call(fakeArray)将数组转化为真正的 Array 对象。

假设接第八题题干，我们要给每个 log 方法添加一个”(app)”前缀，比如’hello world!’

->’(app)hello world!’。方法如下：




function log(){

var args = Array.prototype.slice.call(arguments); 数组方法，将 argument 转化为真正的数组

args.unshift('(app)'); console.log.apply(console, args);




//为了使用 unshift




};

19、对作用域上下文和 this 的理解，看下列代码：

var User = {

count: 1,

getCount: function() {




return this.count;

}

};




console.log(User.getCount()); var func = User.getCount;

console.log(func()); // what?



问两处 console 输出什么？为什么？

答案是 1 和 undefined。

func 是在 winodw 的上下文中被执行的，所以会访问不到 count 属性。

继续追问，那么如何确保 Uesr 总是能访问到 func 的上下文，即正确返回 1。正确的方法是

使用 Function.prototype.bind。兼容各个浏览器完整代码如下：

// what?

























Function.prototype.bind = Function.prototype.bind || function(context){ var self = this;

return function(){

return self.apply(context, arguments);

};

}

var func = User.getCount.bind(User);

console.log(func());




20、原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){}) 有什么不同？如何用原生 JS 实现 Jq 的 ready 方法？






window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕。

/*

• 传递函数给 whenReady()
• 当文档解析完毕且为操作准备就绪时，函数作为 document 的方法调用

*/




var whenReady = (function() { 函数

//这个函数返回 whenReady()




var funcs = []; var ready = false;

//当文档就绪时,调用事件处理程序function handler(e) {

//当获得事件时，要运行的函数

//当触发事件处理程序时,切换为 true










档尚未准备好'complete') {

if(ready) return; //确保事件处理程序只完整运行一次

//如果发生 onreadystatechange 事件，但其状态不是 complete 的话,那么文




if(e.type === 'onreadystatechange' && document.readyState !==




return;

}

//运行所有注册函数

//注意每次都要计算 funcs.length

//以防这些函数的调用可能会导致注册更多的函数for(var i=0; i<funcs.length; i++) {

funcs[i].call(document);

}

//事件处理函数完整执行,切换 ready 状态, 并移除所有函数ready = true;

funcs = null;

}













false);

//为接收到的任何事件注册处理程序if(document.addEventListener) {

document.addEventListener('DOMContentLoaded', handler, false);

document.addEventListener('readystatechange', handler,

//IE9+

window.addEventListener('load', handler, false);

}else if(document.attachEvent) { document.attachEvent('onreadystatechange', handler); window.attachEvent('onload', handler);




}

//返回 whenReady()函数

return function whenReady(fn) { if(ready) { fn.call(document); } else { funcs.push(fn); }

}

})();



如果上述代码十分难懂，下面这个简化版：




function ready(fn){

if(document.addEventListener) {//标准浏览器document.addEventListener('DOMContentLoaded', function() {










allee, false);

//注销事件, 避免反复触发document.removeEventListener('DOMContentLoaded',arguments.c




fn();//执行函数

}, false);




}else if(document.attachEvent) {//IE

document.attachEvent('onreadystatechange', function() { if(document.readyState == 'complete') {

document.detachEvent('onreadystatechange',




arguments.callee);




}

});

}

};




fn();//函数执行







21、（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生 JS）






回答出概念即可，下面是几个要点



1. 给需要拖拽的节点绑定 mousedown, mousemove, mouseup 事件
2. mousedown 事件触发后，开始拖拽
3. mousemove 时，需要通过 event.clientX 和 clientY 获取拖拽位置，并实时更新位置
4. mouseup 时，拖拽结束
5. 需要注意浏览器边界的情况







22、请实现如下功能












function setcookie(name,value,days){ var exp = new Date();

//给 cookie 增加一个时间变量




exp.setTime(exp.getTime() + days*24*60*60*1000); //设置过期时间为 days 天




document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

}

function getCookie(name){

var result = "";

var myCookie = ""+document.cookie+";"; var searchName = "+name+"=";

var startOfCookie = myCookie.indexOf(searchName); var endOfCookie;

if(satrtOfCookie != -1){

startOfcookie += searchName.length;

endOfCookie = myCookie.indexOf(";",startOfCookie); result = (myCookie.substring(startOfCookie,endOfCookie));

}

return result;

}

(function(){

var oTips = document.getElementById('tips');//假设 tips 的 id 为 tips var page = {

check: function(){//检查 tips 的 cookie 是否存在并且允许显示var tips = getCookie('tips');

if(!tips || tips == 'show') return true;//tips 的 cookie 不存在if(tips == "never_show_again") return false;

},

hideTip: function(bNever){

if(bNever) setcookie('tips', 'never_show_again', 365); oTips.style.display = "none";//隐藏

},

showTip: function(){

oTips.style.display = "inline";//显示，假设 tips 为行级元素

},

init: function(){ var _this = this; if(this.check()){

_this.showTip(); setcookie('tips', 'show', 1);

}

oTips.onclick = function(){

_this.hideTip(true);




};

}

};

page.init();

})();

23、说出以下函数的作用是？空白区域应该填写什么？

//define (function(window){

function fn(str){

this.str=str;

}




fn.prototype.format = function(){ var arg = ;

return this.str.replace( ,function(a,b){ return arg[b]||"";

});

}

window.fn = fn;

})(window);




//use (function(){

var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>'); console.log(t.format(' http://www. alibaba.com ','Alibaba','Welcome'));

})();
















24、 Javascript 作用链域?



答案：访函数的作用是使用 format 函数将函数的参数替换掉{0}这样的内容，返回一个格式

化后的结果：

第一个空是：arguments

第二个空是：/\{(\d+)\}/ig




理解变量和函数的访问范围和生命周期，全局作用域与局部作用域的区别，JavaScript 中没有块作用域，函数的嵌套形成不同层次的作用域，嵌套的层次形成链式形式，通过作用 域链查找属性的规则需要深入理解。




25、 谈谈 This 对象的理解。

理解不同形式的函数调用方式下的 this 指向，理解事件函数、定时函数中的 this 指向， 函数的调用形式决定了 this 的指向。




26、 eval 是做什么的？




它的功能是把对应的字符串解析成 JS 代码并运行；应该避免使用 eval，不安全，非常耗性能（2 个步骤，一次解析成 js 语句，一次执行）




27、 关于事件，IE 与火狐的事件机制有什么区别？ 如何阻止冒泡？

[1].在 IE 中,事件对象是作为一个全局变量来保存和维护的.所有的浏览器事件,不管是用户触发的， 还是其他事件, 都会更新 window.event 对象. 所以在代码中， 只要调用

window.event 就可以获取事件对象， 再 event.srcElement 就可以取得触发事件的元素进行进一步处理.

[2].在 FireFox 中，事件对象却不是全局对象，一般情况下，是现场发生，现场使用，FireFox 把事件对象自动传给事件处理程序.

关于事件的兼容性处理要熟练掌握，事件对象具体哪些属性存在兼容性问题，IE 与标准事件模型事件冒泡与事件捕获的支持要理解