面试题

来源：互联网发布：wow 1.12数据库编辑：程序博客网时间：2024/06/02 01:28

为什么离开上家公司？
当时我还是很喜欢这家企业的，但是因为后来公司的业务出现了新的调整（转型了）所以我接受了离职！
主要是因为职业发展与预期有了偏颇，其次合同刚好到期。

说一下你对web前端的看法？
前端开发是一个新兴职业，相信随着互联网的发展，会有越来越多的公司把前端工作分离出来，
各个招聘网站不断增长的前端开发职位需求也说明了这一点。因此，个人认为前端开发不仅有前途，更有钱途。

愿意加班吗？
我认为工作需要时偶尔加班时很正常的，但是经常加班的话，那说明是不是我的工作效率太低，而且加班公司还要另付加班费，
对公司也是一种很不好的现象，所以在以后的工作中我会提高效率的，争取把份内的事在工作时间处理完。

谈一下你的职业规划。
资深WEB架构师
说功利点儿，我喜欢这个方向，既兼顾了工作的单纯性、又能够减少实际的工作量能腾出更多时间钻研技术。
虽然说WEB前端工程师遇到较多的情况是总是反复编写着同样的代码，总是面对着同样的技术和产品，容易感觉枯燥。
但是我们拥有最为广泛的WEB相关知识沉淀，使得我们更加容易成为一名架构师。

你工作中经常上的一些技术网站是哪些？
stack overflow.com
github.com
aol.com(谷歌)
百度

你上家公司主要做哪一类场品？
pc端移动端都接触过！

你上家公司一共多少人啊？
50，60人吧

你现在在职还是离职状态？
离职

你在上一家公司主要负责什么？
主要负责网站的建设与维护，公司Web产品前端UI开发的HTML、CSS、JavaScript部分，和WEB后端工程师协作完成产品实现等等。

碰到一个技术难题你是怎么解决的？
查找资料，向同事请教！上一些技术网站。。

你都用过什么开发工具？
sublime-text Notepad++ Dreamweaver ps phpstore

谈一谈你对互联网的看法。
互联网行业相对传统行业,算是新行业;现在创业公司很多;Web 前端工程师又是一个...

前端技术里面你最擅长什么？
切页面公共UI插件/组件封装调兼容性 bug修复后端接口调用与后端工程师沟通静态页面转后台页面

后端技术你最擅长什么？
php 增删改查

怎么跨域？

我一般都使用jsonp

jsonp的原理是？

jsonp原理是利用script标签src的跨域能力，服务器端的接口会接收一个callback，跟着数据一起返回前端！

什么是ajax？
ajax是一种局部刷新的技术。就是在整个页面不跳转或不刷新的情况下跟服务器端进行通讯！

ajax的原理。
利用XMLHTTPRequest对象的实例，并且监听它的onreadysdatechange

你都用ajax做过些什么？
无刷新分页！瀑布流！

老版本的IE怎么创建XMLHTTPRequest对象？
ActiveXObject

谈一下你对jQuery的看法。
q是一个专注于DOM的类库！它可以设置，查找，运动，拼接，专注于DOM。还有无关类的模块！如：ajax！还有一些工具类的函数。

说一下你常用的css Hack

—（ie6） *（ie6，7）

什么是闭包？
内部函数反问外地函数的本地变量。

闭包的作用。
保存上下文的信息！

闭包有什么陷阱？

for循环中的fun，它本地变量只会存一部。解决：立即执行一个匿名函数，把外部的本地变量传给fun用，然后return出来

ajax交互流程。

客户端通过一些行为（失去焦点，）创建一个XMLHTTPRequest，发送请求到服务器，服务器去查询数据库，数据库返回结果给客户端。

给我谈一谈smarty！
smarty是php非常流行的一个模版引擎。它能够让显示的结构跟逻辑分离！

跟我谈一下什么是服务器端的MVC？

node.js接触过吗？它是什么玩意？能吃吗？
它类似php，asp.net,.net,jsp,他服务器用js写的一个平台。也可以web动态网页

npm是什么玩意？能喝吗？
node的一个包管理平台，上面有大量的优秀的开源框架/库

gulp是什么玩意？能飞吗？
构建工具，利用gulp的插件合并，压缩，打包，调试，美化，优化，分析。。就是代码js/css~~

/2，截取字符串abcdefg的efg
//alert('abcdefg'.substring(4));

//3，判断一个字符串中出现次数最多的字符，统计这个次数
/*var str = 'asdfssaaasasasasaa';
var json = {};

for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');*/

