原生到框架常见面试题

主要记录学习过程中所遇到的一些问题总结，如有错误欢迎指出，轻喷~

1、H5的新特性(api)：

1、H5的新标签：

article，aside，header，footer，details，mark，section，dialog（定义对话框），figure（规定独立的流内容）。
H5 canvas元素用于图形的绘制，通过JS脚本来完成。
**媒体：**audio（音频），video（视频）。
H5新增的input类型,number，email，url，range(用于输入包含一定范围内数字值得文本框，在网页中显示为滚动条)
H5的web存储，SessionStorage和LocalStorage。

2、C3有哪些新特性：

1. css3的选择器：last-child nth-child（n） nth-last-child（n）。
2. 圆角：border-radius 阴影：box-shadow css的弹性盒模型。css的制作特效：transition，transform 2D效果，animate动画。

3、 ES6的新特性：

箭头函数：没有this的指向，不能new。
array.from可以将伪数组转成真数组。
模板字符串、解构赋值、 ...展开操作符。
数组的遍历方法：map方法。
class语法创建类。
let和const定义变量。
数组
find();查找数组某个元素 存在返回数组 undefine
findIndex();查找某个元素的索引值
some();数组中是否有元素符合条件
every();数组中是否所有的元素都符合条件
对象
Object.assign(); 复制一个对象 属于浅拷贝
Object.keys(); 得到一个对象的所有属性； 返回该对象的所有属性名数组；
Object.values(); 得到一个对象的所有可枚举属性值；返回该对象所有属性值的数组；
Object.entries(); 得到一个对象的键值对数组；
Object.fromEntries(); entries的逆操作； 一般浏览器不支持

var obj={name: "Tom",age: 18}
console.log(Object.values(obj)) //[ 'Tom', 18 ]
console.log(Object.keys(obj)) //[ 'name', 'age' ]
console.log(Object.entries(obj)) //[ [ 'name', 'Tom' ], [ 'age', 18 ] ]

3、原生问题

1、ajax请求时get和post的区别：

get请求会将参数跟在URL后面进行传递，而post请求则是作为HTTP的实体消息发送给web服务器。get请求可提交的数据量有大小限制（只能提交少量参数）。get方式请求的数据会被浏览器缓存起来，存在安全问题。而post相对来说可以避免这些问题。二者应用不同，get多用于请求数据，post多用于提交数据。

2、 ajax请求的步骤：

首先创建XMLHttpRequest对象request，然后使用该对象的open方法，与服务器建立连接，之后设置回调函数，在回调函数中通过request.response得到请求过来的数据，需要使用JSON.parse（）处理一下得到的JSON数据，得到数据后再进行需要的操作，最后向服务端发送数据即可。

3、闭包是什么，有什么特性，对页面有什么影响：

闭包就是能够读取其他函数内部变量的函数，使得函数不能够被垃圾回收机制回收，如果过多地使用闭包，会导致内存泄漏。内存泄漏的原因：闭包，没有清除变量，计时器，死循环

4、浏览器的兼容问题：

阻止事件冒泡阻止默认事件事件对象IEe.cancelBubble = truee.returnValue = falseeve非IEe.stopPropagation()e.preventDefault()window.event

5、 移动端适配问题：

样式缩放：直接用px为单位，按视觉进行开发，然后通过计算屏幕与网页的宽高比，使用transform：scale对网页进行全局缩放。rem缩放：通过rem为单位来进行视觉开发，然后通过计算后的改变html的font-size来对页面进行缩放。

6、 gulp与webpack的区别：

gulp严格意义上来讲，模块化开发不是它强调的东西，它主要是规范前端的开发流程。 webpack更是强调模块化开发，而那些文件压缩，合并等功能，只是它的附带功能.
7、 mvc，mvp，mvvm三种设计模式的区别：
mvc模式就是将模型，视图之间实现代码分离松散耦合，使之成为一个更容易开发，维护和测试的客户端应用程序。缺点不适合小型应用程序，视图和控制器之间的联系过于紧密mvp是mvc模式的改良版，模型和视图完全分离，我们可以修改视图而不影响模型。可以更高效的使用模型，因为所有的交互效果都发生在presenter内部。mvvm优点：低耦合，可重用性，独立开发，可测试。

