早就应该更新前端面试系列文章了，结果偷懒发现网上有些文章写的确实不错，所以一直拖。但是有一次去图书馆看到一本书叫《前端面试江湖》，我索性找个时间把所有的内容整合在一起。一定有你不明白的地方，那些东西可以大大提高你的开发效率。这本书出版于2016年5月，但它仍然在谈论JQuery。所以我在一些地方补充了如何处理IE和Firefox如果处理事件兼容性获取事件：functionet(e){letevent=window.event||e}获取键盘值：event.which和Firefox下的IEevent.keyCode相当letkey=event.keyCode||event.which事件源获取：lettarget=event.srcElement||event.target事件监听：IE:element.attacthEvent('on'+eventName,function(){})Firfox:element.addEventListener(eventName,handler,false)鼠标位置：IE下，事件对象有x,y属性,而在Firfox下，事件有PageX,PageY属性。获取鼠标位置时：x=event.x||event.pageX阻止默认浏览器行为：e.preventDefault()||event.returnValue=false防止冒泡事件：e.stopPropagation()||event.cancelBubble=true获取下拉框选中项的内容text1text2获取选中项的索引：letindex=document.getElementById('test').selectIndex.selectIndex表示Form表单中选中项的索引与get和post提交的区别。太复杂了。书上是这样回答的：get是从服务器获取数据，post是向服务器提交数据，get是向表单的action属性指向的url提交参数数据，值对应表单的每个字段。Post是通过HTTPpost机制将表单中的各个字段及其内容放在HTMLHEADER中，发送到action属性所指示的URL地址。get传输的数据不能大于2kb，post传输的数据更大，但也有限制。get的安全性能很低，post的安全性很高。Form表单的数据集的值必须限制为ASCII字符，而post支持整个ISO10646字符集。AJAX的简单实现varxhr=newXMLHttpRequest()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:Information2xx:Success3xx:Redirection4xx:ClientError5xx:ServerErrorJavaScript如何从响应中获取HTTP请求头信息和返回信息getResponseHeader返回信息中指定的http信息getAllResonponseHeaders获取所有HTTP头响应信息JSONP简单实现varJsonp=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.WebSockets6.客户端存储7.更漂亮的页面8.更强大的表单9.提高可访问性10.高级选择器11.视觉效果如何触发页面重排、重绘除了页面首次加载时必须经历的过程外，还有以下行为会触发这个行为：1.dom元素的添加、修改、删除（这就是为什么要避免修改dom元素，因为reflow和repaint最消耗性能。）2.只修改DOM元素的字体颜色（只重新绘制，因为不需要调整布局）3.应用新样式或修改任何影响元素外观的属性4.调整浏览器窗口大小，滚动页面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在所有同源窗口之间共享。从前端的角度做好SEO1和CSSSprites：一般来说就是图片合并，可以将网站中一些常见的小图片合并成一张大图2.开启keep-alive属性：Keep-Alive可以理解为长连接。除了启用连接的Keep-Alive属性外，还可以保持连接一段时间，从而提高页面加载速度3.启用浏览器缓存，可以使用缓存技术提高页面加载速度4.启用GZIP压缩提高前端性能1.用WebStorage代替cookies2，用css动画代替JavaScript动画3，使用客户端数据库4，使用JavaScript新特性5，使用硬件加速如果浏览器没有安装上设置的文本网页，我能做什么@font-face{font-family:name;来源：网址（网址）；sRules}sRules样式表定义谈谈对前端安全的理解，有哪些，如何防范前端安全问题主要包括XSS、CSRF攻击XSS：跨站脚本攻击它允许用户在页面中植入恶意代码提供给其他用户，可以简单理解为一种javascript代码注入。XSS防御措施：过滤转义输入输出，避免使用eval、newFunction等方法执行字符串，除非确定该字符串与用户输入无关使用cookie的httpOnly属性，添加这个的cookie字段属性，js无法执行使用innerHTML和document.write读写时，如果数据是用户输入的，那么需要对对象的关键字符进行过滤转义。CSRF：跨站请求伪造其实就是网站中的一些提交行为，被黑客利用。当访问黑客的网站时，会在其他网站上进行操作。CSRF防御措施：检测httpreferer是否为同一个域名，避免长时间登录session保存在客户端。关键请求利用验证码或token机制进行其他攻击方法包括HTTP劫持和接口操作劫持来实现继承。使用prototype的方法不是很好，很容易出错。推荐使用ES6类。不过这里就不说了，因为有些老项目没有用ES6，所以需要了解原型，用构造函数实现继承：functionParent1(){this.name="parent1"}functionChild1(){Parent1.call(this);this.type="child1";}使用原型链实现继承：functionParent2(){this.name="parent2";this.play=[1,2,3];}functionChild2(){这个。type="child2";}Child2.prototype=newParent2();组合继承：functionParent3(){this.name="parent3";this.play=[1,2,3];}functionChild3(){Parent3.call(this);this.type="child3";}Child3.prototype=Object.create(Parent3.prototype);Child3.prototype.constructor=Child3;创建对象的方法（来自《高级程序设计》）：factoryfunction(){alert(this.name)}returno}varperson1=cratePerson('Greg',27,'Doctor')构造函数：functionPerson(name,age,job){this.name=namethis.age=年龄this.job=jobthis.sayName=function(){alert(this.name)}}varperson1=cratePerson('Greg',27,'Doctor')原型模式：functionPerson(){}Person.prototype.name='Greg'Person.prototype.age=18Person.prototype.job='Doctor'Person.prototype.sayName=function(){alert(this.name)}varperson1=newPerson()person1.sayName()//Greg这篇文章只讲了一些理论知识，很少涉及编程决定用leetcode练习解释o)因为这个不是很好单独写一篇博客来解释。请关注我的github以获得实时进度