//4，IE与FF脚本兼容性问题
/*obj.addEventListener(sEv, fn, false);
obj.attachEvent('on'+sEv,fn);
detachevet
removeEventListener
DOMContentLoaded
onreadystatechange complete
DOMMouseScroll FF
onmousewheel 非FF
event.wheelDelta 上滚120 下-120
event.detail 上滚-3 下3
obj.getCurrentStyle[attr]
getComputedStyle(obj,false)[attr]
XMLHttpRequest
ActiveXObject('Mircorsoft.XMLHttp')
FF本地能设置读取cookie 其他不行
event ev
事件源
srcElement||target
toElement||relatedTarget
obj.setCapture();只有ie认
obj.releaseCapture();*/

//5，规避javascript多人开发函数重名问题
/*命名空间
封闭空间
js模块化mvc（数据层、表现层、控制层）
seajs
变量转换成对象的属性
对象化*/

//6，javascript面向对象中继承实现
/*function Person(name){
this.name = name;
}

Person.prototype.showName = function(){
alert(this.name);
}

function Worker(name, job){
Person.apply(this,arguments)
this.job = job;
}
for(var i in Person.prototype){
Worker.prototype = Person.prototype;
}
new Worker('sl', 'coders').showName();*/

//7，FF下面实现outerHTML
/*var oDiv = document.createElement('div');
var oDiv1 = document.getElementById('div1');
var oWarp = document.getElementById('warp');

oWarp.insertBefore(oDiv, oDiv1);
oDiv.appendChild(oDiv1);
var sOut = oDiv.innerHTML;
oWarp.insertBefore(oDiv1, oDiv);
oWarp.removeChild(oDiv);
alert(sOut);*/

//8，编写一个方法求一个字符串的字节长度;
//假设一个中文占两个字节
/*var str = '22两是';

alert(getStrlen(str))

function getStrlen(str){
var json = {len:0};
var re = /[\u4e00-\u9fa5]/;
for (var i = 0; i < str.length; i++) {
if(re.test(str.charAt(i))){
json['len']++;
}
};
return json['len']+str.length;
}*/

//9，编写一个方法去掉一个数组的重复元素
/*var arr = [1,2,3,1,43,12,12,1];
var json = {};
var arr2 = [];
for (var i = 0; i < arr.length; i++) {
if(!json[arr[i]]){
json[arr[i]] = true;
}else{
json[arr[i]] = false;
}

if(json[arr[i]]){
arr2.push(arr[i]);
}
};

for (var i = 0; i < arr.length; i++) {
if(!aa(arr[i], arr2)){
arr2.push(arr[i])
}
};
function aa(obj, arr){
for (var i = 0; i < arr.length; i++) {
if(arr[i] == obj) return true;
else return false;
};
}
alert(arr2)*/

//10，写出3个使用this的典型应用
/*
事件：如onclick this->发生事件的对象
构造函数 this->new 出来的object
call/apply 改变this*/

//11、如何深度克隆
/*var arr = [1,2,43];
var json = {a:6,b:4,c:[1,2,3]};
var str = 'sdfsdf';

var json2 = clone(json);

alert(json['c'])
function clone(obj){
var oNew = new obj.constructor(obj.valueOf());
if(obj.constructor == Object){
for(var i in obj){
oNew[i] = obj[i];
if(typeof(oNew[i]) == 'object'){
clone(oNew[i]);
}
}
}
return oNew;
}*/

//12，JavaScript中如何检测一个变量是一个String类型？请写出函数实现
// typeof(obj) == 'string'
// obj.constructor == String;

//13，网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
/*var oDate = new Date();
var oYear = oDate.getFullYear();

var oNewDate = new Date();
oNewDate.setFullYear(oYear, 11, 31, 23, 59, 59);
var iTime = oNewDate.getTime()-oDate.getTime();

var iS = iTime/1000;
var iM = oNewDate.getMonth()-oDate.getMonth();
var iDate =iS*/

//2.你能描述一下你制作一个网页的工作流程吗？

//3.你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强是向前（上）兼容,优雅降级是向下兼容
渐进增强是保证基本效果的情况下增强效果，优雅降级是保证最恶劣情况下的基本效果

//4. 请解释一下什么是语义化的HTML。
//内容使用特定标签，通过标签就能大概了解整体页面的布局分布

//6. 你如何对网站的文件和资源进行优化？

//7. 为什么利用多个域名来存储网站资源会更有效？
//确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他郁闷访问网站

//8.请说出三种减低页面加载时间的方法
/*1、压缩css、js文件
2、合并js、css文件，减少http请求
3、外部js、css文件放在最底下
4、减少dom操作，尽可能用变量替代不必要的dom操作*/

