前端部分面试题汇总

1.v-show和v-if指令的共同点和不同点？
二者都可控制元素的显示或隐藏。V-show的隐藏的元素，通过设置元素的display：none，在dom树中依然存在，v-if条件判断后隐藏的元素，在dom树中不再存在。
2.如何让css只在当前组件中起作用
使用scoped
3.的作用是什么？
是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
4．请简单解释以下VUE常用的修饰符的含义：
.prevent:阻止元素默认事件
.stop:阻止冒泡
.self:只执行本身的函数
.capture:打乱冒泡（改为从外向内执行）
5.vue生命总共有几个阶段？分别是什么
Beforecreate();实例创建完成，dom和元素尚未初始化
Created();数据data已经初始化完成，方法可以调用，但DOM尚 未渲染。
Beforemount();dom未挂载，数据的双向绑定显示{{}}。
Mounted();数据和DOM都挂在完成，一般请求都会放在该位置， 因为请求之后改变数据刚好渲染。
Beforeupdate();只要页面数据改变都会触发，当请求赋值一个数据 的时候会执行该周期，但数据改变没有执行。
Updated();只要页面改变了都会触发，数据更新完毕。
Beforedestory()这个周期是在组件销毁之前执行，在我项目开发中，觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method。比如一个倒计时组件，如果在路由跳转的时候没有清除，这个定时器还是在的，这时候就可以在这个里面清除计时器。
Destoryed();类似于beforedestory();
6.第一次页面加载会触发哪几个生命周期钩子？
根实例的加载相关的生命周期（beforeCreate、created、beforeMount、mounted）
组件实例的加载相关的生命周期(beforeCreate、created、beforeMount、mounted)
全局路由勾子(router.beforeEach)
组件路由勾子(beforeRouteEnter)
组件路由勾子的next里的回调(beforeRouteEnter)
指令的周期(bind,inserted)
nextTick方法的回调
7.DOM渲染在哪个周期中就已经完成？
Mounted()
8.Vue的路由实现：hash模式和history模式的区别是什么?
Hash模式：成为前端路由模式，通过地址栏触发hashchange事件，改变的是#后的URL地址。路由地址栏的变化时，浏览器不会向服务器发送请求；
History模式：只兼容IE10以上，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。Api有：back，forward，go。
9.$route和$router的区别？
$router是VUE的一个实例对象，有自己的方法e.g push/replace。
$route是Router下路由信息对象，内部包含有Parama，Query，name，path等信息
10.vuex中Mutation, Action的区别是什么？
Mutation是改变state的方法，是同步操作，action是异步的，最终触发mutation实现对state的更改。
11.axios的请求拦截器，响应拦截器有什么用？分别能做什么？
请求拦截器：在axios发送请求前，对请求进行操作。
响应拦截器：在接收响应过后，对响应进行操作。
12.请简单解释一下webpack，并解释其中常见loader的含义：
Webpack是一个JS应用程序的静态模块打包器。通过构建一个依赖关系图，将程序打包成一个或多个bundle。
file-loader:将文件输出到文件夹并返回URL
url-loader:像file-loader一样工作
image-loader:
css-loader:解析CSS文件后，使用import加载，并返回CSS代码
style-loader:讲模块的导出作为样式添加到DOM中
eslint-loader:Preloader，使用ESLint清理代码
13.简述一下VUE与React的相同点和不同点
相同点：
1、react和vue都支持服务端渲染
2、都有虚拟DOM，组件化开发，通过props传参进行父子组件数据的传递
3、都是数据驱动视图
4、都有支持native的方案（react的react native，vue的weex）
5、都有状态管理（react有redux，vue有vuex）
不同点：
1、react严格上只能算是MVC的view层，vue则是MVVM模式
2、虚拟DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树，而对于react而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
3、组件写法不一样，react推荐的做法是JSX+inline style,也就是把HTML和CSS全都写进javaScript了
4、数据绑定：vue实现了数据的双向绑定，react数据流动是单向的
5、state对象在react应用中是不可变的，需要使用setState方法更新状态
在vue中，state对象不是必须的，数据有data属性在vue对象中管理
14.常用浏览器测试？有哪些内核（Layout Engine）?
1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；
15.说下行内元素和块级元素的区别？行内块元素的兼容性使用？
16.你对JSON的了解？
JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。
Json.stringify转字符串/json.parse转对象
17.js有哪些内置对象？
时间对象date，字符串对象string，数学对象Math，数值对象Number，数组对象Array，函数对象function,函数参数集合arguments,布尔对象Boolean，错误对象Error,基础对象Object
18.请写出至少5个html5新增的标签，并说明其语义和应用场景
Audio音频、video视频、canvas画布、header头、nav导航栏
19.线程与进程的区别
进程：是并发执行的程序在执行过程中分配和管理资源的基本单位，是一个动态概念，竞争计算机系统资源的基本单位。
线程：是进程的一个执行单元，是进程内科调度实体。比进程更小的独立运行的基本单位。线程也被称为轻量级进程。
一个程序至少一个进程，一个进程至少一个线程。
20.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式设计是一个页面可以适配多个终端。基本原理是通过媒体查询检测不同屏幕的尺寸，从而达到适配。一，支持IE10及以上
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
css代码
}
二，支持IE9及以上
@media screen and (min-width:0\0) {
css代码
}
三，支持IE8及以上
@media screen\0 {
css代码
}
四，仅支持IE8
@media \0screen {
css代码
}
五，支持IE8及以下
@media \0screen,screen\9 {
css代码
}
六，支持IE7及以下
@media screen\9 {
css代码
}
七，仅支持谷歌
@media screen and (-webkit-min-device-pixel-ratio:0) {
css代码
}
21.讲讲输入网址按下回车，到看到网址这个过程发生了什么？
22.谈谈你对前端性能优化的理解。
减少HTTP请求，减少DOM操作，图片代码等压缩
23.请你谈谈Cookie的弊端。
优点：极高的扩展性和可用性
1.通过良好的编程，控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点：
1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
24.浏览器本地存储
Cookie\webstorage
25.web storage和cookie的区别
Cookie是与服务器交互的一种方式，作为http规范存在，webstorage则是本地储存数据的一种方式。
26.请说出三种减少页面加载时间的方法
减少http请求，压缩图片、代码、文末加入JS代码、减少DOM操作等
27.列举IE与其他浏览器不一样的特性？
1、表示发生事件：
（1）非IE浏览器下，事件对应的函数有一个隐藏的变量e，表示发生事件。
（2）IE下，不需要e变量，window.event表示发生事件。
解决方案：用e||window.event来兼容。
2、触发事件对象（触发事件的元素被认为是目标target）：
（1）IE下，window.event对象有srcElement属性，但没有target属性。
（2）Firefox下，e对象有target属性，但没有srcElement属性。
（3）Chrome下，e对象同时具有target和srcElement属性。
解决方案：event.srcElement ? event.srcElement : event.target来兼容。
3、按键码（字符代码）：
（1）IE下，window.event对象只有keyCode属性。
（2）FireFox下，e对象有which和charCode属性。
（3）Opera下，e对象有keyCode和which属性。
（4）Chrome下，e对象有keyCode、which和charCode属性。
解决方案：用e.keyCode || e.which || e.charCode来兼容。
4、阻止事件的默认行为：
（1）IE 中阻止事件的默认行为需要将window.event.returnValue属性设置为false。
（2）非IE阻止事件的默认行为需要调用 e.preventDefault() 方法。
解决方案：条件判断浏览器是否具有event.preventDefault再做相应处理。
5、阻止事件冒泡：
（1）IE阻止事件冒泡需要设置window.event.cancelBubble = true。
（2）非IE阻止事件冒泡需要调用e.stopPropagation()。
解决方案：条件判断浏览器是否具有event.stopPropagation再做相应处理。
6、IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置margin:0;padding:0以及list-style:none；
28.vue单页面应用及其缺点。
优点：
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：
不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。
29.平时如何管理你的项目？

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