8、 前端优化：

减少HTTP请求次数，因为每个请求都是有成本的，既包含时间成本也包含资源成本。合理的设置HTTP缓存，缓存的力量是强大的，恰当的缓存设置可以大大的减少http的请求。（能缓存越多越好，能缓存时间越长越好）资源的合并和压缩，将外部JS文件置底。如果将脚本放在靠前的位置，则会影响整个页面的加载速度从而影响用户的体验。

9、解释JSONP的原理，以及为什么不是真正的ajax：

jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过src属性获取js文件中的js脚本，该脚本内容是一个函数调用，然后在事先在页面定义好的回调函数中处理这些返回的数据，本质上并不是真正的ajax。

10、 项目的流程：

产品经理确定需求，出UI原型图，交互设计师设计交互，UI设计师出UI设计图，前端工程师根据UI图出页面，后端依照数据，设计数据库，写接口，最后测试验收。。。

11、 前后端数据交互：

**form表单提交：**当点击submit按钮时，浏览器会默认将你在input里面输入的内容，以get/post的方式提交到form表单中的action这个地址。
**ajax：**浏览器提供了XMLHttpRequest对象，使得浏览器可以发出http请求与接收http响应，实现在页面不刷新的情况下和服务端进行数据交互。

12、 闭包的使用场景：

使用闭包代替全局变量。函数外或者其他函数要访问某个函数内部的变量。

13 、js的事件流模型都有什么：

事件冒泡：事件开始由最开始的元素接受，然后逐级向上传播。
事件捕捉：事件由最不具体的节点接收，然后逐级向下，一直到具体的。
DOM事件流：三个阶段：事件捕捉，目标阶段，事件冒泡。

14、 JS延时加载的方式有哪些：

await和async动态创建script标签，插入到DOM中，加载完毕后执行回调函数，按需异步加载JS。

15、form表单input可以设置readonly和disable，请问下二者的区别：

readonly不可编辑，但是可以选择和复制，值可以传到后台。disable不可编辑，不可选择和复制，值不可以传到后台。

16、 js3中主要数据类型：

string，boolean，number，复合类型数据：function，object。特殊数据类型：undefined，null。

17、降维数组：

var arr=[[1,2],[3,4]];
function Jw(obj) {
	return Array.prototype.concat.apply([],obj);
}
Jw(arr);   

18、盒子模型（请描述一下box-sizing可能的取值以及对应的表现）

box-sizing：content-box（标准盒模型content+border+padding+margin）。
box-sizing：border-box（怪异盒模型content+margin）。

19、 如何优化自己的代码：

代码重用，避免全局变量，注释等等。

20、 作用域链：

在JS中，只有函数才存在作用域，当一个函数中声明了另一个函数时，即是像这种函数作用域的嵌套就形成了所谓的作用域链（闭包）。

21、 position的取值有什么，分别相对于谁定位：

absolute：生成绝对定位的元素，相对于static以外的第一个父元素进行定位。
fixed：生成固定定位的元素，相对于浏览器窗口进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
static：默认值，即是不存在定位。

22、请列出CSS规则的优先级顺序：

即是css样式在浏览器被解析得先后顺序。
！important>行内样式>id>属性选择器+伪类选择器>通配选择器。

23、什么是css Module？如何使用？

CSS文件，其中所有类名和动画名在默认情况下都在本地范围内。
CSS Modules不局限于你使用哪个前端库，无论是React、Vue还是Angular，只要你能使用构建工具进行编译打包就可以使用。

24、 this的指向问题：

普通函数中，this指向其函数的直接调用者。
箭头函数中，this指向其定义环境，任何方法都改变不了其指向。
构造函数中，如果不使用new，this指向window，如果使用new创建了一个实例，则this指向该实例。
严格模式下指向undefined事件中的this，事件发生的对象。call/apply改变this的指向。

25、 event.target和event.currentTarget分别是什么？

event.target返回的是触发事件的元素。
event.currentTarget返回的是绑定事件的元素。

26、 事件触发的机制是什么？什么是事件委托？

