• 首页
• 在线学习
• 列表
• 正文

前端面试题总汇常考笔试题等uecom

2019-08-08 22:11:00

239 694

##目录$HTML，HTTP，web综合问题1、前端需要注意哪些SEO2、的title和alt有什么区别3、HTTP的几种请求方法用途4、从浏览器地址栏输入url到显示页面的步骤5、如何进行网站性能优化6、HTTP状态码及其含义7、语义化的理解8、介绍一下你对浏览器内核的理解9、html5有哪些新特性、移除了那些元素？10、HTML5的离线储存怎么使用，工作原理能不能解释一下？11、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢12、请描述一下cookies，sessionStorage和localStorage的区别13、iframe有那些缺点？14、WEB标准以及W3C标准是什么15、xhtml和html有什么区别16、Doctype作用严格模式与混杂模式如何区分？它们有何意义17、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？18、HTML全局属性(globalattribute)有哪些19、Canvas和SVG有什么区别？20、HTML5为什么只需要写？21、如何在页面上实现一个圆形的可点击区域？22、网页验证码是干嘛的，是为了解决什么安全问题

$jQuery1、你觉得jQuery或zepto源码有哪些写的好的地方2、jQuery的实现原理？3、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？4、jQuery.extend与jQuery.fn.extend的区别？5、jQuery的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？6、jQuery的队列是如何实现的？队列可以用在哪些地方？7、jQuery中的bind(),live(),delegate(),on()的区别？8、是否知道自定义事件？jQuery里的fire函数是什么意思，什么时候用？9、jQuery通过哪个方法和Sizzle选择器结合的？10、jQuery中如何将数组转化为JSON字符串，然后再转化回来？11、jQuery一个对象可以同时绑定多个事件，这是如何实现的？12、针对jQuery的优化方法？13、jQuery的slideUp动画，当鼠标快速连续触发,动画会滞后反复执行，该如何处理呢14、jQueryUI如何自定义组件？15、jQuery与jQueryUI、jQueryMobile区别？16、jQuery和Zepto的区别？各自的使用场景？17、jQuery对象的特点

$编程题1、写一个通用的事件侦听器函数2、如何判断一个对象是否为数组3、冒泡排序4、快速排序5、编写一个方法求一个字符串的字节长度

$其他1、谈谈你对重构的理解2、什么样的前端代码是好的3、对前端工程师这个职位是怎么样理解的？它的前景会怎么样？4、你觉得前端工程的价值体现在哪5、平时如何管理你的项目？

人事面面试完你还有什么问题要问的吗你有什么爱好你最大的优点和缺点是什么你为什么会选择这个行业，职位你觉得你适合从事这个岗位吗你有什么职业规划你对工资有什么要求如何看待前端开发？未来三到五年的规划是怎样的？常问自我介绍你的项目中技术难点是什么？遇到了什么问题？你是怎么解决的？你认为哪个项目做得最好？最近在看哪些前端方面的书？平时是如何学习前端开发的？你最有成就感的一件事你是怎么学习前端的

##$HTML，HTTP，web综合问题1、前端需要注意哪些SEO合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取重要内容不要用js输出：爬虫不会执行js获取内容少用iframe：搜索引擎不会抓取iframe中的内容非装饰性图片必须加alt提高网站速度：网站速度是搜索引擎排序的一个重要指标2、的title和alt有什么区别通常当鼠标滑动到元素上的时候显示alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。3、HTTP的几种请求方法用途1、GET方法

发送一个请求来取得服务器上的某一资源2、POST方法

向URL指定的资源提交数据或附加新的数据3、PUT方法

跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有4、HEAD方法

只请求页面的首部5、DELETE方法

删除服务器上的某资源6、OPTIONS方法

它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息7、TRACE方法

TRACE方法被用于激发一个远程的，应用层的请求消息回路8、CONNECT方法

把请求连接转换到透明的TCP/IP通道4、从浏览器地址栏输入url到显示页面的步骤浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；载入解析到的资源文件，渲染页面，完成。5、如何进行网站性能优化content方面

减少HTTP请求：合并文件、CSS精灵、inlineImage减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名减少DOM元素数量Server方面

使用CDN配置ETag对组件使用Gzip压缩Cookie方面

减小cookie大小css方面

将样式表放到页面顶部不使用CSS表达式使用不使用@importJavascript方面

将脚本放到页面底部将javascript和css从外部引入压缩javascript和css删除不需要的脚本减少DOM访问图片方面

绘画canvas用于媒介回放的video和audio元素本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失sessionStorage的数据在浏览器关闭后自动删除语意化更好的内容元素，比如article、footer、header、nav、section表单控件，calendar、date、time、email、url、search新的技术webworker,websocket,Geolocation移除的元素：