1. 表格(table)布局改为 DIV + CSS
2. 使网站前端兼容于现代浏览器(针对于不合规范的 CSS、如对 IE6 有效的)
3. 对于移动平台的优化
4. 针对于 SEO 进行优化
5. 深层次的网站重构应该考虑的方面
6. 减少代码间的耦合
7. 让代码保持弹性
8. 严格按规范编写代码
9. 设计可扩展的 API
10. 代替旧有的框架、语言(如 VB)
11. 增强用户体验
12. 通常来说对于速度的优化也包含在重构中
13. 压缩 JS、CSS、image 等前端资源(通常是由服务器来解决)
14. 程序的性能优化(如数据读写)
15. 采用 CDN 来加速资源加载
16. 对于 JS DOM 的优化
17. HTTP服务器的文件缓存
    32.iframe的优缺点，如何替换

33 .link和@import的区别
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5.权重区别(该项有争议，下文将详解)
link引入的样式权重大于@import引入的样式。

Tips：CSS选择器的权重!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

34.vue路由有哪几种跳转方式，怎么携带参数?
①
②this.$router.push(path:‘/home’)this.$router.push({path:‘/home’,query:{id:1}})
this.$router.push(name:‘home’,query:id:1)this.$router.push({name:‘home’,params:{id:1}})
③this.$router.replace({path:’./’}) 传参同push
35.DIV+CSS怎么实现一个网页的自适应布局，移动端怎么适配？

