前端面试题（干货）

1.jsonp原理是，为什么说他不是真正的ajax，他的优缺点是？

Jsonp原理：动态添加script标签，利于script标签的src属性，将前端方法作为参数传给后端，再将后端返回的数据，作为js代码传回前端。前端通过callback回调函数，拿到它的实参，就得到了后端返回的数据。
①jsonp只能使用get请求，ajax可以使用get和post；
②ajax核心是通过异步对象XMLHTTPRequest(响应体)，来获取非本页内容；jsonp核心是通过动态添加script标签来调用服务器提供的js脚本。
优点：兼容性好、可以直接访问响应文本。
缺点：安全问题、只能支持get请求。
2.事件委托原理，以及事件委托的好处？

原理：把原本需要绑定在子元素的一些事件委托给父元素，原理就是事件冒泡。
好处：①可以大量节省内存占用，减少事件注册。
②新增子元素不需要再次绑定事件。

3.IE浏览器以及其他浏览器如何阻止冒泡事件、默认事件？

冒泡：event.cancelBubble = true;
默认：event.returnValue =false;
其他浏览器：冒泡：event.stopPropagation();
默认：event.preventDefault();
4.原生js入口函数(window.onload)和jq的入口函数($(document).ready(function())，$(function () {}))有什么区别？

①执行时间不一样；原生js必须要等到页面上包括图片的所有元素加载完成之后才能执行；
jq是DOM结构绘制完毕后就会执行。
②编写个数不同；原生js不能同时写多个，如果写多个只会执行一个；
jq可以写多个，并且都可以执行。
③jq有简写，原生js不能简写。
5.ajax的优缺点：

优点：
①不用刷新就能更新数据；
②异步与服务器通信；
③前端和后端负载平衡；
④基于标准被广泛支持；
⑤界面与应用分离；
⑥发送请求不会跳转。
缺点：
①使浏览器的back(回退)和history(历史)功能失效；
②安全问题；
③对搜索引擎支持较弱；
④客户端代码冗余。
6.图片优化有哪些？

①样式代替图片。
②精灵图（css Sprite）。
③字体图片（将图标做成字体文件）。
④将图片转化为base64编码格式，资源内嵌到css或HTML，这样就不必单独请求。
⑤图片懒加载。
7.闭包是什么，有什么缺点？

就是在一个内层函数中访问到他外层函数的作用域，将函数内部和函数外部连接起来的桥梁。
优点：不会造成全局污染。
缺点：js回收机制不可将其回收。
8.ES6中的class实现继承？

利用关键字class，子类名 关键字extends 父类名实现继承，并在子类的constructor方法中调用super方法，实现对父类constructor的调用。
9.说说你对this的理解?

this是一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
①作为纯粹的函数调用，this指向全局对象
②作为对象的方法调用，this指向调用对象
③作为构造函数被调用，this指向新的对象（new会改变this的指向）
④作为箭头函数被调用，this指向他外层父级
10.本地存储 cookie、window.sessionStorage和window.localStorage 的区别？

①存储大小不一样，cookie最小，
②作用域不一样，sessionStorage不在不同的浏览器窗口中共享，
cookie和localStorage 在所有同源窗口中都是共享的，
③生命周期不一样，cookie在设置的过期时间之前一直有效，即使窗口或浏览器关闭。sessionStorage：浏览器关闭就会失效。
localStorage：始终有效，除非手动删除。