假如我们点击一个div，实际上是先点击的document，然后点击事件传递到div，而且不会传到这个div就停止，如果div有子元素还会继续向下传递，最后又会冒泡传递到document。事件委托利用事件冒泡的原理，让某个元素所触发的事件，让他的父元素代替执行。
优点：可以节省大量内存，减少事件注册，比如在ul上代理所有的li的所有事件就很不错。
**缺点：**如果所有事件都用事件代理，可能会出现事件误判。

27、 什么是AMD,CMD,commonJS？他们的区别？

AMD：异步模块定义。
CMD：通用模块定义。
amd和cmd都是浏览器端JS模块化的规范。commonJS是服务器端JS模块化的规范。三者都是JS模块化的规范。

28、 写一个函数，清除字符串前后的空格：

```js
function trim(str) {
    if (str && typeof str === "string") {
        return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
    }
}
```

29、 原型和原型链：

每一个函数都具有prototype属性，他被默认成为一个对象，即是原型对象。
原型链：当对象使用属性的时候，就会在自身查找，有的话就直接使用，没有的话就会沿着__proto__这条链继续向下找，直到找到object原型位置，有就返回相应的值，没有就会返回undefned。（对象可以通过__proto__来寻找不属于该对象的属性，__proto__将对象连接起来组成了原型链。）

30、JavaScript是一门什么类型语言：

js是属于网络脚本语言，是一种轻量级的，单线程机制的编程语言。

31、 for循环内部有个延时器 会打印出什么？

会打印出循环最后结束时打印的值，打印次数和循环的次数一样。

32、小程序是怎么样发布的？

编写完代码之后，在微信开发者工具的工具栏点击上传按钮，输入版本号就可以上传了，进入微信公众平台，找到版本管理，点击提交审核，审核成功后，点击发布即可。

33、 怎么样在jQ中引入window对象？

> 利用jQ的extend方法:
```js
window.c = function(){}
$.extend(window,{a:function(){}, b:function(){}, c:function(){},})
```

34、 jQ链式调用的原理：

jq实例在调用内部方法的时候，都会返回自己本身的实例对象。

35、面向对象和面向过程各有什么的优点？

面向过程
优点：性能比面向对象高，因为类调用时需要实例化，开销比较大，比较消耗资源。
缺点：没有面向对象易维护、易服用、易扩展。
面向对象（OOP）：
**优点：**易维护、易复用、易扩展。由于面向对象有封装、继承、多态的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护。
缺点：性能比面向过程低。

框架常见面试题：

1、 react和vue有什么区别：

不同点：Vue通过指令v-model实现数据双向绑定，而React的数据流是单向的。在Vue中，数据由data属性在Vue对象中进行管理；在React中使用setState()方法去更新状态。Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM，而React则没有。

2、vue双向绑定的原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

3、 vue的各种指令：

v-once:可以执行一次性的插值，当数据改变时，插值处的内容不会更新。
v-bind，如果标签中属性的属性值是变量，需要使用绑定属性。
v-model:输入表格指令，可以直接将值获取到。
v-for：循环遍历。
**v-if 和 v-show：如果需要频繁地切换，则使用v-show比较好；如果在运行时，条件很少改变，则使用v-if比较好。

二者的区别：if记载更快，但是性能占用高，成本高，通过布尔条件来渲染的；show加载慢，成本低，通过display:none来渲染的。**

4、 *组件之间的传值：

1. vue：
   父组件向子组件传值:
   父组件在调用子组件的地方，添加一个自定义的属性名，属性的值就是你要传给子元素的值。在子组件定义的位置，添加一个props属性，最基本的方法是数组，数组内部写上自定义的属性名，就可以在子组件中通过{{ 自定义的属性名 }}得到父组件传来的值。
   子组件向父组件传值:
   子组件内部通过this.$emit('自定义事件名'， 传递的数据)把值传出去。 父组件在调用子组件的位置，通过@自定义的事件名 = ‘父组件的方法’（不要加()），父组件实现方法，它的参数就是子组件传递过来的值。