36.作用域链和原型链的区别？
作用域链：内部环境可以通过作用域链来访问外部环境的属性和方法，但是，外部环境不能访问内部环境的任何属性和方法。注意，只能通过定义函数来延长作用域链条。
原型链：原型链是用于查找引用类型（对象）的属性，查找属性会沿着原型链依次进行，如果找到该属性会停止搜索并做相应的操作，否则将会沿着原型链依次查找直到结尾。常见的应用是用在创建对象和继承中。
37.浏览器兼容性的问题有哪些？
IE6不支持png-24透明图片
解决方法：图片使用gif格式，或者png-8格式图片。
【问题描述】像素问题：
解决方法：对另一个div也使用float;
【问题描述】浏览器默认的margin和padding不同
解决方案是加一个全局的*{margin:0;padding:0;}来统一。
【问题描述】 IE5-IE8不支持opacity
解决方法：这时可以另外添加ie滤镜alpha
【问题描述】IE6不能定义1px左右宽度的容器
解决方法：因为行高line-height在IE6下有默认值，设置 line- height:1px|overflow:hidden|zoom:0.08
【问题描述】IE6不支持min-*:问题出现的浏览器：IE6及其更低的版本
解决方法：利用IE6不识别！Important，给元素设置固定高度，并且设置元素高度自动。
【问题描述】双外边距浮动问题：IE6及其更低的版本
解决办法：将元素的display属性设置为inline，因为元素是浮动的，所以这么设置
【问题描述】Firefox点击链接出现的虚线框：Firfox浏览器
解决方法：我们为了和其他浏览器保持一致，需要去掉虚线框，我们可以给a标签设置outline属性

38.Vue中Paramas和Query的区别
Query可以用name或path引入路由，query会表现在地址栏上？id=xxx
Params只能用name，在地址栏上表现为/params/
39.VUE路由守卫是什么？
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数：
1、to:即将要进入的目标路由对象；
2、from:当前导航即将要离开的路由对象；
3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。
next()//直接进to 所指路由
next(false) //中断当前路由
next(‘route’) //跳转指定路由
next(‘error’) //跳转错误路由
40.TypeScript和JavaScript的区别
JavaScript 是轻量级的解释性脚本语言，可嵌入到 HTML 页面中，在浏览器端执行。而TypeScript 是JavaScript 的超集，即包含JavaScript 的所有元素，能运行JavaScript 的代码，并扩展了JavaScript 的语法。相比于JavaScript ，它还增加了静态类型、类、模块、接口和类型注解方面的功能，更易于大项目的开发。
ts最终仍要编译为弱类型，基于对象的原生的js，再运行。故ts相较java/C#这样天生面向对象语言是有区别和局限的
ts是由微软牵头主导的，其语法风格与概念主要来自C#.