纯表现的元素：basefont，big，center，font,s，strike，tt，u`对可用性产生负面影响的元素：frame，frameset，noframes支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签可以利用这一特性让这些浏览器支持HTML5新标签浏览器支持新标签后，还需要添加标签默认的样式当然也可以直接使用成熟的框架、比如html5shim10、HTML5的离线储存怎么使用，工作原理能不能解释一下？在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示如何使用：

页面头部像下面一样加入一个manifest的属性；在cache.manifest文件的编写离线存储的资源在离线状态时，操作window.applicationCache进行需求实现

123456789CACHEMANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:resourse/logo.pngFALLBACK://offline.html

主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页另外是书写习惯的差别

减少HTTP请求数，极大地提高页面加载速度增加图片信息重复度，提高压缩比，减少图片大小更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现缺点：

图片合并麻烦维护麻烦，修改一个图片可能需要从新布局整个图片，样式2、display:none;与visibility:hidden;的区别联系：它们都能让元素不可见区别：

根元素浮动元素（float不是none）绝对定位元素（position取值为absolute或fixed）display取值为inline-block,table-cell,table-caption,flex,inline-flex之一的元素overflow不是visible的元素作用：

p:first-of-type选择属于其父元素的首个

元素的每个

元素。p:last-of-type选择属于其父元素的最后

元素。p:only-of-type选择属于其父元素唯一的

元素。p:only-child选择属于其父元素的唯一子元素的每个

元素。p:nth-child(2)选择属于其父元素的第二个子元素的每个

8位像素，256色无损压缩支持简单动画支持boolean透明适合简单动画JPEG

颜色限于256有损压缩可控制压缩质量不支持透明适合照片PNG

1234567891011121314151617181920212223.left{float:left;width:100px;height:200px;background:red;}.right{float:right;width:200px;height:200px;background:blue;}.main{margin-left:120px;margin-right:220px;height:200px;background:green;}

圣杯布局

123456789101112131415161718192021222324252627282930313233.container{margin-left:120px;margin-right:220px;}.main{float:left;width:100%;height:300px;background:green;}.left{position:relative;left:-120px;float:left;height:300px;width:100px;margin-left:-100%;background:red;}.right{position:relative;right:-220px;float:right;height:300px;width:200px;margin-left:-200px;background:blue;}

双飞翼布局

12345678910111213141516171819202122232425262728293031323334353637.content{float:left;width:100%;}.main{height:200px;margin-left:110px;margin-right:220px;background:green;}.main::after{content:'';display:block;font-size:0;height:0;zoom:1;clear:both;}.left{float:left;height:200px;width:100px;margin-left:-100%;background:red;}.right{float:right;height:200px;width:200px;margin-left:-200px;background:blue;}

函数内再嵌套函数内部函数可以引用外层的参数和变量参数和变量不会被垃圾回收机制回收说说你对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中闭包的另一个用处，是封装对象的私有属性和私有方法好处：能够实现封装和缓存等；坏处：就是消耗内存、不正当使用会造成内存溢出的问题使用闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露解决方法是，在退出函数之前，将不使用的局部变量全部删除2、说说你对作用域链的理解作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期3、JavaScript原型，原型链有什么特点？每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念关系：instance.constructor.prototype=instance.proto特点：

12345678910111213functionParent(){this.name='wang';}functionChild(){this.age=28;}Child.prototype=newParent();//继承了Parent，通过原型vardemo=newChild();alert(demo.age);alert(demo.name);//得到被继承的属性}

1234567891011121314151617//1.创建连接varxhr=null;xhr=newXMLHttpRequest()//2.连接服务器xhr.open('get',url,true)//3.发送请求xhr.send(null);//4.接受请求xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){success(xhr.responseText);}else{//failfail&&fail(xhr.status);}}}

ajax有那些优缺点

优点：通过异步模式，提升了用户体验.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。Ajax可以实现动态不刷新（局部刷新）缺点：安全问题AJAX暴露了与服务器交互的细节。对搜索引擎的支持比较弱。不容易调试。10、如何解决跨域问题jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面11、模块化开发怎么做？立即执行函数,不暴露私有成员

12345678910111213varmodule1=(function(){var_count=0;varm1=function(){//...};varm2=function(){//...};return{m1:m1,m2:m2};})();

12、异步加载JS的方式有哪些？defer，只支持IEasync：创建script，插入到DOM中，加载完毕后callBack13、那些操作会造成内存泄漏？内存泄漏指任何对象在您不再拥有或需要它之后仍然存在setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄漏闭包使用不当14、XML和JSON的区别？数据体积方面

JSON相对于XML来讲，数据的体积小，传递的速度更快些。数据交互方面

JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互数据描述方面

JSON对数据的描述性比XML较差传输速度方面

JSON的速度要远远快于XML15、谈谈你对webpack的看法WebPack是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源16、说说你对AMD和Commonjs的理解CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的17、常见web安全及防护原理sql注入原理

就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令总的来说有以下几点

永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双”-“进行转换等永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息XSS原理及防范

Xss(cross-sitescripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点XSS防范方法

首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把htmltag弄出来。这一个层面做好，至少可以堵住超过一半的XSS攻击XSS与CSRF有什么区别吗？

服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数通过验证码的方法18、用过哪些设计模式？工厂模式：

工厂模式解决了重复实例化的问题，但还有一个问题,那就是识别问题，因为根本无法主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字构造函数模式

1234body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;}

IE下,event对象有x,y属性,但是没有pageX,pageY属性Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.22、说说你对promise的了解依照Promise/A+的定义，Promise有四种状态：

pending:初始状态,非fulfilled或rejected.fulfilled:成功的操作.rejected:失败的操作.settled:Promise已被fulfilled或rejected，且不是pending另外，fulfilled与rejected一起合称settledPromise对象用来进行延迟(deferred)和异步(asynchronous)计算Promise的构造函数

构造一个Promise，最基本的用法如下：

123456789101112varpromise=newPromise(function(resolve,reject){if(...){//succeedresolve(result);}else{//failsreject(Error(errMessage));}});

1、它是一个Javascript运行环境2、依赖于ChromeV8引擎进行代码解释3、事件驱动4、非阻塞I/O5、单进程，单线程优点：

高并发（最重要的优点）缺点：

33、javascript创建对象的几种方式？javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用对象字面量的方式person={firstname:”Mark”,lastname:”Yun”,age:25,eyecolor:”black”};用function来模拟无参的构造函数

12345678functionPerson(){}varperson=newPerson();//定义一个function，如果使用new"实例化",该function可以看作是一个Classperson.name="Mark";person.age="25";person.work=function(){alert(person.name+"hello...");}person.work();

用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）

12345678910functionPet(name,age,hobby){this.name=name;//this作用域：当前对象this.age=age;this.hobby=hobby;this.eat=function(){alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");}}varmaidou=newPet("麦兜",25,"coding");//实例化、创建对象maidou.eat();//调用eat方法

用工厂方式来创建（内置对象）

1234567varwcDog=newObject();wcDog.name="旺财";wcDog.age=3;wcDog.work=function(){alert("我是"+wcDog.name+",汪汪汪......");}wcDog.work();

用原型方式来创建

123456789functionDog(){}Dog.prototype.name="旺财";Dog.prototype.eat=function(){alert(this.name+"是个吃货");}varwangcai=newDog();wangcai.eat();

用混合方式来创建

123456789functionCar(name,price){this.name=name;this.price=price;}Car.prototype.sell=function(){alert("我是"+this.name+"，我现在卖"+this.price+"万元");}varcamry=newCar("凯美瑞",27);camry.sell();

1234vara=newArray(123);varb=newDate();console.log(Array.isArray(a));//trueconsole.log(Array.isArray(b));//false

优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数缺点：事件驱动型，流程不够清晰发布/订阅(观察者模式)

类似于事件监听，但是可以通过‘消息中心’，了解现在有多少发布者，多少订阅者Promise对象

优点：可以利用then方法，进行链式写法；可以书写错误时的回调函数；缺点：编写和理解，相对比较难Generator函数

优点：函数体内外的数据交换、错误处理机制缺点：流程管理不方便async函数

优点：内置执行器、更好的语义、更广的适用性、返回的是Promise、结构清晰。缺点：错误处理机制57、对原生Javascript了解程度数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript58、Js动画与CSS动画区别及相应实现CSS3的动画的优点在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化代码相对简单缺点在动画控制上不够灵活兼容性不好JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧59、JS数组和对象的遍历方式，以及几种方式的比较通常我们会用循环的方式来遍历数组。但是循环是导致js性能问题的原因之一。一般我们会采用下几种方式来进行数组的遍历forin循环for循环forEach

12345678910111213(function(window,undefined){//用一个函数域包起来，就是所谓的沙箱//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局//把当前沙箱需要的外部变量通过函数参数引入进来//只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数window.jQuery=window.$=jQuery;})(window);

123456789101112131415161718192021222324$.extend(object);//为jQuery添加“静态方法”（工具方法）$.extend({min:function(a,b){returnaba:b;}});$.min(2,3);//2$.max(4,5);//5$.extend([true,]targetObject,object1[,object2]);//对targt对象进行扩展varsettings={validate:false,limit:5};varoptions={validate:true,name:"bar"};$.extend(settings,options);//注意：不支持第一个参数传false//settings=={validate:true,limit:5,name:"bar"}$.fn.extend(json);//为jQuery添加“成员函数”（实例方法）$.fn.extend({alertValue:function(){$(this).click(function(){alert($(this).val());});}});$("#email").alertValue();

12345678910111213141516171819202122varfunc1=function(){alert('事件1');}varfunc2=function(){alert('事件2');}varfunc3=function(){alert('事件3');}varfunc4=function(){alert('事件4');}//入栈队列事件$('#box').queue("queue1",func1);//pushfunc1toqueue1$('#box').queue("queue1",func2);//pushfunc2toqueue1//替换队列事件$('#box').queue("queue1",[]);//deletequeue1withemptyarray$('#box').queue("queue1",[func3,func4]);//replacequeue1//获取队列事件（返回一个函数数组）$('#box').queue("queue1");//[func3(),func4()]//出栈队列事件并执行$('#box').dequeue("queue1");//returnfunc3anddofunc3$('#box').dequeue("queue1");//returnfunc4anddofunc4//清空整个队列$('#box').clearQueue("queue1");//deletequeue1withclearQueue

7、jQuery中的bind(),live(),delegate(),on()的区别？bind直接绑定在目标元素上live通过冒泡传播事件，默认document上，支持动态数据delegate更精确的小范围使用事件代理，性能优于liveon是最新的1.9版本整合了之前的三种方式的新事件绑定机制8、是否知道自定义事件？jQuery里的fire函数是什么意思，什么时候用？事件即“发布/订阅”模式，自定义事件即“消息发布”，事件的监听即“订阅订阅”JS原生支持自定义事件，示例：document.createEvent(type);//创建事件event.initEvent(eventType,canBubble,prevent);//初始化事件target.addEventListener(‘dataavailable’,handler,false);//监听事件target.dispatchEvent(e);//触发事件jQuery里的fire函数用于调用jQuery自定义事件列表中的事件9、jQuery通过哪个方法和Sizzle选择器结合的？Sizzle选择器采取RightToLeft的匹配模式，先搜寻所有匹配标签，再判断它的父节点jQuery通过$(selecter).find(selecter);和Sizzle选择器结合10、jQuery中如何将数组转化为JSON字符串，然后再转化回来？//通过原生JSON.stringify/JSON.parse扩展jQuery实现

1234567891011121314151617181920$.array2json=function(array){returnJSON.stringify(array);}$.json2array=function(array){//$.parseJSON(array);//3.0开始，已过时returnJSON.parse(array);}//调用varjson=$.array2json(['a','b','c']);vararray=$.json2array(json);11、jQuery一个对象可以同时绑定多个事件，这是如何实现的？$("#btn").on("mouseovermouseout",func);$("#btn").on({mouseover:func1,mouseout:func2,click:func3});

2、如何判断一个对象是否为数组

123456functionisArray(arg){if(typeofarg==='object'){returnObject.prototype.toString.call(arg)==='[objectArray]';}returnfalse;}

3、冒泡排序每次比较相邻的两个数，如果后一个比前一个小，换位置

1234567891011121314151617vararr=[3,1,4,6,5,7,2];functionbubbleSort(arr){for(vari=0;i

4、快速排序采用二分法，取出中间数，数组每次和中间数比较，小的放到左边，大的放到右边

123456789101112131415161718192021222324vararr=[3,1,4,6,5,7,2];functionquickSort(arr){if(arr.length==0){return[];//返回空数组}varcIndex=Math.floor(arr.length/2);varc=arr.splice(cIndex,1);varl=[];varr=[];for(vari=0;i

5、编写一个方法求一个字符串的字节长度假设：一个英文字符占用一个字节，一个中文字符占用两个字节

1234567891011121314151617functionGetBytes(str){varlen=str.length;varbytes=len;for(vari=0;i255)bytes++;}returnbytes;}alert(GetBytes("你好,as"));

6、bind的用法，以及如何实现bind的函数和需要注意的点bind的作用与call和apply相同，区别是call和apply是立即调用函数，而bind是返回了一个函数，需要调用的时候再执行。一个简单的bind函数实现如下

123456Function.prototype.bind=function(ctx){varfn=this;returnfunction(){fn.apply(ctx,arguments);};};

$其他1、谈谈你对重构的理解网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI对于传统的网站来说重构通常是：

表格(table)布局改为DIV+CSS使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)对于移动平台的优化针对于SEO进行优化2、什么样的前端代码是好的高复用低耦合，这样文件小，好维护，而且好扩展。3、对前端工程师这个职位是怎么样理解的？它的前景会怎么样？前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近

1、viewport

12345678//width设置viewport宽度，为一个正整数，或字符串‘device-width’//device-width设备宽度//height设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置//initial-scale默认缩放比例（初始缩放比例），为一个数字，可以带小数//minimum-scale允许用户最小缩放比例，为一个数字，可以带小数//maximum-scale允许用户最大缩放比例，为一个数字，可以带小数//user-scalable是否允许手动缩放

延伸提问

怎样处理移动端1px被渲染成2px问题

1局部处理meta标签中的viewport属性，initial-scale设置为1rem按照设计稿标准走，外加利用transfrome的scale(0.5)缩小一倍即可；2全局处理meta标签中的viewport属性，initial-scale设置为0.5rem按照设计稿标准走即可2、跨域的几种方式首先了解下浏览器的同源策略同源策略/SOP（Sameoriginpolicy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

那么怎样解决跨域问题的呢？

由此，addEventListener的第三个参数设置为true和false的区别已经非常清晰了：

true表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件；

基本数据当值发生改变时，那么其对应的指针也将发生改变，故造成const申明基本数据类型时，再将其值改变时，将会造成报错，例如consta=3;a=5时将会报错；但是如果是复合类型时，如果只改变复合类型的其中某个Value项时，将还是正常使用；6、箭头函数语法比函数表达式更短，并且不绑定自己的this，arguments，super或new.target。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数。

7、快速的让一个数组乱序

12345vararr=[1,2,3,4,5,6,7,8,9,10];arr.sort(function(){returnMath.random()-0.5;})console.log(arr);

此处解释：（语言组织能力不足，请勿吐槽）

首先：当return的值

小于0，那么a会被排列到b之前；等于0，a和b的相对位置不变；大于0，b会被排列到a之前；这里你会发现起始的时候数组是正序排列，每当进行一次排列的时候，都会先随机一个随机数（注意这里的每一次排列指每一个红框指一次排列，共9次排列，一次排列中可能存在多次比较）；

当一次排列的随机数大于0.5时将会进行第二次比较，当第二次随机数仍然大于0.5时，将会再进行一次比较，直到随机数大于0.5或者排列到第一位；

当一次排列的随机数小于0.5时当前比较的两项索引将不会改变，继续下一次的排列；8、字体font-family

9、可能用到的meta标签

12345.css{-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-perspective:1000;}

13、audio元素和video元素在ios和andriod中无法自动播放

实现方法

1234overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

当然还需要加宽度width属来兼容部分浏览。15、实现多行文本溢出显示…效果：

实现方法：

1234display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：2、display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。3、-webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。如果你觉着这样还不够美观，那么就接着往下看：

效果：

这样是不是你想要的呢？

1234567891011121314div{position:relative;line-height:20px;max-height:40px;overflow:hidden;}div:after{content:"...";position:absolute;bottom:0;right:0;padding-left:40px;background:-webkit-linear-gradient(left,transparent,#fff55%);background:-o-linear-gradient(right,transparent,#fff55%);background:-moz-linear-gradient(right,transparent,#fff55%);background:linear-gradient(toright,transparent,#fff55%);}不要只顾着吃，要注意胃口，此方法有个弊端那就是【未超出行的情况下也会出现省略号】，这样会不会很挫！！！没办法，只能结合JS进行优化该方法了。

1、将height设置为line-height的整数倍，防止超出的文字露出。2、给p::after添加渐变背景可避免文字只显示一半。3、由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：…）；兼容ie8需要将::after替换成:after。16、让图文不可复制这点应该大家都很熟悉了，某些时候【你懂的】为了快捷搜索答案，可是打死也不让你复制

123456-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;-khtml-user-select:none;user-select:none;

大致思路：

17、盒子垂直水平居中这个问题好像面试必问的吔！反正我是必问的，哈哈！！！其实无关多少种实现思路，只要你能实现就可以！

提供4种方法

1、定位盒子宽高已知，position:absolute;left:50%;top:50%;margin-left:-自身一半宽度;margin-top:-自身一半高度;

2、table-cell布局父级display:table-cell;vertical-align:middle;子级margin:0auto;

3、定位+transform;适用于子盒子宽高不定时；（这里是本人常用方法）

1234567position:relative/absolute;/*top和left偏移各为50%*/top:50%;left:50%;/*translate(-50%,-50%)偏移自身的宽和高的-50%*/transform:translate(-50%,-50%);注意这里启动了3D硬件加速哦会增加耗电量的（至于何是3D加速请看浏览器进程与线程篇）

4、flex布局父级：/flex布局/display:flex;/实现垂直居中/align-items:center;/实现水平居中/justify-content:center;

再加一种水平方向上居中：margin-left:50%;transform:translateX(-50%);18、改变placeholder的字体颜色大小其实这个方法也就在PC端可以，真机上屁用都没有，当时我就哭了。但还是贴出来吧

12345678910111213141516input::-webkit-input-placeholder{/*WebKitbrowsers*/font-size:14px;color:#333;}input::-moz-placeholder{/*MozillaFirefox19+*/font-size:14px;color:#333;}input:-ms-input-placeholder{/*InternetExplorer10+*/font-size:14px;color:#333;}

19、最快捷的数组求最大值

12vararr=[1,5,1,7,5,9];Math.max(...arr)//9

20、更短的数组去重写法

123[...newSet([2,"12",2,12,1,2,1,6,12,13,6])]//[2,"12",12,1,6,13]

实现方式如下：

1234567891011121314151617181920212223242526272829303132333435363738

其基本实现原理：

app.js作为客户端与服务端的公用入口，导出Vue根实例，供客户端entry与服务端entry使用。客户端entry主要作用挂载到DOM上，服务端entry除了创建和返回实例，还进行路由匹配与数据预获取。webpack为客服端打包一个ClientBundle，为服务端打包一个ServerBundle。服务器接收请求时，会根据url，加载相应组件，获取和解析异步数据，创建一个读取ServerBundle的BundleRenderer，然后生成html发送给客户端。客户端混合，客户端收到从服务端传来的DOM与自己的生成的DOM进行对比，把不相同的DOM激活，使其可以能够响应后续变化，这个过程称为客户端激活。为确保混合成功，客户端与服务器端需要共享同一套数据。在服务端，可以在渲染之前获取数据，填充到stroe里，这样，在客户端挂载到DOM之前，可以直接从store里取数据。首屏的动态数据通过window.INITIAL_STATE发送到客户端。

VueSSR的实现，主要就是把Vue的组件输出成一个完整HTML,vue-server-renderer就是干这事的。纯客户端输出过程有一个complier过程（「下题」中有一个简单描述），主要作用是将template转化成render字符串。VueSSR需要做的事多点（输出完整HTML），除了complier->vnode，还需如数据获取填充至HTML、客户端混合（hydration）、缓存等等。相比于其他模板引擎（ejs,jade等），最终要实现的目的是一样的，性能上可能要差点。参考：

ff数组实现Promise.finallyfinally方法用于指定不管Promise对象最后状态如何，都会执行的操作，使用方法如下：

1234Promise .then(result=>{···}) .catch(error=>{···}) .finally(()=>{···})

finally特点：

不接收任何参数。finally本质上是then方法的特例。

12345678Promise.prototype.finally=function(callback){letP=this.constructorreturnthis.then(value=>P.resolve(callback()).then(()=>value),reason=>P.resolve(callback()).then(()=>{throwreason}))}

另一种方式实现Vue的响应式原理Vue的响应式原理是使用Object.defineProperty追踪依赖，当属性被访问或改变时通知变化。有两个不足之处：

不能检测到增加或删除的属性。数组方面的变动，如根据索引改变元素，以及直接改变数组长度时的变化，不能被检测到。

每个组件都是Vue的实例。组件共享data属性，当data的值是同一个引用类型的值时，改变其中一个会影响其他。

Vuecomputed实现

这个题目有两家问了，感觉都不是答得很好。

从两个问题出发：

建立与其他属性（如：data、Store）的联系；属性改变后，通知计算属性重新计算。

实现时，主要如下

初始化data，使用Object.defineProperty把这些属性全部转为getter/setter。初始化computed,遍历computed里的每个属性，每个computed属性都是一个watch实例。每个属性提供的函数作为属性的getter，使用Object.defineProperty转化。Object.definePropertygetter依赖收集。用于依赖发生变化时，触发属性重新计算。若出现当前computed计算属性嵌套其他computed计算属性时，先进行其他的依赖收集。

diff的实现主要通过两个方法，patchVnode与updateChildren。patchVnode有两个参数，分别是老节点oldVnode,新节点vnode。主要分五种情况：

if(oldVnode===vnode)，他们的引用一致，可以认为没有变化。if(oldVnode.text!==null&&vnode.text!==null&&oldVnode.text!==vnode.text)，文本节点的比较，需要修改，则会调用Node.textContent=vnode.text。if(oldCh&&ch&&oldCh!==ch),两个节点都有子节点，而且它们不一样，这样我们会调用updateChildren函数比较子节点，这是diff的核心，后边会讲到。if(ch)，只有新的节点有子节点，调用createEle(vnode)，vnode.el已经引用了老的dom节点，createEle函数会在老dom节点上添加子节点。if(oldCh)，新节点没有子节点，老节点有子节点，直接删除老节点。

updateChildren是关键，这个过程可以概括如下：

oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了，就会结束比较。Vuecomplier实现

模板解析这种事，本质是将数据转化为一段html，最开始出现在后端，经过各种处理吐给前端。随着各种mv*的兴起，模板解析交由前端处理。总的来说，Vuecomplier是将template转化成一个render字符串。可以简单理解成以下步骤：

parse过程，将template利用正则转化成AST抽象语法树。optimize过程，标记静态节点，后diff过程跳过静态节点，提升性能。generate过程，生成render字符串。

参考：

快排及其优化

前端对算法的要求还是比较低的，但也是必不可少的一部分。

面试官不知道为何扯到了202,204。。。好像是由自己带进坑的。--

202:服务器已接受请求，但尚未处理。204:服务器成功处理了请求，没有返回任何内容。这些状态码感觉只要能记住常用的就ok了，当然还得了解200+,300+,400+,500+代表什么意思。WebSocket

WebSocket应该算是一个比较常问的面试点，如果问的不深的话，应该比较好回答。

支持双向通信，实时性更强；可以发送文本，也可以二进制文件；协议标识符是ws，加密后是wss；较少的控制开销。连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部；支持扩展。ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议。（比如支持自定义压缩算法等）无跨域问题。

实现比较简单，服务端库如socket.io、ws，可以很好的帮助我们入门。而客户端也只需要参照api实现即可。参考：

尽可能多的说出你对Electron的理解

最最重要的一点，electron实际上是一个套了Chrome的node程序。所以应该是从两个方面说开来：

Chrome（无各种兼容性问题）；Node（Node能做的它也能做）。

Chrome没什么好说的，是个前端都懂。

答：vue-router模块的router-link组件。2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

答：在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id3、vue-router有哪几种导航钩子？

答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件4、scss是什么？安装使用的步骤是？有哪几大特性？答：预处理css，把css当前函数编写，定义变量,嵌套。先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

答：css的预编译。使用步骤：第一步：用npm下三个loader（sass-loader、css-loader、node-sass）第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss第三步：还是在同一个文件，配置一个module属性第四步：然后在组件的style标签加上lang属性，例如：lang=”scss”有哪几大特性:1、可以用变量，例如（$变量名称=值）；2、可以用混合器，例如（）3、可以嵌套5、mint-ui是什么？怎么使用？说出至少三个组件使用方法？

答：请求后台资源的模块。npminstallaxios-S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中8、axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？

答：跨域，添加用户操作，更新操作。9、什么是RESTfulAPI？怎么使用

答：是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post.put.delete10、vuex是什么？怎么使用？哪种功能场景使用它？

答：一个model+view+viewModel框架，数据模型model，viewModel连接两个区别：vue数据驱动，通过数据来显示视图层而不是节点操作。场景：数据操作比较多的场景，更加便捷12、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定14、vue-router是什么？它有哪些组件？

答：vue用来写路由一个插件。router-link、router-view15、导航钩子有哪些？它们有哪些参数？

答：导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种16、Vue的双向数据绑定原理是什么？

答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。19、你是怎么认识vuex的？

答：vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。应用级的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。20、vue-loader是什么？使用它的用途有哪些？

答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。用途：js可以写es6、style样式可以scss或less、template可以加jade等21、请说出vue.cli项目中src目录每个文件夹和文件的用法？

答：第一步：在components目录新建你的组件文件（smithButton.vue），script一定要exportdefault{第二步：在需要用的页面（组件）中导入：importsmithButtonfrom‘../components/smithButton.vue’第三步：注入到vue的子组件的components属性上面,components:{smithButton}第四步：在template视图view中使用，问题有：smithButton命名，使用的时候则smith-button。23、聊聊你对Vue.js的template编译的理解？

答：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）详情步骤：首先，通过compile编译器把template编译成AST语法树（abstractsyntaxtree即源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。然后，AST会经过generate（将AST语法树转化成renderfuntion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）24、vue的组件是怎么定义的？父组件怎么给子组件传值？

答：首先注册vue.components，第一个参数是组件名称，第二个参数是选项。直接绑定一个属性，然后在子组件props里面接收25、使用过element.ui吗？说下它其中两个组件的使用方法？

答：使用过用过一个布局的，它是由24份，它的写法是:span后面带的数字它占24份里面的宽度。:offset是它的间距，后面也是跟数字，也是从24份里面取的。input按钮，标签是el-input，后面type跟上一个属性就是显示不同按钮的类型，有默认的default（默认的）、success（成功的）、warning（警告）、danger（危险）、info（）、primary（）26、说下你对mvvm的理解？双向绑定的理解

答：mvvm就是vm框架视图、m模型就是用来定义驱动的数据、v经过数据改变后的html、vm就是用来实现双向绑定双向绑定:一个变了另外一个跟着变了，例如：视图一个绑定了模型的节点有变化，模型对应的值会跟着变27、说出你所使用过的vue指令

答：v-on（监听事件、@change、@click）、v-if（判断的）、v-show（显示/隐藏）、v-bind（绑定属性、:disabled、:src）28、你觉得怎样的自定义组件是完善的？至少说出4点

答：第一点、可以通用第二点、代码尽量简洁第三点、容易修改第四点、功能要多一点一、请说下具体使用vue的理解？

答：1、使用vue不必担心布局更改和类名重复导致的js重写，因为它是靠数据驱动双向绑定，底层是通过Object.defineProperty()定义的数据set、get函数原理实现。2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工具包就可以开工。项目经理坐等收楼就好。3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。4、js的代码无形的规范，团队合作开发代码可阅读性更高。二、你觉得哪些项目适合vue框架？

答：1、数据信息量比较多的，反之类似企业网站就无需此框架了。2、手机web和app应用多端共用一套界面的项目，因为使用vue.cli+webpack后的前端目录，非常有利于项目的跨平台部署。三、怎么理解MVVM模式的这些框架？

答：1、M就是Model模型层，存的一个数据对象。2、V就是View视图层，所有的html节点在这一层。3、VM就是ViewModel，它通过data属性连接Model模型层，通过el属性连接View视图层。四、PC端项目你会在哪些场景使用Vue框架？

答：上万级数据需要瀑布流更新和搜索的时候，因为数据庞大的时候，用原生的dom操作js和html都会有列表的html布局，迭代很困难。再一个dom节点的大面积添加会影响性能。那么vue为什么解决这些问题呢？第一：只需用v-for在view层一个地方遍历数据即可，无需复制一段html代码在js和html两个地方。第二：vue通过VirtualDom就是在js中模拟DOM对象树来优化DOM操作。vuex1、vuex有哪几种属性？

答：有五种，分别是State、Getter、Mutation、Action、Module2、vuex的State特性是？

答：一、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data二、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新三、它通过mapState把全局的state和getters映射到当前组件的computed计算属性中3、vuex的Getter特性是？

答：一、getters可以对State进行计算操作，它就是Store的计算属性二、虽然在组件内也可以做计算属性，但是getters可以在多组件之间复用三、如果一个状态只在一个组件内使用，是可以不用getters4、vuex的Mutation特性是？

答：一、Action类似于mutation，不同在于：二、Action提交的是mutation，而不是直接变更状态。三、Action可以包含任意异步操作5、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

答：一、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex的state里。二、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用asyncawait处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便。6、不用Vuex会带来什么问题？

答：一、可维护性会下降，你要想修改数据，你得维护三个地方二、可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的三、增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。生命周期1、什么是vue生命周期？

答：Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。2、vue生命周期的作用是什么？

答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。3、vue生命周期总共有几个阶段？

答：它可以总共分为8个阶段：创建前/后,载入前/后,更新前/后,销毁前/销毁后4、第一次页面加载会触发哪几个钩子？

答：第一次页面加载时会触发beforeCreate,created,beforeMount,mounted这几个钩子5、DOM渲染在哪个周期中就已经完成？答：DOM渲染在mounted中就已经完成了。

6、简单描述每个周期具体适合哪些场景？

答：生命周期钩子的一些使用方法：beforecreate:可以在这加个loading事件，在加载实例时触发created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用mounted:挂载元素，获取到DOM节点updated:如果对数据统一处理，在这里写上相应函数beforeDestroy:可以做一个确认停止事件的确认框nextTick:更新数据后立即操作domaxios1、axios的特点有哪些？

答：一、Axios是一个基于promise的HTTP库，支持promise所有的API二、它可以拦截请求和响应三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成JSON类型的数据四、安全性更高，客户端支持防御XSRF2、axios有哪些常用方法？

答：url是用于请求的服务器URL

method是创建请求时使用的方法,默认是get

baseURL将自动加在url前面，除非url是一个绝对URL。它可以通过设置一个baseURL便于为axios实例的方法传递相对URL

transformRequest允许在向服务器发送前，修改请求数据，只能用在’PUT’,’POST’和’PATCH’这几个请求方法

headers是即将被发送的自定义请求头headers:{‘X-Requested-With’:’XMLHttpRequest’},

params是即将与请求一起发送的URL参数，必须是一个无格式对象(plainobject)或URLSearchParams对象params:{ID:12345},

auth表示应该使用HTTP基础验证，并提供凭据这将设置一个Authorization头，覆写掉现有的任意使用headers设置的自定义Authorization头auth:{username:’janedoe’,password:’s00pers3cret’},

‘proxy’定义代理服务器的主机名称和端口auth表示HTTP基础验证应当用于连接代理，并提供凭据这将会设置一个Proxy-Authorization头，覆写掉已有的通过使用header设置的自定义Proxy-Authorization头。

123456789proxy:{host:'127.0.0.1',port:9000,auth::{username:'mikeymike',password:'rapunz3l'}},keep-alive

vue性能

polyfillimort引入并执行应用场景：页面开始一片空白1、vue响应式原理？2、vue-router实现原理？3、为什么要选vue？与其它框架对比的优势和劣势？4、vue如何实现父子组件通信，以及非父子组件通信？5、vuejs与angularjs以及react的区别？6、vuex是用来做什么的？7、vue源码结构

react

调用setState之后发生了什么？在代码中调用setState函数之后，React会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。经过调和过程，React会以相对高效的方式根据新的状态构建React元素树并且着手重新渲染整个UI界面。在React得到元素树之后，React会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。在差异计算算法中，React能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

在什么情况下你会优先选择使用ClassComponent而不是FunctionalComponent？在组件需要包含内部状态或者使用到生命周期函数的时候使用ClassComponent，否则使用函数式组件。

React中refs的作用是什么？Refs是React提供给我们的安全访问DOM元素或者某个组件实例的句柄。我们可以为元素添加ref属性然后在回调函数中接受该元素在DOM树中的句柄，该值会作为回调函数的第一个参数返回：

12345678910111213141516classCustomFormextendsComponent{handleSubmit=()=>{console.log("InputValue:",this.input.value)}render(){return(this.input=input}/>Submit)}}

123456789101112functionCustomForm({handleSubmit}){letinputElementreturn(handleSubmit(inputElement.value)}>inputElement=input}/>Submit)}

React中keys的作用是什么？Keys是React用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

123456789render(){return(

{this.state.todoItems.map(({task,uid})=>{return{task}})}

123456789101112{(user)=>user===null:}importReact,{Component,PropTypes}from'react'importfetchUserfrom'twitter'//fetchUsertakeinausernamereturnsapromise//whichwillresolvewiththatusername'sdata.classTwitterextendsComponent{//finishthis}

如果你还不熟悉回调渲染模式（RenderCallbackPattern），这个代码可能看起来有点怪。这种模式中，组件会接收某个函数作为其子组件，然后在渲染函数中以props.children进行调用：

123456789101112131415161718importReact,{Component,PropTypes}from'react'importfetchUserfrom'twitter'classTwitterextendsComponent{state={user:null,}staticpropTypes={username:PropTypes.string.isRequired,}componentDidMount(){fetchUser(this.props.username).then((user)=>this.setState({user}))}render(){returnthis.props.children(this.state.user)}}

这种模式的优势在于将父组件与子组件解耦和，父组件可以直接访问子组件的内部状态而不需要再通过Props传递，这样父组件能够更为方便地控制子组件展示的UI界面。譬如产品经理让我们将原本展示的Badge替换为Profile，我们可以轻易地修改下回调函数即可：

1234567{(user)=>user===null:}ControlledComponent与UncontrolledComponent之间的区别是什么？

React的核心组成之一就是能够维持内部状态的自治组件，不过当我们引入原生的HTML表单元素时（input,select,textarea等），我们是否应该将所有的数据托管到React组件中还是将其仍然保留在DOM元素中呢？这个问题的答案就是受控组件与非受控组件的定义分割。受控组件（ControlledComponent）代指那些交由React控制并且所有的表单数据统一存放的组件。譬如下面这段代码中username变量值并没有存放到DOM元素中，而是存放在组件状态数据中。任何时候我们需要改变username变量值时，我们应当调用setState函数进行修改。

1234567891011121314151617181920212223classControlledFormextendsComponent{state={username:''}updateUsername=(e)=>{this.setState({username:e.target.value,})}handleSubmit=()=>{}render(){return(Submit)}}

而非受控组件（UncontrolledComponent）则是由DOM存放表单数据，并非存放在React组件中。我们可以使用refs来操控DOM元素：

12345678910111213141516classUnControlledFormextendsComponent{handleSubmit=()=>{console.log("InputValue:",this.input.value)}render(){return(this.input=input}/>Submit)}}

在生命周期中的哪一步你应该发起AJAX请求？我们应当将AJAX请求放到componentDidMount函数中执行，主要原因有下：

React下一代调和算法Fiber会通过开始或停止渲染的方式优化应用性能，其会影响到componentWillMount的触发次数。对于componentWillMount这个生命周期函数的调用次数会变得不确定，React可能会多次频繁调用componentWillMount。如果我们将AJAX请求放到componentWillMount函数中，那么显而易见其会被触发多次，自然也就不是好的选择。

如果我们将AJAX请求放置在生命周期的其他函数中，我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调用了setState函数将数据添加到组件状态中，对于未挂载的组件则会报错。而在componentDidMount函数中进行AJAX请求则能有效避免这个问题。

shouldComponentUpdate的作用是啥以及为何它这么重要？shouldComponentUpdate允许我们手动地判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新。

如何告诉React它应该编译生产环境版本？通常情况下我们会使用Webpack的DefinePlugin方法来将NODE_ENV变量值设置为production。编译版本中React会忽略propType验证以及其他的告警信息，同时还会降低代码库的大小，React使用了Uglify插件来移除生产环境下不必要的注释等信息。

为什么我们需要使用React提供的ChildrenAPI而不是JavaScript的map？props.children并不一定是数组类型，譬如下面这个元素：

123456789

Welcome.

概述下React中的事件处理逻辑为了解决跨浏览器兼容性问题，React会将浏览器原生事件（BrowserNativeEvent）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样React在更新DOM的时候就不需要考虑如何去处理附着在DOM上的事件监听器，最终达到优化性能的目的。

createElement与cloneElement的区别是什么？createElement函数是JSX编译之后使用的创建ReactElement的函数，而cloneElement则是用于复制某个元素并传入新的Props。

传入setState函数的第二个参数的作用是什么？该函数会在setState函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成：

1234this.setState({username:'tylermcginnis33'},()=>console.log('setStatehasfinishedandthecomponenthasre-rendered.'))下述代码有错吗？

12345this.setState((prevState,props)=>{return{streak:prevState.streak+props.count}})

这段代码没啥问题，不过只是不太常用罢了，详细可以参考React中setState同步更新策略