A. Web前端工程师如何处理Web前端的异常_
今天小编要跟大家分享的文章是关于Web前端工程师如何处理前端的异常。前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。下面我们就来看一看前端工程师该如何处理前端异常。一、为什么要处理异常异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。
1.增强用户体验；
2.远程定位问题；
3.未雨绸缪，及早发现问题；
4.无法复线问题，尤其是移动端，机型，系统都是问题；
5.完善的前端方案，前端监控系统；
对于JS而言，我们面对的仅仅只是异常，异常的出现不会直接导致JS引擎崩溃，最多只会使当前执行的任务终止。二、需要处理哪些异常？对于前端来说，我们可做的异常捕获还真不少。总结一下，大概如下：
·___S语法错误、代码异常
·___JAX请求异常
·___蔡试醇釉匾斐
·___romise异常
·___frame异常
·___缬_cripterror
·___览：涂ǘ
下面我会针对每种具体情况来说明如何处理这些异常。三、Try-Catch的误区try-catch只能捕获到同步的运行时错误，对语法和异步错误却无能为力，捕获不到。
1.同步运行时错误：
try{
letname='jartto'
console.log(nam);
}catch(e){
console.log('捕获到异常：',e);
}
输出：
捕获到异常：ReferenceError:namisnotdefined
at:3:15
2.不能捕获到语法错误，我们修改一下代码，删掉一个单引号：
try{
letname='jartto;
console.log(nam);
}catch(e){
console.log('捕获到异常：',e);
}
输出：
UncaughtSyntaxError:Invalidorunexpectedtoken
不过语法错误在我们开发阶段就可以看到，应该不会顺利上到线上环境。
3.异步错误
try{
setTimeout(()=>{
undefined.map(v=>v);
},1000)
}catch(e){
console.log('捕获到异常：',e);
}
我们看看日志：
UncaughtTypeError:Cannotreadproperty'map'of
undefined
atsetTimeout(:3:11)
并没有捕获到异常，这是需要我们特别注意的地方。四、window.onerror不是万能的当JS运行时错误发生时，window会触发一个ErrorEvent接口的error事件，并执行window.onerror()。/**
*@param{String}message错误信息
*@param{String}source出错文件
*@param{Number}lineno行号
*@param{Number}colno列号
*@param{Object}errorError对象（对象）
*/
window.onerror=function(message,source,lineno,colno,error){
console.log('捕获到异常：',{message,source,lineno,colno,error});
}
1.首先试试同步运行时错误
window.onerror=function(message,source,lineno,colno,
error){
//message：错误信息（字符串）。
//source：发生错误的脚本URL（字符串）
//lineno：发生错误的行号（数字）
//colno：发生错误的列号（数字）
//error：Error对象（对象）
console.log('捕获到异常：',{message,source,lineno,colno,
error});
}
Jartto;
可以看到，我们捕获到了异常：
2.再试试语法错误呢？
window.onerror=function(message,source,lineno,colno,
error){
console.log('捕获到异常：',{message,source,lineno,colno,error});
}
letname='Jartto
控制台打印出了这样的异常：
UncaughtSyntaxError:Invalidorunexpectedtoken
什么，竟然没有捕获到语法错误？
3.怀着忐忑的心，我们最后来试试异步运行时错误：
window.onerror=function(message,source,lineno,colno,
error){
console.log('捕获到异常：',{message,source,lineno,colno,error});
}
setTimeout(()=>{
Jartto;
});
控制台输出了：
捕获到异常：{message:"Uncaught
ReferenceError:Jarttoisnotdefined",source:
"http://127.0.0.1:8001/",lineno:36,colno:5,error:
ReferenceError:Jarttoisnotdefined
atsetTimeout(http://127.0.0.1:8001/:36:5)}
4.接着，我们试试网络请求异常的情况：
我们发现，不论是静态资源异常，或者接口异常，错误都无法捕获到。
补充一点：window.onerror函数只有在返回true的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示UncaughtError:xxxxx
window.onerror=function(message,source,lineno,colno,
error){
console.log('捕获到异常：',{message,source,lineno,colno,error});
returntrue;
}
setTimeout(()=>{
Jartto;
});
控制台就不会再有这样的错误了：
UncaughtReferenceError:Jarttoisnotdefined
atsetTimeout((index):36)
需要注意：onerror最好写在所有JS脚本的前面，否则有可能捕获不到错误；onerror无法捕获语法错误；
到这里基本就清晰了：在实际的使用过程中，onerror主要是来捕获预料之外的错误，而try-catch则是用来在可预见情况下监控特定的错误，两者结合使用更加高效。
问题又来了，捕获不到静态资源加载异常怎么办？五、window.addEventListener当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个Event接口的error事件，并执行该元素上的onerror()处理函数。这些error事件不会向上冒泡到window，不过（至少在Firefox中）能被单一的window.addEventListener捕获。
window.addEventListener('error',(error)=>{
console.log('捕获到异常：',error);
},true)
控制台输出：
SHAPE*MERGEFORMAT
由于网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉到才行，但是这种方式虽然可以捕捉到网络请求的异常，但是无法判断HTTP的状态是404还是其他比如500等等，所以还需要配合服务端日志才进行排查分析才可以。
需要注意：
·___煌榔飨路祷氐_rror对象可能不同，需要注意兼容处理。
·___枰⒁獗苊_ddEventListener重复监听。六、PromiseCatch在promise中使用catch可以非常方便的捕获到异步error，这个很简单。
没有写catch的Promise中抛出的错误无法被onerror或try-catch捕获到，所以我们务必要在Promise中不要忘记写catch处理抛出的异常。
解决方案：为了防止有漏掉的Promise异常，建议在全局增加一个对unhandledrejection的监听，用来全局监听UncaughtPromiseError。使用方式：
window.addEventListener("unhandledrejection",
function(e){
console.log(e);
});
我们继续来尝试一下：
window.addEventListener("unhandledrejection",
function(e){
e.preventDefault()
console.log('捕获到异常：',e);
returntrue;
});
Promise.reject('promiseerror');
可以看到如下输出：
那如果对Promise不进行catch呢？
window.addEventListener("unhandledrejection",
function(e){
e.preventDefault()
console.log('捕获到异常：',e);
returntrue;
});
ewPromise((resolve,reject)=>{
reject('jartto:promiseerror');
});
嗯，事实证明，也是会被正常捕获到的。
所以，正如我们上面所说，为了防止有漏掉的Promise异常，建议在全局增加一个对unhandledrejection的监听，用来全局监听UncaughtPromiseError。
补充一点：如果去掉控制台的异常显示，需要加上：
event.preventDefault();七、VUEerrorHandlerVue.config.errorHandler=(err,vm,info)=>{
console.error('通过vue
errorHandler捕获的错误');
console.error(err);
console.error(vm);
console.error(info);
}八、React异常捕获React16提供了一个内置函数componentDidCatch，使用它可以非常简单的获取到react下的错误信息
componentDidCatch(error,info){
console.log(error,info);
}
除此之外，我们可以了解一下：errorboundaryUI的某部分引起的JS错误不应该破坏整个程序，为了帮React的使用者解决这个问题，React16介绍了一种关于错误边界（errorboundary)的新观念。
需要注意的是：errorboundaries并不会捕捉下面这些错误。
1.事件处理器2.异步代码3.服务端的渲染代码4.在errorboundaries区域内的错误
我们来举一个小例子，在下面这个componentDIdCatch(error,info)里的类会变成一个errorboundary：
.Component{
constructor(props){
super(props);
this.state={hasError:false};
}
componentDidCatch(error,info){
//DisplayfallbackUI
this.setState({hasError:true});
//
logErrorToMyService(error,info);
}
render(){
if(this.state.hasError){
//
returnSomethingwentwrong.
;
}
returnthis.props.children;
}
}
然后我们像使用普通组件那样使用它：
componentDidCatch()方法像JS的catch{}模块一样工作，但是对于组件，只有class类型的组件(classcomponent)可以成为一个errorboundaries。
实际上，大多数情况下我们可以在整个程序中定义一个errorboundary组件，之后就可以一直使用它了！九、iframe异常对于iframe的异常捕获，我们还得借力window.onerror：
window.onerror=function(message,source,lineno,colno,
error){
console.log('捕获到异常：',{message,source,lineno,colno,error});
}
一个简单的例子可能如下：
frameborder="0">
十、Scripterror一般情况，如果出现Scripterror这样的错误，基本上可以确定是出现了跨域问题。这时候，是不会有其他太多辅助信息的，但是解决思路无非如下：
跨源资源共享机制(CORS)：我们为script标签添加crossOrigin属性。
或者动态去添加js脚本：
constscript=document.createElement('script');
script.crossOrigin='anonymous'
script.src=url;
document.body.appendChild(script);
特别注意，服务器端需要设置：Access-Control-Allow-Origin
此外，我们也可以试试这个-解决ScriptError的另类思路：
constoriginAddEventListener=EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener=function(type,listener,options){
constwrappedListener=function(...args){
try{
returnlistener.apply(this,args);
}
catch(err){
throwerr;
}
}
returnoriginAddEventListener.call(this,type,wrappedListener,options);
}
简单解释一下：
·___男戳_ventTarget的addEventListener方法；
·___源氲_istener进行包装，返回包装过的listener，对其执行进行try-catch；
·___榔鞑换岫_ry-catch起来的异常进行跨域拦截，所以catch到的时候，是有堆栈信息的；
·___匦_hrow出来异常的时候，执行的是同域代码，所以window.onerror捕获的时候不会丢失堆栈信息；
利用包装addEventListener，我们还可以达到“扩展堆栈”的效果：
(()=>{
constoriginAddEventListener=EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener=function(type,listener,options){
+//捕获添加事件时的堆栈
+constaddStack=newError(`Event(${type})`).stack;
constwrappedListener=function(...args){
try{
returnlistener.apply(this,args);
}
catch(err){
+//异常发生时，扩展堆栈
+err.stack+='
'+addStack;
throwerr;
}
}
returnoriginAddEventListener.call(this,type,wrappedListener,options);
}
})();十一、崩溃和卡顿卡顿也就是网页暂时响应比较慢，JS可能无法及时执行。但崩溃就不一样了，网页都崩溃了，JS都不运行了，还有什么办法可以监控网页的崩溃，并将网页崩溃上报呢？
崩溃和卡顿也是不可忽视的，也许会导致你的用户流失。
1.利用window对象的load和beforeunload事件实现了网页崩溃的监控。不错的文章，推荐阅读：Logging
InformationonBrowserCrashes。window.addEventListener('load',function(){
sessionSt
B. 如何处理前端页面首次加载慢的问题
这是一个ajax请求，几秒钟的延迟时间属于正常范围，它是异步运行的，对页面的加载速度不会造成直接影响。从图片中可看出，它的加载时间为138ms，不算长啊，后面的4.84s是它等待服务器返回数据的时间，在这段时间里，页面的其他元素是继续加载的，不会受影响。所以这个4.84s是不算在首页加载时间内的。就好比一个体育赛事直播的网页，它的比分一般都是通过ajax异步方式定时刷新的，而这个刷新的时间并不算在页面的加载时间内，因为这时候页面早就加载完毕了。
当然，这个4.84s的时间长短，是由多种因素造成的，比如电脑性能、网络状态等，但最大的影响因素通常都是后台数据库的查询速度，通过优化可以大大缩短这个查询时间。
C. list列表界面滑动有卡顿现象怎么优化
主要由以下几种原因造成。
一、手机配置过低
尽管，如今的智能手机配置越来越高，但也有不少入门低配置机型，入门手机由于本身性能不佳，后期安装的应用一多，内存或者CPU就会出现不够用情况，因此很容易出现手机越来越慢。
二、安装的应用过多，内存占用严重
如今很多应用软件在手机中安装后，都会在后台运行，每个应用安装后，都会占用系统内存，安装的应用越来越多，占用的内存就越来越大，就会开始出现卡顿了。
三、手机垃圾和缓存文件过多
手机使用久了会产生各种缓存文件，它们占用手机内存以及存储空间，另外应用软件、游戏的安装包、升级包，也会产生各种缓存文件，如果长时间没有清理，它们占用的体积容量越来越大。
四、其他原因
安卓手机应用商店，五花八门、手机病毒、恶意插件泛滥，如果手机中运行了一些恶意循环的病毒、插件，那么就容易让手机进行死循环运行，可以用腾讯手机管家查杀病毒或恶意插件。
D. web前端编程开发都需要注意哪些问题
随着互联网的不断发展，越来越多的程序员都从后台开发转型到前端开发设计领域。今天，我们就一起来了解一下，在使用web编程开发语言进行前端开发的时候都有哪些问题是需要注意的。
1.路由变化页面数据不刷新问题
出现这种情况是因为依赖路由的params参数获取写在created生命周期里面，因为相同路由二次甚至多次加载的关系没有达到，退出页面再进入另一个文章页面并不会运行created组件生命周期，导致文章数据还是一次进入的数据。
解决方法：watch路由是否变化。
2.setInterval路由跳转继续运行并没有及时进行销毁
比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。
解决办法：在组件生命周期beforeDestroy停止setInterval
//组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。
beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么停止。
clearInterval(this.intervalId);
},
3.vue滚动行为用法，进入路由需要滚动到浏览器底部、头部等等
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
注意：这个功能只在支持history.pushState的浏览器中可用。
4.v-once只渲染元素和组件一次，优化更新渲染性能
v-once这个指令相信大家用的很少，不过个人感觉还是挺实用的!
只渲染元素和组件一次。昆明北大青鸟http://www.kmbdqn.cn/建议随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
E. 给前端传了1万条数据，前端怎么处理才不至于页面卡顿
前端只有“玩命”处理才能不卡顿……
这个负担是由后端造成的，什么要前端去承担呢？用户不可能一次浏览一万条数据，那么就完全应该分页处理。每次只返回几十条数据，大家是不是都轻松了？
F. Web前端学习新手的常见疑问汇总
今天小编要跟大家分享的文章是关于Web前端学习新手的常见疑问汇总。正在学习web前端工作的小伙伴们来和小编一起看一看吧，希望本篇文章能够对小伙伴们有所帮助。
1、Vue.js是什么?
渐进式框架
自底向上增量开发的设计
易学习
易整合
Vue.js(读音/vju_/,类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue
采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和
Vue生态系统支持的库开发的复杂单页应用。
2、vue.js到底适合做哪种类型的界面?
a、表单项繁多
b、内容需要根据用户的操作进行修改
Vue.js就是一个用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。
3、单页应用程序(SPA)是什么?
一个页面就是应用(子应用)
顾名思义，单页应用一般指的就是一个页面就是应用，当然也可以是一个子应用，比如说知乎的一个页面就可以视为一个子应用。单页应用程序中一般交互处理非常多，而且页面中的内容需要根据用户的操作动态变化。
4、前面说的网页版知乎我也可以用JQuery写啊，为什么要用Vue.js呢?
a、产品是绝对需要反复修改的
b、修改可能会导致DOM的关联与嵌套层次要发生改变从而使jquery结构相关代码变的异常复杂
c、vue.js可以解决这个问题
你是否还记得你当初写JQuery的时候，有写过('#xxx').parent().parent().parent()这种代码呢?当你第一次写的时候，你觉得页面元素不多，不就是找这个元素的爸爸的爸爸的爸爸吗，我大不了在注释里面写清楚这个元素的爸爸的爸爸的爸爸不就好了。但是万一过几天之后你的项目组长或者你的产品经理突然对你做的网页提出修改要求，这个修改要求将会影响页面的结构，也就是DOM的关联与嵌套层次要发生改变，那么(‘#xxx’).parent().parent().parent()可能就会变成$(‘#xxx’).parent().parent().parent().parent().parent()了。
这还不算什么，等以后产品迭代越来越快，修改越来越多，而且页面中类似的关联和嵌套DOM元素不止一个，那么修改起来将非常费劲。而且JQuery选择器查找页面元素以及DOM操作本身也是有性能损失的，可能到时候打开这个页面，会变得越来越卡，而你却无从下手。
这个时候如果你学过Vue.js，那么这些抱怨将不复存在。
5、前端里面常说的视图层是什么?
我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次，这个层次就叫做视图层。
Vue的核心库只关注视图层
6、使用jquery开发完整页面的流程?
a、html写构架
b、css装饰
c、js交互
讲到JQuery，就不得不说到JavaScript的DOM操作了。如果你用JQuery来开发一个知乎，那么你就需要用JQuery中的各种DOM操作方法去操作HTML的DOM结构了。
现在我们把一个网页应用抽象一下，那么HTML中的DOM其实就是视图，一个网页就是通过DOM的组合与嵌套，形成了最基本的视图结构，再通过CSS的修饰，在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分，就需要用到JavaScript来接受用户的交互请求，并且通过事件机制来响应用户的交互操作，并且在事件的处理函数中进行各种数据的修改，比如说修改某个DOM中的innerHTML或者innerText部分。
7、Vue.js为什么能让基于网页的前端应用程序开发起来这么方便?
a、有声明式
b、响应式的数据绑定
c、组件化的开发
d、VirtualDOM
因为Vue.js有声明式，响应式的数据绑定，与组件化的开发，并且还使用了VirtualDOM这个看名字就觉得高大上的技术。
8、vue.js中常说的数据动态绑定是什么?
就是vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，在图上是以input
标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。
9、前端中为什么要组件化开发?
a、非组件化开发代码和工作量都非常大
b、修改起来生不如死
但是现在我们做单页应用，页面交互和结构十分复杂，一个页面上就有许许多多的模块需要编写，而且往往一个模块的代码量和工作量就非常庞大，如果还按照原先的方法来开发，那么会累死人。而且遇到以后的产品需求变更，修改起来也非常麻烦，生怕动了其中一个div之后，其他div跟着雪崩，整个页面全部乱套，或者由于JavaScript的事件冒泡机制，导致修改一些内层的DOM事件处理函数之后，出现各种莫名其妙的诡异BUG。
10、前端中如何进行组件化开发?
a、借用的后端的面向对象中的模块化思想(把一些大功能拆分成许多函数，然后分配给不同的人来开发)
b、把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中，我们只要先在父级应用中写好各种组件标签(占坑)，并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样，这个参数叫做组件的属性)，然后再分别写好各种组件的实现(填坑)
在面向对象编程中，我们可以使用面向对象的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中，我们也可以把一些大功能拆分成许多函数，然后分配给不同的人来开发。
在前端应用，我们是否也可以像编程一样把模块封装呢?这就引入了组件化开发的思想。
Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中，我们只要先在父级应用中写好各种组件标签(占坑)，并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样，这个参数叫做组件的属性)，然后再分别写好各种组件的实现(填坑)，然后整个应用就算做完了。
11、为什么有VirtualDOM技术?
a、问题
现在的网速越来越快了，很多人家里都是几十甚至上百M的光纤，手机也是4G起步了，按道理一个网页才几百K，而且浏览器本身还会缓存很多资源文件，那么几十M的光纤为什么打开一个之前已经打开过，已经有缓存的页面还是感觉很慢呢?
b、原因
(1)、浏览器本身处理DOM也是有性能瓶颈的
(2)、用JQuery或者原生的JavaScriptDOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树
这就是因为浏览器本身处理DOM也是有性能瓶颈的，尤其是在传统开发中，用JQuery或者原生的JavaScript
DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。
12、VirtualDOM如何实现?
a、预计算dom的各种操作，把最后一次的结果渲染出来(减少dom的渲染次数)
而Virtual
DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。
13、到底该怎么用Vue.js做单页应用开发?
其实可以直接看学习视频开始干，应该是最好的
a、介绍-vue.js官方文档的基础部分硬着头皮看一遍
我的建议是，先把介绍-
vue.js官方文档的基础部分硬着头皮看一遍。除了组件这个小节涉及到了很多晦涩难懂的名词以外，前面几章完全就是把Vue.js当作一个模版引擎来用。
b、ECMAScript6，Webpack，NPM以及Vue-Cli的基本用法，最好对Node.js也要有所了解
然后开始学习ECMAScript6，Webpack，NPM以及Vue-Cli的基本用法，最好对Node.js也要有所了解。
c、看网上各种实战视频以及文章还有别人开源的源代码
最后组件部分先大致看一遍，了解组件里面都有哪些概念之后，开始看网上各种实战视频以及文章还有别人开源的源代码。
14、ECMAScript是啥?
ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现(另外的ECMAScript方言还有
Jscript和ActionScript)。日常场合，这两个词是可以互换的。
而ECMAScript6就是新一代的JavaScript语言。
15、Webpack是啥?
a、前端打包工具
Webpack是一个前端打包和构建工具。如果你之前一直是手写HTML，CSS，JavaScript，并且通过link标签将CSS引入你的HTML文件，以及通过Script标签的src属性引入外部的JS脚本，那么你肯定会对这个工具感到陌生。不要紧，我们先来了解一下为什么要用Webpack，然后带着原因去学习就好了。
16、为什么要用Webpack?
a、方便管理各种素材
b、打包以便减少浏览器的访问次数
前面说了，做一个单页应用程序本身就相当复杂，而且在做的时候肯定会使用到很多素材和别的第三方库，我们该如何去管理这些东西呢?
还有前面讲到了Webpack是一个前端打包工具，前端代码为什么要打包呢?因为单页应用程序中用到很多素材，如果每一个素材都通过在HTML中以src属性或者link来引入，那么请求一个页面的时候，可能浏览器就要发起十多次请求，往往请求的这些资源都是一些脚本代码或者很小的图片，这些资源本身才几k，下载连1秒都不需要，但是由于HTTP是应用层协议，它的下层是TCP这个运输层协议，TCP的握手和挥手过程消耗的时间可能比下载资源本身还要长，所以需要把这些小文件全部打包成一个文件，这样只要一次TCP握手和挥手的过程，就把多个资源给下载下来了，并且多个资源由于都是共享一个HTTP请求，所以head等部分也是共享的，相当于形成了规模效应，让网页展现更快，用户体验更好。
17、NPM和Node.js又是什么?它们是什么关系?
a、Node.js是一个服务端的JavaScript运行环境
Node.js是一个服务端的JavaScript运行环境，通过Node.js可以实现用JavaScript写独立程序。
b、Node.js可以写独立程序(Webpack就是Node.js写的)
像我们之前提到的Webpack就是Node.js写的，所以作为一个前端开发，即使你不用Node.js写独立程序，也得配一个Node.js运行环境，毕竟很多前端工具都是使用它写的。
c、NPM是一个node.js的包管理器(类似java的maven(包的依赖管理)，php也有一个类似的)。
NPM是一个node.js的包管理器。我们在传统开发的时候，JQuery.js大多都是网络搜索，然后去官网下载，或者直接引入CDN资源，这种方法太过于麻烦。如果以后遇到其他的包，这个包的代码本身可能还调用了其他的包(也称这个包和其他的那几个包存在依赖关系)，那么我们要在自己的项目中引入一个包将变得十分困难。现在我们有了NPM这个包管理器，直接可以通过
npminstallxxx包名称
的方式引入它，比如说
npminstallvue
18、Vue-CLi是啥?
它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好Webpack，以及各种依赖包的工具，它可以通过
npminstallvue-cli-g
的方式安装，后面的-g表示全局安装的意思，意味着你可以打开命令行之后直接通过vue命令调用它。
19、Vuex和Vue-route是什么(暂时了解即可)?
Vuex是vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。
Vue-route是vue的一个前端路由器，这个路由器不是我们上网用的路由器，而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换，让用户感觉就像切换到了网页一样。
要讲清楚这两个东西，又得花费大量篇幅，所以这里只是简单提一下，先学好vue.js本身才是最重要的。
以上就是小编今天为大家分享的关于Web前端学习新手的常见疑问汇总的文章，希望本篇文章能够对正在学习web前端知识的小伙伴们有所帮助，想要了解更多web前端相关知识记得关注北大青鸟web前端培训官网，最后祝愿小伙伴们学习成功，成为一名优秀的web前端工程师。
来源：原创小才君软件编程网站开发
G. 卡顿或者性能差的情况，前端该如何去debug和优化
可腾讯手机管家清理加速，手机管家会智能选择并关闭后台运行的进程，快速清理手机内存。同时会全面搜索手机中的垃圾文件，并将其删除，从而迅速优化提升手机运行速度。定时给手机加速，就能让你的手机快速许多，而操作就是如此简单。
H. 前端数据多谷歌浏览器卡
内存不足，谷歌打开窗口太多、单个页面卡死或长时间没清理浏览器缓存。
调出“清除浏览数据”的对话框，选中“清空缓存”，开谷歌浏览器的任务管理器，关闭卡顿的标签页（进程）。
谷歌公司成立于1998年9月4日，由拉里·佩奇和谢尔盖·布林共同创建，被公认为全球最大的搜索引擎公司。谷歌是一家位于美国的跨国科技企业，业务包括互联网搜索、云计算、广告技术等，同时开发并提供大量基于互联网的产品与服务。
I. 发现网站加载卡顿或者性能差的情况，前端该如何去debug和优化
加载卡顿和性能差的情况，多数出在程序方面。前段的话影响不会那么大。前段要用压缩的图片，压缩的JS，css文件。保持页面适当的大小。