2. react：
   父组件给子组件传值:
   父组件在调用子组件的位置，添加了自定义属性，test = ‘’，在子组件中可以通过{ this.props.test }拿到数据，如果自定义的属性的属性值是变量，list = { list.state.list }，子组件可以通过{this.props.list}拿到数据。
   子组件向父组件传值：
   父组件在调用子组件的位置，添加了自定义属性 payFn = { this.getMoney }这个自定义属性是一个函数，在子组件中可以通过this.props.payFn来调用父组件中的getMoney函数。

5、对于同步的状态改变，可以放在componnetwillmount中，对于异步的，可以放在componnetdidmount中。

6、react setstate函数的第二个参数的作用是什么：一个回调函数，当setstate结束并重新呈现该组件时将被调用。

7、 setstate的改变会触发四个钩子函数：

- shoundcomponentuodate,
- componentwillupdate
- render
- componentdidupdateprops

6、 改变会触发5个钩子函数：

- componentwillreverceprops
- shoundcomponnetupdate
- componentwillupdate
- render
- componentididupdate。

7、computed和watch有什么区别：

computed同样可以实现监听数据的变化，但是computed具有缓存的能力，当数据不发生改变时会先走缓存。

8、请详细说下你对vue生命周期的理解？**

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

9、 你是怎么认识vuex的？**

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

10、请说下封装 vue 组件的过程？

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

11、 vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

答：第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default { }
第二步：在需要用的页面（组件）中导入：import smithButton from ‘…/components/smithButton.vue’
第三步：注入到vue的子组件的components属性上面,components:{smithButton} 第四步：在template视图view中使用，<smith-button> </smith-button>
问题有：
smithButton命名，使用的时候则smith-button。

12、前端路由和vue路由：

前端路由是直接找到与地址匹配的一个组件或者对象并将其渲染出来，更新视图但不重新请求页面是前端路由的原理,vue-router

13、 vue的动态组件：

动态组件默认切换时是要销毁其他组件，如果想要保存他们，那么可以使用keep-alive包裹动态组件，可以避免重复渲染，具有缓存性。

14、activated()：

在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等， activated活跃的 deactived缓存的同步加载、异步加载、延迟加载同步模式又称阻塞模式，会阻止浏览器的后续处理，停止了后续的文件的解析，执行，如图像的渲染。流览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来异步加载也叫非阻塞模式加载，浏览器在下载js的同时，同时还会执行后续的页面处理。 在script标签内，用js创建一个script元素并插入到document中，这种就是异步加载js文件了。同步加载流程是瀑布模型，异步加载流程是并发模型。
延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js，而是在需要的时候或稍后再通过js 的控制来异步加载。 也就是将 js 切分成许多模块，页面初始化时只加载需要立即执行的 js ，然后其它 js 的加载延迟到第一次需要用到的时候再加载。 特别是页面有大量不同的模块组成，很多可能暂时不用或根本就没用到。 就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片跨域的解决

15、 JSONP(适用于单项跨域请求) 原理：

因为浏览器对script不存在同源策略，所以script可以跨域请求外部资源，返回的数据是json格式。
缺点：

• 1、只能发送get请求，无法发送post请求
• 2、无法判断请求成功还是失败

16、 porxy代理 原理：

让代理服务器请求目标地址，因为请求是在服务端进行的，在服务端不存在跨域，从而解决跨域问题 三 跨域资源共享（CORS） CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。 浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。 服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

16、react和vue两个框架的差异不同点：

Vue通过指令v-model实现数据双向绑定，而React的数据流是单向的。 在Vue中，数据由data属性在Vue对象中进行管理；在React中使用setState()方法去更新状态。 Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM，而React则没有面向对象思想面向对象的三大特征 继承、封装、多态 只需要告诉调用者对象中具体方法的功能，不需要调用者去了解方法中的实现细节。

17、原型链的继承

一、原型链继承： 二、借用构造函数 三、组合继承： 四、原型式继承： 五、寄生继承： 六：寄生组合继承(最理想)： 构造函数中有个prototype（每个函数中都有），指向他的原型对象，每个原型对象中也有一个constructor属性，指向原构造函数。通过构造函数创建的新对象中都有一个无法直接访问的[[proto]]属性，使得对象也指向构造函数的原型。这使得对象也获得了原型中的方法和属性。 当访问对象中的属性或方法时，如果对象中没有该属性或方法，则会向上一级原型对象中寻找该属性或方法，如果找了，就返回该属性，若没有则继续向上面的原型中去查找该属性。

