本来很久以前就该把前端面试系列的文章更新完，但是自己懒，加上发现网上有些文章确实写的不错，就一直拖着没写。但是有次去图书馆，看到一本书叫《前端面试江湖》，索性找了一个时间，把全部内容整合到一起。这里面肯定有你不了解的东西，那些东西能够很大程度上提高你的开发效率。这本书2016年5月出的，却还在讲JQuery。所以有些地方我对其进行了补充
如何处理IE和Firefox如果处理事件兼容性
获取事件：
function et(e) { let event = window.event || e} 键盘值的获取：
Firfox下event.which和IE的event.keyCode相当let key = event.keyCode || event.which
事件源的获取：
let target = event.srcElement || event.target
事件监听:
IE: element.attacthEvent('on' + eventName, function(){})Firfox: element.addEventListener(eventName, handler, false) 鼠标位置：
在IE下，event对象有x、y属性，在Firfox下，event有PageX, PageY属性所有获取鼠标位置时：x = event.x || event.pageX
阻止默认浏览器行为：
e.preventDefault() || event.returnValue = false
阻止冒泡事件：
e.stopPropagation() || event.cancelBubble = true
获取下拉框中选中项的内容
拿到选中项的索引：
let index = document.getElementById('test').selectIndex. selectIndex表示选中项的index
在Form表单中get和post方式提交的区别
这个问题一直在争论，我就觉得明明一句话解决的问题，非要弄得这么复杂。这是书上的答案：
- get是从服务器上获取数据，post是向服务器提交数据
- get是把参数数据提交到表单的action属性所指的URL中，值和表单各个字段一一对应。post是通过HTTP post机制，将表单内各个字段和其内容放置在HTML HEADER内一起传到action属性所指的URL地址。
- get传送的数据不能大于2kb，post传送的数据更大，但也有限制。
- get安全性能非常低，post安全性较高
- get限制Form表单的数据集的值必须为ASCII字符，而post支持整个ISO10646字符集。
AJAX的简单实现
var xhr = new XMLHttpRequest()xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)) { alert(xhr.responseText) } else { alert('unsuccessful:' + xhr.status) } }}xhr.open('get', 'example.txt', true)xhr.send(null) HTTP协议状态码
具体内容看看MDN，这里就懒的写了
1xx: 信息2xx: 成功3xx：重定向4xx：客户端错误5xx：服务器错误JavaScript如何得到HTTP的请求头信息和返回的信息
getResponseHeader从响应信息中返回指定的http信息
getAllResonponseHeaders 获取响应的所有HTTP头信息JSONP的简单实现
var Jsonp = document.createElement('script')// Firfox: onload, IE: onreadyStatechangeJsonp.onload = Jsonp.onreadyStatechange = function () { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { alert($('#demo').html()) // 清理防止IE内存泄露 Jsonp.onload = Jsonp.onreadyStatechange = null }}Jsonp.type = 'text/javascript'Jsonp.src = 'http://www.xxx.com/JS/JQuery.js'// 往header里边添加document.getElementByTagName('head')[0].appendChild(Jsonp) HTML5和CSS3的了解
1、更多的描述性标签
2、良好的媒体支持3、更强大的Web应用4、跨文档信息通信5、Web Sockets6、客户端存储7、更加精美的页面8、更强大的表单9、提升可访问性10、先进的选择器11、视觉效果如何触发页面的reflow, repaint
除了页面在首次加载时必然要经历该过程之外，还有以下行为会触发这个行为：
１、dom元素的添加、修改、删除。(这就是为什么避免dom元素的修改，因为reflow和repaint最耗性能)2、仅修改DOM元素的字体颜色（只有repaint,因为不需要调整布局）3、应用新的样式或者修改任何影响元素外观的属性4、resize浏览器窗口，滚动页面5、读取元素的某些属性localStorage对象的常用方法
存储：localStorage.setItem(key, value)
获取：localStorage.getItem(key)删除：localStorage.removeItem(key)全部删除：localStorage.clear()cookie、sessionStorage和localStorage的区别
cookie数据始终在同源的HTTP请求中携带。而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径(path)的概念，可以限制cookie只属于某个路径下。
存储大小限制不同，cookie数据不能超过4KB,同时因为每次HTTP请求都会携带cookie,所以cookie只适合保存很小的数据。sessionStorage和localStorage也有存储限制，但是要大的多
数据有效期不同: sessionStorage:仅在当前浏览器窗口关闭前有效。localStorage:始终有效，窗口或浏览器关闭也一直保存。cookie:只要在设置的cookie过期时间之前一直有效
作用域不同：sessionStorage不在不同的浏览器窗口中共享(我们可以不可以通过使用sessionStorage实现跨域).localStorage在所有同源串口都是共享的。cookie在所有同源窗口都是共享的。前端角度做好SEO
1、CSS Sprites: 通俗来讲就是图片合并，可以把网站中一些比较通用的小图，合并到一张大图上
2、启用keep-alive属性：Keep-Alive可以理解为长连接。启用connection的Keep-Alive属性之外，这个连接能保持一段时间，从而提高页面加载的速度3、启用浏览器缓存，可以用缓存技术来提高页面的加载速度4、启用GZIP压缩提高前端性能
1、用Web Storage替换cookie
2、使用css动画代替JavaScript动画3、使用客户端数据库4、使用JavaScript的新功能5、使用硬件加速如果浏览器没有安装网页上所设置的文字，可以怎么做
@font-face {font-family: name; src: url(url); sRules} sRules样式表定义
谈谈对前端安全的理解，有什么，怎么防范
前端安全问题主要有XSS、CSRF攻击
XSS：跨站脚本攻击它允许用户将恶意代码植入到提供给其他用户使用的页面中，可以简单的理解为一种javascript代码注入。XSS的防御措施：过滤转义输入输出避免使用eval、new Function等执行字符串的方法，除非确定字符串和用户输入无关使用cookie的httpOnly属性，加上了这个属性的cookie字段，js是无法进行读写的使用innerHTML、document.write的时候，如果数据是用户输入的，那么需要对象关键字符进行过滤与转义CSRF：跨站请求伪造其实就是网站中的一些提交行为，被黑客利用，在你访问黑客的网站的时候进行操作，会被操作到其他网站上CSRF防御措施：检测http referer是否是同域名避免登录的session长时间存储在客户端中关键请求使用验证码或者token机制其他的一些攻击方法还有HTTP劫持、界面操作劫持实现继承的方法
使用prototype的方法并不是很好，很容易出错，建议使用ES6的class。但这里不讲，因为有些老项目没用ES6，所以了解prototype还有有必要的
借用构造函数实现继承：function Parent1(){ this.name = "parent1"}function Child1(){ Parent1.call(this); this.type = "child1";} 借用原型链实现继承：
function Parent2(){ this.name = "parent2"; this.play = [1,2,3];}function Child2(){ this.type = "child2";}Child2.prototype = new Parent2(); 组合式继承：
function Parent3(){ this.name = "parent3"; this.play = [1,2,3];}function Child3(){ Parent3.call(this); this.type = "child3";}Child3.prototype = Object.create(Parent3.prototype);Child3.prototype.constructor = Child3; 创建对象的方法(摘自《高级程序设计》)：
工厂模式：
function cratePerson (name, age, job) { var o = new Object( o.name = name o.age = age o.job = job o.sayName = function () { alert(this.name) } return o }var person1 = cratePerson('Greg', 27, 'Doctor') 构造函数：
function Person (name, age, job) { this.name = name this.age = age this.job = job this.sayName = function () { alert(this.name ) }}var person1 = cratePerson('Greg', 27, 'Doctor') 原型模式：
function Person () {}Person.prototype.name = 'Greg'Person.prototype.age = 18Person.prototype.job = 'Doctor'Person.prototype.sayName = function () { alert(this.name)}var person1 = new Person()person1.sayName() // Greg 本文只讲了一些理论性的知识，很少涉及编程。编程的部分我决定使用leetcode习题的方式进行讲解
o)因为这个不太好单独写一篇博客来进行讲解。请关注我的了解实时的进度