//9.什么是FOUC？你如何来避免FOUC？
/*由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏
用link加载css文件，放在head标签里面*/

//10.文档类型的作用是什么？你知道多少种文档类型？
/*影响浏览器对html代码的编译渲染
html2.0
xHtml
html5*/

//11.浏览器标准模式和怪异模式之间的区别是什么？
//盒模型解释不同

//1.* 你使用过那些Javascript库？
//jquery seajs yui jqmobile

//2.哈希表
//具有散列（映射）特性的数据模型

//3.闭包
//子函数能被外部调用到，则该作用连上的所有变量都会被保存下来。

//4.请解释什么是Javascript的模块模式，并举出实用实例。
/*js模块化mvc（数据层、表现层、控制层）
seajs
命名空间*/

//5.你如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？
/*对内：模块模式
对外：继承*/

//9* 你如何优化自己的代码？
/*代码重用
避免全局变量（命名空间，封闭空间，模块化mvc..）
拆分函数避免函数过于臃肿
注释
*/

//10.你能解释一下JavaScript中的继承是如何工作的吗？
/*子构造函数中执行父构造函数，并用call\apply改变this
克隆父构造函数原型上的方法*/

//11.useraget.nav

//12.请尽可能详尽的解释AJAX的工作原理。
/*创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
判断数据传输方式(GET/POST)
打开链接 open()
发送 send()
当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数*/

sessionstorage，localstorage和cookie之间的区别
共同点：都是保存在浏览器端，且同源的。

区别：cookie，容量4kb，默认各种浏览器都支持，缺陷就是每次请求，浏览器都会把本机存的cookies发送到服务器，无形中浪费带宽。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

与Cookie相比，Web Storage存在不少的优势，概括为以下几点：

1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
与Cookie相比，Web Storage存在不少的优势，概括为以下几点：

1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

AJAX的优缺点！
优点：减轻服务器的负担,按需取数据,最大程度的减少冗余请求
局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
基于xml标准化,并被广泛支持,不需安装插件等
进一步促进页面和数据的分离
缺点：AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.
AJAX只是局部刷新,所以页面的后退按钮是没有用的.
对流媒体还有移动设备的支持不是太好等

URL组成
第一部分是协议（或称为服务方式）；
第二部分是存有该资源的主机IP地址（有时也包括端口号）；
第三部分是主机资源的具体地址。，如目录和文件名等。
第一部分和第二部分之间用“：//”符号隔开，第二部分和第三部分用“/”符号隔开。第一部分和第二部分是不可缺少的，第三部分有时可以省略。