18、promise概念：

promise 是异步编程的一种解决方案。它可以把异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。 Promise 为异步操作提供了统一的接口，使得控制异步操作更加容易，它的强大之处在于它的链式调用。
基本用法： new Promise(function(resolve, reject) { //待处理的异步逻辑 //处理结束后，调用resolve或reject方法 }) 新建一个promise很简单，只需要new 一个 Promise 对象即可。所以promise本质上就是一个函数，它接受一个函数作为参数，并且返回promise对象，这就给链式调用提供了基础。

19、 你对前端页面的性能优化有什么好的解决方案

• 1、CSS放在页面最上部（head标签中），JS 文件放在页面最下面 浏览器会在下载完成全部 CSS 之后 才对整个页面进行渲染， 因此最好的做法是将CSS 放在页面最上面（是将CSS放在head中），让浏览器尽快下载CSS。 js 文件则相反，浏览器在加载 js 后，立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此 js 最好放在页面最下面。但是，如果页面解析时就需要用到 js文件，这时放到底部就不合适了。
• 2、尽可能少的 设置 全局变量。
• 3、尽量减少DOM 操作
• 4、不要再标签中设置样式，最好 外部引用 CSS文件。
• 5、减少http 请求，合理设置 HTTP 缓存；（最有效的办法） http协议是无状态的应用层协议，意味着每次 http 请求都需要建立通信链路、进行数据传输，而在服务器端，每个 http 都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少 http 请求的数目可有效提高访问性能。 90-0p减少http 的主要手段是 合并 CSS 、 合并 js 、 合并图片（多张图片合并成一张）。 设置HTTP 缓存： 缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。假设某网站首页，当浏览器没有缓存的时候访问一共会发出 78个请求，共 600多 K数据，而当第二次访问即浏览器已缓存之后访问则仅有 10个请求，共 20多 K数据。 怎样才能合理设置？ 原则很简单，能缓存越多越好，能缓存越久越好。 如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间。
• 6、使用浏览器缓存 对一个网站而言，CSS、js、logo、图标这些静态资源文件更新的频率都比较低，而这些文件几乎是每次 http 请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。 通过设置 http 头中 的 cache-control 和 expires 的属性，可设定浏览器缓存，缓存时间可以是数天，甚至是几个月。
• 7、如果遇到大的文件，可以将文件放置在一个定时器中 ，利用异步操作，等其他的文件加载完成后，再加载 定时器中的文件。
• 8、CSS Sprites 合并 CSS 图片
• 9、 图片的懒加载 这条策略实际上并不一定能减少 HTTP 请求数，但是却能在某些条件下，或者页面刚加载时 减少 HTTP 请求数。对于图片而言，在页面刚加载的时候 ，可以只加载第一屏，当用户继续往后滚屏的时候，才加载后续的图片。
• 10、减少 cookie 传输 ，尽量使用 localStorage 存储 本地数据 一方面，cookie 包含在每次请求和响应中，太大的 cookie 会严重影响数据传输，因此哪些数据需要写入cookie 需要慎重考虑，尽量减少 cookie 中传输的数据量。
• 11、将 Image 进行压缩。

20、作用域和原型链什么是作用域链，什么是原型链？

作用域是针对变量的，比如我们创建了一个函数，函数里面又包含了一个函数，那么现在就有三个作用域 全局作用域==>函数1作用域==>函数作用域
作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找
那么什么是原型链呢？
原型链是针对构造函数的，比如我先创建了一个函数，然后通过一个变量new了这个函数，那么这个被new出来的函数就会继承创建出来的那个函数的属性，然后如果我访问new出来的这个函数的某个属性，但是我并没有在这个new出来的函数中定义这个变量，那么它就会往上（向创建出它的函数中）查找，这个查找的过程就叫做原型链。 　　Object ==> 构造函数1 ==> 构造函数2 　　就和css中的继承一样，如果自身没有定义就会继承父元素的样式。