前端常见面试题总结
你们觉得什么样的工作最不能一直做，我觉得是安逸。尤其是我们，没有五年八年经验的刚入行的。准备换工作，虽然工资不算低，但安逸是一种毒药，而且很容易上瘾。
css：
行内元素有哪些？块级元素有哪些
行内元素：span,a,b,img,input,strong,select,label,em,button
块级元素：div,ul,li,dl,dt,dd,p,h1-h6
2:css引入方式有哪些？link和@import的区别
link外部引入css，通过@import方式引入，行内样式引入，在head标签里放在标签引入
@import引入方式是@import url()
link是放在head标签里，通过
link会和dom结构一起加载，@import是先加载完dom以后才渲染页面，link是xhtml标签，没有兼容性问题，@import只能在ie6以上，link可以加载除了css以外的文件，@import只能加载css文件
3：前端页面有哪三层构成，分别是什么？作用是什么
前端页面有行为层，结构层，渲染层构成
结构层主要是由html或xhtml之类的标记语言负责创建
渲染层是由css负责创建
行为层是由javascript负责完成
html是搭建文档的结构，css是设置文档的呈现效果，行为层是用来完成用户交互
4：标签上title与alt属性的区别是什么?
title是关于元素的注释信息，主要是给用户解读，当鼠标放到文字或者图片上的时候有title文字提示
而alt主要用于img标签，它是图片在无法显示时的替代文本。比如网速太慢或者浏览器禁用图像等
5：描述css reset和css sprites的作用和用途
css reset是样式重置，作用主要是重置浏览器默认的css样式，不同的浏览器默认的样式会有出入，通过样式重置可以在不同的
浏览器中达到一致的效果
css sprites也叫css精灵，是一种css图像合成技术。是按照一定的顺序把很多个小图标合成一站图像的技术。通过该技术可以大大的减少网络请求次数，加快网页的加载速度。图片当成背景图，通过background-position来定位到你想要显示的图标
6：举例说明你如何对网站的文件和资源进行优化？
1：文件合并，常用的比如css sprites
2:文件压缩，目的是直接减少文件下载的体积
3：使用缓存
7：什么是语义化的html
语义化的主要目的在于直观的认识标签和属性的用途和作用，可以概括为：用正确的标签做正确的事
html语义化可以让页面的内容结构化，便于浏览器解析，便于搜索引擎解析，并提高代码的可维护度和可重用性，比如可以减少无语义的标签，多实用结构化的标签，比如
8：javascript的typeof返回哪些数据类型
string，boolean，number，null，undifined，object，function
9.split() join() 的区别
split是按照指定的分隔符对字符串进行分割，并以数组的形式返回结果
join跟split相反，是以指定的符号将数组的元素进行拼接，并以字符串返回。
10：如何检测一个变量是一个string类型
if(typeof(s)=="string"){
alert("该变量是字符串")
}
if(typeof s=="string"){
alert("该变量是字符串")
}
if(s.constructor==String){
alert("该变量是字符串")
}11:如何去除字符串空格
var a=" 你好啊 正则 ";
//去除所有的空格
var str=a.replace(/\s*/g,"");
console.log(str)
//去除左右两边的空格
var str1=a.replace(/^\s*|\s*$/g,'')
console.log(str1)
//去除开始的空格，也就是左边的空格
var str2=a.replace(/^\s*/,'');
console.log(str2)
//去除最后的空格，也就是右边的空格
var str3=a.replace(/\s*$/,'');
console.log(str3) //去除所有的空格
var str=a.replace(/\s*/g,"");
console.log(str)
//去除左右两边的空格
var str1=a.replace(/^\s*|\s*$/g,'')
console.log(str1)
//去除开始的空格，也就是左边的空格
var str2=a.replace(/^\s*/,'');
console.log(str2)
//去除最后的空格，也就是右边的空格
var str3=a.replace(/\s*$/,'');
console.log(str3)这里解释下这个正则
/g代表全局匹配，\s代表空格，*代表一个或多个，^代表开始，$代表结束，|代表拿第一个来说
var str=a.replace(/\s*/g,"");代表全局匹配一个或多个空格，用“”替代，这样就去除了所有的空格。
这里还有一个我们常用的方法，str.trim()方法，该方法跟第二种去除左右两边的空格正则是一样的效果，不能去除中间的空格。
还有str.trimLeft(),str.trimRight()分别用于去除字符串左边的空格和右空格
12：普通事件与事件绑定的区别
普通事件添加的方法不支持添加多个事件，下面的会覆盖上面的事件
事件绑定可以添加多个事件
13：get和post请求方式的区别
get把请求的数据放在url上，传输的格式是以？为分割，参数之间以&连接，而post把数据放在http的包体内
get提交的数据最大是2k，而post则大得多
get请求会被浏览器主动地cache，而post不会
get请求会在浏览器的历史记录中找到，所以不安全，而post不会，所以相对比post安全
14:eval 与JSON.parse的区别
eval与JSON.parse都是将json字符串转变成json对象，但是两者是有区别的
eval解析json字符串的时候不会去检查是不是符合json格式，对格式要求没那么严格
而且如果字符串中有js代码也会在解析的时候执行js代码
但如果json字符串不符合json格式，用JSON.parse解析则会报错
另外，因为用eval解析的字符串可以插入恶意的js代码，所以不安全，因此推荐使用JSON.parse来解析json字符串
15：请写一个方法获取浏览器url中查询字符串的参数
var data={};
var url="http://www.douban.com/api/movie/top250?number=10&start=0";
function getUrl(url){
var str=url.split("?")[1];
if(str){
var s=str.split("&");
for(var i=0;i16：如何创建一个节点，增加一个节点，删除一个节点，替换一个节点
创建节点：createElement(),该方法的参数是节点名称，比如button就是创建一个按钮，a就是创建一个超链接，以此类推
创建文本节点：createTextNode()
添加节点：appendChild()
删除节点：removeChild()
替换节点：repalceChild()
插入节点：insertBefore()
这里呢，我习惯上使用jquery方法，下面我随手写了几个例子，是关于节点的增删插入节点以及移动节点的
- 11
- 22
- 33
18：编写一个数组去重的方法
1：自己写的一个方法
2：借鉴的别人的我觉得很棒的方法
var arr = [2,3,4,4,5,2,3,6],
arr2 = [];
for(var i = 0;i< arr.length;i++){
if(arr2.indexOf(arr[i]) < 0){
arr2.push(arr[i]);
}
}
console.log(arr2);
19:什么是闭包
js中作用域分两种，全局变量和函数内声明的局部变量，当然如果在函数内没有用var声明变量的话就是全局变量，那么问题来了，如果出了声明局部变量的代码块想使用该局部变量怎么办呢，这时候就需要用到闭包了
所以，简单的说，闭包就是为了能跟读取函数内声明的局部变量。
闭包的形式是一个函数返回另一个函数，而返回的函数使用了该函数内部的变量，然后把外层函数的执行结果赋值给一个变量，再执行该变量。
20：什么是跨域，产生跨域的原因以及如何解决跨域
跨域产生的原因是由于浏览器的同源策略，发送的请求地址的协议，域名，端口号三者有一个跟当前请求页面的地址不同就会产生跨域问题。
常见的解决跨域问题的方法有三种
1：CORS
这是最常见的方法，我们公司用的也是这种方法，该方法主要是后端人员来操作，是需要后端人员在请求的服务器文件上添加允许访问的地址，以及访问方式等，如下
res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8",
"Access-Control-Allow-Origin":'http://localhost',//这里指定你允许的域名
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});
2：porxy代理
定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
实现方法：通过nginx代理；
注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功
3：jsonp
这个好像很多前端都会回答的一个答案，但是好像很多人并不是很清楚具体原因，而且个人觉得这个方法并不好用。关于这个放大我写过一篇详细的博客来说明，附上链接
https://mp.csdn.net/postedit/79578886
21：阻止事件冒泡和默认行为
function test(evt){
var evt = evt || window.event; //获取event对象
if (evt.preventDefault) {
evt.preventDefault(); //非IE浏览器
} else {
evt.returnValue = false; //在早期的IE版本中
}
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); //阻止事件冒泡
}