url需要过滤什么字符？
在URL传递参数中，有一些特殊字符，而这些些符号在URL中是不能直接传递的，如果要在URL中传递这些特殊符号，那么就要使用他们的编码了。
下表中列出了一些URL特殊符号及编码十六进制值
1. + URL 中+号表示空格 %2B
2. 空格 URL中的空格可以用+号或者编码 %20
3. / 分隔目录和子目录 %2F
4. ? 分隔实际的 URL 和参数 %3F
5. % 指定特殊字符 %25
6. # 表示书签 %23
7. & URL 中指定的参数间的分隔符 %26
8. = URL 中指定参数的值 %3D
解决的方法：
replace() 方法如果直接用str.replace("-","!") 只会替换第一个匹配的字符.
而str.replace(/\-/g,"!")则可以替换掉全部匹配的字符(g为全局标志)。
replace()
js中替换字符变量如下：
data2=data2.replace(/\%/g,"%25");
data2=data2.replace(/\#/g,"%23");
data2=data2.replace(/\&/g,"%26");

http状态码
1XX 表示消息
2XX 表示成功
3XX 表示重定向
4XX 表示请求错误
5XX 表示服务器端错误
200 OK
表示请求成功一切正常
301 Moved Permanently
重定向，客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL
302 Found
临时重定向，类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。
304 Not Modified
客户端有缓冲的文档并发出了一个条件性的请求。服务器告诉客户，原来缓冲的文档还可以继续使用。
400 Bad Request
请求出现语法错误。
403 Forbidden
资源不可用。
404 Not Found
无法找到指定位置的资源。
405 Method Not Allowed
请求方法（GET、POST、HEAD、Delete、PUT、TRACE等）对指定的资源不适用。
500 Internal Server Error
服务器遇到了意料不到的情况，不能完成客户的请求。
501 Not Implemented
服务器不支持实现请求所需要的功能。

Websocket与WebService有什么区别?
Websocket 是tcp/ip 协议用于客户端，对等网等，WebService 是http协议，网站里经常用到这个，他们都是数据传输的一种方式。

请分别写出window和document的属性和方法（至少3个）
window.open(URL,窗口名称,窗口风格) 功能：打开一个新的窗口，并在窗口中装载指定URL地址的网页window.confirm(提示字符串) 功能：显示一个确认框，在确认框内显示提示字符串，当用户单击“确定”按钮
window.setTimeout(代码字符表达式,毫秒数) 功能：定时设置，当到了指定的毫秒数后，自动执行代码字符表达式。
window.confirm(提示字符串) 功能：显示一个确认框，在确认框内显示提示字符串，当用户单击“确定”按钮
window.setTimeout(代码字符表达式,毫秒数) 功能：定时设置，当到了指定的毫秒数后，自动执行代码字符表达式。
window属性
window.location=URL 功能：给出当前窗口的URL信息或指定打开窗口的URL。
window.closed 功能：closed属性用于返回指定窗口的实例是否已经关闭，如果关闭，返回true ，反之返回flase。
window.name=名称功能：返回窗口名称，这个名称是由window.open()方法创建新窗口时给定的。
window.history.属性 window对象的子对象history是javascript的核心对象之一，该属性包含了一个已访问过页面的名称和URL的数组
document方法
document.write() //动态向页面写入内容
document.getElementById(ID) //获得指定ID值的对象
cloneNode 返回当前节点的拷贝
removeChild 从子结点列表中删除指定的子节点
document属性
childNodes 存储节点的子节点列表(只读)
dataType 返回此节点的数据类型
firstChild 返回当前节点的第一个子节点(只读)
nodeName 返回节点的名字(只读)
parentNode 返回父节点(只读)

随机颜色

document.write('#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6));

从地址栏输入url会发生什么，从技术角度进行分析
1：浏览器查找域名的IP地址 2：浏览器给web服务器发送一个HTTP请求3：acebook服务的永久重定向响应4：浏览器跟踪重定向地址5：服务器“处理”请求6：服务器发回一个HTML响应7：浏览器开始显示HTML8：浏览器发送获取嵌入在HTML中的对象9：浏览器发送异步（AJAX）请求

http和https有什么区别?
在URL前加https://前缀表明是用SSL加密的。你的电脑与服务器之间收发的信息传输将更加安全。

Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。
http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。http的连接很简单,是无状态的,...

HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议
要比http协议安全

css hack

/* CSS属性级Hack */
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 */
*color:red; /* IE6、IE7 识别 */
+color:red; /* IE6、IE7 识别 */
*+color:red; /* IE6、IE7 识别 */
[color:red; /* IE6、IE7 识别 */
color:red\9; /* IE6、IE7、IE8、IE9 识别 */
color:red\0; /* IE8、IE9 识别*/
color:red\9\0; /* 仅IE9识别 */
color:red \0; /* 仅IE9识别 */
color:red!important; /* IE6 不识别!important*/
-------------------------------------------------------------
/* CSS选择符级Hack */
*html #demo { color:red;} /* 仅IE6 识别 */
*+html #demo { color:red;} /* 仅IE7 识别 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
:root #demo { color:red\9; } : /* 仅IE9识别 */
--------------------------------------------------------------
/* IE条件注释Hack */









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>标签选择
后者优先级高

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方式的区别
1: get是从服务器上获取数据，post是向服务器传送数据。
2:get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
3:在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

9.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

10.ajax请求时，如何解释json数据
使用eval parse 鉴于安全性考虑使用parse更靠谱
11.b继承a的方法
function A(x){
　　this.x = x;
}
A.prototype.a = "a";
function B(x,y){
　　this.y = y;
　　A.call(this,x);
}
B.prototype.b1 = function(){
　　alert("b1");
}
B.prototype = new A();
B.prototype.b2 = function(){
　　alert("b2");
}
B.prototype.constructor = B;
var obj = new B(1,3);

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.闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
http://blog.csdn.net/gaoshanwudi/article/details/7355794 此链接可查看（问这个问题的不是一个公司）

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

js部分：
1、JavaScript的原型、原型链是什么？

原型就是function中的prototype属性即构造方法的一个属性，该属性指向一个对象，构造方法创建的对象将继承这个对象，原型一般用于继承。
原型链是prototype可以指向另一构造方法创建的对象实现继承链

2、eval是什么？

eval是将字符串解析成js代码来运行，应该避免eval，不安全，而且性能低

3、null和undefined有什么区别

null表是没有对象，就内存未分配空间
undefined是空对象，分配了内存空间但里面是空的

4、js的基本数据类型

string object number null undefined boolean

5、js如何实现继承

原型和构造器
6、["1","2","3"].map(pareInt)的答案是多少
是1，NaN，NaN

7、this的理解

this是js的关键字，this指当前函数或变量所属的对象
this为调用时为全局变量global

8、事件是什么，IE和火狐的事件机制是什么？怎么阻止事件冒泡

事件是页面执行某个动作时触发的对应的方法
ie是事件冒泡，火狐是事件捕获
ev.stopPropagation()

9、闭包是什么，闭包的用途

闭包是调用函数内部变量的内部函数
闭包的用途一是可以调用内部变量，二是可以是内部变量一直存储在内存中
自执行匿名函数通常和闭包结合使用(function(a){})(i),这样外面i变量的后续改变不会影响里面a值的改变。

10、（严格模式）（了解）

11、new具体做了什么？

1、创建了空对象，并且this变量引用该对象，这个对象继承了构造方法的原型对象
2、属性和方法被加入到this引用的对象中
3、隐形返回this对象
12、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
hasOwnProperty

13、JSON 的了解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小 {'age':'12', 'name':'back'}

14、s延迟加载的方式有哪些？

defer和async、动态创建DOM方式（用得最多）、按需异步载入js

15、同步和异步的区别（了解）

16、如何解决跨域问题?

jsonp、 iframe、window.name、window.postMessage、document.domain、服务器上设置代理页面

17、模块化怎么做？立即执行函数,不暴露私有成员

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

18、MD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？（了解）

19、如何判断当前脚本运行在浏览器还是node环境中？（阿里）

通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中

20.那些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
21、针对 jQuery 的优化方法？
*基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。
*频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。
比如：var str=$("a").attr("href"); *for (var i = size; i < arr.length; i++) {}
for 循环每一次循环都查找了数组 (arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：
for (var i = size, length = arr.length; i < length; i++) {}

22、documen.write和 innerHTML的区别

document.write只能重绘整个页面
innerHTML可以重绘页面的一部分

23、.call() 和 .apply() 的区别？
call方法:
语法：call(thisObj，Object)
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
apply方法：
语法：apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象
24、”==”和“===”的不同
前者会自动转换类型
后者不会
25、document load 和 document ready 的区别
Document.onload是结构和样式加载完之后才执行js
Document.ready 没有这个方法在jQuery中有$().ready(function)
26、javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
27、解释jsonp的原理，以及为什么不是真正的ajax
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作
28、添加删除替换插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
29、数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

HTML
1、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档
严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。
行内元素有：a b span img input select strong（强调的语气）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
知名的空元素： <br> <hr> <img> <input> <link> <meta>
鲜为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

3、link 和@import 的区别是？
link属于XHTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
link方式的样式的权重高于@import的权重.

4、浏览器的内核分别是什么?
* IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

5、常见兼容性问题？
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.

* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
6、HTML5的离线储存？
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。

7、iframe有那些缺点？

*iframe会阻塞主页面的Onload事件；
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过javascript 动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
8、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie在浏览器和服务器间来回传递。
sessionStorage和localStorage不会 sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；
9、如何实现浏览器内多个标签页之间的通信? (阿里)
调用localstorge、cookies等本地存储方式
10、webSocket如何兼容低浏览器？(阿里)
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、基于 multipart 编码发送 XHR 、基于长轮询的 XHR

CSS

1、介绍一下CSS的盒子模型？
（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).

2、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li: nth – child）
* 可继承的样式： font-size font-family color, UL LI DL DD DT;
* 不可继承的样式：border padding margin width height ;
* 优先级就近原则，同权重情况下样式定义最近者为准;
* 载入样式以最后载入的定位为准;

优先级为:
!important > id > class > tag
important 比内联优先级高

3、如何居中div？
// 给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
4、如何居中一个浮动元素？
确定容器的宽高宽500 高 300 的层
设置层的外边距

.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
5、列出display的值，说明他们的作用。

block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。

6、position的值， relative和absolute定位原点是？
*absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
*relative：生成相对定位的元素，相对于其正常位置进行定位。
* static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。
* inherit 规定从父元素继承 position 属性的值。
7、CSS3有哪些新特性？
CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba
8、对BFC规范的理解？
（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）

9、使用 CSS 预处理器吗？喜欢那个？
SASS

10、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
11、display:inline-block 什么时候会显示间隙？(携程)
12、清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)
13、描述css reset的作用和用途。
Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们15:09 2016/6/1015:09 2016/6/1015:09 2016/6/1015:09 2016/6/1015:09 2016/6/10统一
14、解释css sprites，如何使用。
Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

0 0