前言
本文主要整理了一些最近遇到的前端面试题，方便大家在面试前有所准备，文中给出了详细的解答，下面话不多说了，来看看详细的介绍吧。
1、标签属性中title和alt的区别
答:
title是设置鼠标移动到图片上时显示的内容，而alt是用于当图片没有正常显示时出现的提示文字，另外alt还用于在seo中针对图片的优化说明.
2、隐藏元素的几种方法
答:
1.display:none;
2.visibility:hidden;
3.opacity:0;
4.position:absolute;
left:-10000px;
3、JavaScript中有哪几种数据类型
答:
JavaScript中有5种简单数据类型（也称为基本数据类型）:Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——Object，Object本质上是由一组无序的名值对组成的
4、回答以下输出的类型
答:
alert(typeof(null));//object alert(typeof(NaN));//number alert(typeof(undefined));//undefined alert(typeof(“undefined”));//string alert(NaN == undefined);//false alert(NaN == NaN);//false</div>
5、用jquery和原生js获取元素中的内容
答:
JS:document.getElementById(“div1”).innerHTML; document.querySelector(“#div1”).innerText; JQ:$(“#div1”).html()</div>
6、用原生js封装一个添加监听事件的兼容写法
答:
function addEvent(obj,event,fn){
//现代：addEventLister 不用加on
//ie：touchEvent 需要加on
if (window.addEventListener){
obj.addEventListener(event,fn);
}else{
obj.attachEvent("on"+event, fn);
}
}
</div>
7、对跨域的理解和解决办法
答:
跨域简单的理解即为当前服务器目录下的前端需求要请求非本服务器(本域名)下的后台服务就称为跨域请求。跨域请求我们使用普通的ajax请求是无法进行的同源策略，一般来说位于 server1.example.com 的网页无法与不是 server2.example.com的服务器沟通，或者说如果在server1.example.com下想获取server2.example.com的话就得用跨域请求。
跨域的解决方法及解决：通过script标签请求，或者通过jQuery跨域
8、Ajax的原理
答:
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
9、jQuery库中的$()是什么
答:
$()函数用于将任何对象包裹成jQuery对象，接着你就被允许调用定义在 jQuery对象上的多个不同方法。你甚至可以将一个选择器字符串传入$()函数，它会返回一个包含所有匹配的DOM元素数组的jQuery对象。
10、JavaScript的window.onload事件和jQuery的ready函数有何不同
答:
JavaScript的window.onload事件和jQuery的ready函数之间的主要区别是，前者除了要等待DOM被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在window.onload 事件上的代码在执行时有明显的延迟。
另一方面，jQuery的ready()函数只需对DOM树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用jQuery $(document).ready()的另一个优势是你可以在网页里多次使用它，浏览器会按它们在HTML页面里出现的顺序执行它们，相反对于onload技术而言，只能在单一函数里使用。鉴于这个好处，用jQuery的ready()函数比用JavaScript的window.onload 事件要更好些。
11、用原生js封装一个能获取元素到页面最上方和最左侧的函数，再用JQ封装一个同样的函数
答:
原生:
function offset(obj){
var l = 0;
var t = 0;
while(obj){
l+=obj.offsetLeft;
t+=obj.offsetTop;
obj = obj.offsetParent;
}
return {left:l,top:t};
}
</div>
jQuery：
$().offset().left;$().offset().top
12、如何实现一个EventEmitter
答:
主要分三步：定义一个子类，调用构造函数，继承EventEmitter
var util = require('util');
var EventEmitter = require('events');
function MyEmitter() {
EventEmitter.call(this);
} // 构造函数
util.inherits(MyEmitter, EventEmitter); // 继承
var em = new MyEmitter();
em.on('hello', function(data) {
console.log('收到事件hello的数据:', data);
}); // 接收事件，并打印到控制台
em.emit('hello', 'EventEmitter传递消息真方便!');
</div>
13、如何通过stream实现一个文件的复制
答:
var fs = require("fs");
var rs = fs.createReadStream(“1.jpg");
var ws = fs.createWriteStream("2.jpg");
rs.pipe(ws);
</div>
14、如何理解node的同步和异步
答:
”同步模式”就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；”异步模式”则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
15、使用node构建一个服务器并对向”/post”发起的post请求进行处理，要求拿到post请求传输的数据（不包括文件上传）
答:
var http = require("http");
var queryString = require("querystring");
var server = http.createServer(function (req,res) {
if(urlObj.pathname == "/post"){
var str = "";
req.on("data",function (chunk) {
str+=chunk;
});
req.on("end",function () {
var query = queryString.parse(str);
console.log(query);
})
res.end("你请求的地址是"+urlObj.pathname);
}
});
server.listen(8080);
</div>
16、用node模拟客户端发起请求
答:
var http = require("http");
var request = http.request({
host:"localhost",
port:"8080",
path:"/request",
method:"post"
},function (res) {
res.on("data",function (chunk) {
console.log(chunk.toString());
});
});
request.write("user=zhang&pass=111");
request.end("请求结束");//结束本次请求
</div>
17、图片预加载的意义和原理
答:
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