这里是大喵，一个刚刚步入前端行业的萌新菜鸡，第一次尝试写文章，整理了一些我遇到过的初级的前端面试题，也是为了让自己养成好的知识整理和总结的习惯。如果我写的东西各位大佬看不上，给建议就好啦，麻烦不要喷我。不要喷我不要喷我不要喷我(重要的事说三遍)
我遇到过的面试题：
1.让一个元素垂直左右居中的方式
①: 让外层元素相对定位，内层元素绝对定位，设置top和left为50%，然后设置margin-top和margin-left为负数并且是内层元素宽高的一半。
②: 让外层元素相对定位，内层元素绝对定位，不用算什么百分比margin之类的，直接写margin:auto
③：让外层元素相对定位，内层元素绝对定位。设置top left为50%，再通过transition里的translate，给他设置-50% -50%，也可以实现。translate代表元素水平和垂直方向的偏移，当括号内为百分比的时候，将以自身元素的宽高为基准，来移位相应的宽度。
④：给外层元素设置flex，用justify-content：center和align-items：center设置垂直水平居中
2.跨域的原理和解决办法
跨域是由浏览器的同源策略造成的。什么是同源策略？同源策略就是浏览器为了安全性考虑实施的非常重要的安全策略
所谓同源，有三个相同：协议相同，域名相同，端口相同。jsonP，cors，和 修改服务器端代码的响应头中的Access-Control-Allow-Origin属性为客户端网页所在地址。常用的是cors方式。
3.cs3和h5的新特新
① cs3: 颜色RGB模式，文字阴影text-shadow，边框border-radius，border-images，border-shadow，渐变linear-gradient，redial-gradient，背景background-clip(背景绘制区域)，background-size，background-origin(定位背景图像)，过渡transition，自定义动画animation，弹性布局，2D/3D转换，字体图标font-face......
② h5：表单控件number，search，tel，date，time，email，file，本地离线存储localStorage，语义化更好的标签header，footer...拖拽释放，自定义属性daya-id，音频audio 视频video，sessionStorage的数据再浏览器关闭后自动删除......
4.sessionStorage，localStorage，cookie的区别
①.Cookie： 一般由服务器生成，可设置失效时间，如果在浏览器端生成Cookie，默认是在浏览器关闭后失效。与服务器端通信每次都会携带在HTTP头中，如果使用cookie保存过多的数据会带来性能问题。场景：判断用户是否登录
②.localStorage：可以永久保存，除非被清除，它只在客户端中保存，不参与和服务器的通信。场景：用户的购物车信息
③.sessionStorage：仅在当前会话下有效，关闭页面或者浏览器后就被清除，也是一样的保存在客户端，不参与和服务器的通信。场景：遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。
5.介绍vue，vue相比其他框架的优缺点
①.vue是第三方开发的基于MVVM设计者模式的一种前端渐进式框架，可以逐渐引入vue的相关功能，很容易和其他技术进行混搭，对模板很友好，可以用npm，bower等多种方式安装。
②.vue核心只关注视图层，相对于angular来说，vue提供的API更加简洁，更容易理解，vue尽可能通过简单的API实现数据绑定和组合的视图组件，在性能上，vue使用基于依赖追踪的观察，并且使用异步队列更新，所以它的性能比angular快一点
③.react和vue比起来，它对前端初学者来说，有一个学习曲线，react只是一个视图库，并不是一个完整的框架，vue适合精而小的项目，react适合偏大的项目，react的社区贡献比vue活跃，vue的组件相对来说质量没有react高。
6.vue常用指令
v-if v-show v-on v-bind v-model v-for v-pre
7.vue实现双向绑定的原理
vue数据双向绑定是通过数据劫持结合发布-订阅者模式来实现的
在new vue时，通过Object.defineProperty()来达到数据劫持，代理所有数据的getter和setter属性，在数据变动时发布消息给订阅者，触发相应的监听回调
8..vue组件间传参
1.props和emit传参
父组件向子组件传递数据，可以使用props向子组件传递数据，
子组件向父组件传参，子组件通过$emit方法，触发父组件的v-on事件，从而实现子组件触发父组件方法。
2.vuex 传参
9.vue中data为什么需要使用return返回数据？
因为不使用包裹的数据会在项目的全局可见，造成变量污染，使用return包裹后数据中的变量只在当前组件中生效，不会影响其他组件
10.vue中获取元素
给元素绑定ref=xxx，通过this.$refs.xxx来获取
11.vuex的好处？他有哪些东西？
vuex的好处： 能够集中管理共享的数据，易于开发和后期维护，能够高效的实现组件间传参，提高开发效率，存储在vuex中的数据都是响应式的，能够实时保持数据的更新和页面同步。
①.state:提供唯一的共享资源，所有的共享资源都放在这里
②.mutation:专门修改state里的数据，可以集中监控所有数据的变化，但不能执行异步操作
③.action：专门用来处理异步任务，但是不能直接修改state，需要通过触发mutation的方式间接的修改数据
④.getter:对store里的数据加工处理后形成新的数据，简单来说，就是包装store里的数据，但是不会修改store里的数据
⑤.modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
12.说一下MVVM
MVVM是前端视图层的概念，主要关注于视图层分离，把前端的视图层分成了三部分：Model，View，ViewModel。
①视图(View)：包括以前的css+html，增强了html的功能,添加了分支和循环，增加了变量的功能{{n}}
②模型对象(Model )：专门集中保存页面所需的变量和函数的对象
③视图模型(ViewModel)：将data和methods中的函数送到界面的指定元素上，并能自动保持界面显示与data中变量值同步的一种特殊的对象
13.promise,多个异步任务怎么执行
promise专门解决回调地狱问题，使多个异步任务顺序执行
可以在原异步任务内return一个new promise，promise包含一个参数，原异步任务最后一句代码执行后调用参数。如果下一项任务也返回new promise对象，可以使用.then()相连，进行调用
14.数组去重的几种方法
①.使用包 undersore 或者是 lodash ，提高开发效率
②.使用ES6里的set，利用它元素不能重复的特点，再用Array.form方法将它转化成数组
③.使用ES6里的set，利用它元素不能重复的特点，再用展开运算符...转化为数组
④.使用ES6里的filter过滤，将indexOf返回的结果和filter里的index作对比，如果相同就返回true，就会被过滤掉。
⑤.创建新数组，使用forEach循环原数组，通过indexOf返回的的结果进行判断元素是否在新数组里已经存在，如果不存在会返回-1，那么就可以使用push添加该元素。
⑥.创建一个空对象，利用对象的key值不能重复的特点，将数组循环出来的元素作为对象的key值，再用Object.keys取出key值，用parseInt转化字符串为数组，再用map返回这个新数组。
⑦.使用sort进行数组排序，如果有重复的元素肯定是挨在一起的，那么就判断相邻的两个元素，如果不i相等，就用push添加。
15.状态码
1XX （指示信息）表示请求已接收，继续处理
2XX（成功）表示请求已被成功接收
3XX（重定向）要完成请求必须更进一步操作
4XX（客户端错误）带有请求语法错误或者请求 无法实现
5XX（服务器错误）服务器遇到错误，无法完成请求
16.get和post的区别
get的参数是可见的，post参数是不可见的
get通过拼接url进行传递参数，post通过body体传递参数
get请求时可以缓存的，post请求不可以缓存
get请求页面后退时不产生影响，post请求页面 后退时，会重新提交请求
post原则上来说安全性比get要好
17.深拷贝浅拷贝的区别
深拷贝：两个对象指向两个不同的地址，修改新对象，原对象不受改变
浅拷贝：两个对象指向同一个地址，修改新对象，原对象也会发生改变
18.如何对网站文件和资源进行优化
1.文件合并，减少http请求
2.压缩文件，减少文件的下载体积
3.使用CDN托管，是内容传输的更快更稳定
4.GZIP压缩css和js文件
19.判断数据类型
Typeof，instanceof，Object.prototype.tostring.call(array)
20.清除浮动的几种方式
1.结尾处加空div标签，clear:both
2.父级div也浮动，需要定义宽度
3.父级div定义display:table
4.结尾处加br标签，clear:both
21.call apply bind 区别
都是改变this指向
call()，第一个参数是this要指向的对象，可以传递多个参数，并且立即执行。
apply()，第一个参数是this要指向的对象，第二个参数必须是数组，并且立即执行。
bind()，第一个参数是this要指向的对象，可传递多个参数，返回一个新函数，不是立即执行。
22.js的数据类型
基本类型(null number boolean string undefined )和引用类型(function object array)：
①基本类型保存在栈内存中，引用类型保存在堆内存中
②基本类型是按值访问，操作的是实际值，引用类型是先找到内存地址再找到值
③基本类型是把自己的值复制一份，再操作复制后的值，不会影响原值。引用类型是多个变量访问同一个内存地址，再操作值后会影响值
23.闭包
什么是闭包：专门重用一个变量，又保护变量不被篡改的一种编程方法
闭包3步：
1.外层函数包裹要保护的变量和内层函数
2.外层函数用retrun将内层函数返回到外部
3.调用外层函数，获得return出的内层函数，并将内层函数保存在一个变量中重复使用
闭包形成原因：
外层函数的作用域对象被内层函数引用着，无法释放，从而形成了闭包
24..作用域和作用域链
作用域是一个变量的可用范围，是保存变量的特殊对象
js中包含2种作用域，一个是全局作用域，一个是函数作用域
作用域链：是由多级作用域，逐级引用，形成的链式结构，保存着一个函数可用的所有作用域和变量
25..浏览器兼容问题
1.CSS hack：
为了让页面形成统一的效果，要针对不同浏览器或不同版本写出对应可解析的CSS样式，我们把这个针对不同浏览器或不同版本而写css的过程叫做CSS hack
①：IE条件注释法
②：CSS属性前缀法
③：选择器前缀法
2.浏览器私有属性
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表Chrome，safari私有属性
-o代表opera私有属性
3.CSS样式初始化：reset
25.数据交互axios
1.准备：
安装，直接script标签引用
如果要全局使用，就在main.js中设置为全局的，再在组件中通过this调用
2.使用：
axios返回的是一个promise对象，所以通过.then的方式，里面用回调函数，去接受reslove的值，resolve是promise的参数，表示成功时候的状态。
3.一次合并发送多个请求
分别写两个请求函数，利用axios的all方法接收由每个请求方法组成的数组，可以一次性发送多个请求，如果全部请求成功，在axios.spread方法接收一个回调函数，该函数的参数就是每个请求返回的结果。
4.axios配置默认值
可以通过axios.defaults设置全局默认值，在所有请求中都生效
26.Ajax
1. Ajax四步：
- 创建Ajax对象
- 连接到服务器
- 发送请求
- 接收返回值
2.Ajax优缺点：
优点：页面无需刷新，由非常好的用户体验
使用异步和服务器通信，不用中断操作
可以把以前服务器负担的工作转移给客户端，减轻服务器压力
缺点：对浏览器机制的破坏，在动态更新页面的情况下，用户无法回到前一个页面状态。 对搜索引擎的支持比较弱，如果使用不当，Ajax会增加网络数据的流量，从而降低整个系统的性能
3. 应用场景
数据验证，按需取数据，自动更新页面
27.webpack
webpack 是一种前端资源构建工具，一个静态模块打包器
在 webpack 看来，前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理，它将根据模块的依赖关系进行分析，打包生成对应的静态资源(bundle)。
webpack 五个核心概念：
1.Entry
入口(Entry) 指示 webpack 以哪个文件作为入口起点开始打包，分析构建内部依赖图
2.Output
输出(Output) 指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名
3.Loader
Loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解JavaScript）
【相当于一个翻译官，将 img，less等东西翻译成 webpack 能识别能看懂的资源】
4.Plugins
插件(plugins) 可以用于执行范围更广的任务。插件的范围包括，从打包优化到压缩，一直到重新定义环境中的变量等
5.Mode
模式(Mode) 指示 webpack 使用相应模式的配置。分为 development 和 production
5-1.development
开发模式 能让代码在本地调试运行的环境
5-2.production
生产模式 能让代码上线运行的环境
28.position的值，relative和absolute分别是相对于谁定位的？
①relative：相对定位，相对于自己本身在正常文档流中的位置进行定位
②absolute：生成绝对定位，相对于最近一级定位不为static的父元素进行定位
(static：默认值，没有定位，元素出现在正常的文档流中）
29.ES5和ES6的新特性
ES6：let 和 const命令，模板字符串，解构表达式，map和reduce，箭头函数，展开运算符，promise，set，class类，for...of循环
ES5：声明变量只有var，声明函数只有function，严格模式 use strict
30.面向对象三大特征
封装、继承和多态。
1、封装是指将某事物的属性和行为包装到对象中，这个对象只对外公布需要公开的属性和行为，而这个公布也是可以有选择性的公布给其它对象。
2、继承是子对象可以继承父对象的属性和行为，亦即父对象拥有的属性和行为，其子对象也就拥有了这些属性和行为。
3、多态性是指允许不同类的对象对同一消息作出响应。
31.javascript 对象的几种创建方式
- 使用字面量方法，通过大括号{}创建对象
- 使用构造函数方法对象 (构造函数：首字母大写，用来创建对象，里面的this指新创建的对象)
- 使用原型对象的方式 ( prototype关键字创建)
- 使用工厂方式创建(object关键字)
- 混合模式(原型+构造函数)
32.怎么理解内存泄漏和内存溢出
1.内存泄露：指程序在申请内存后，被某个对象一直持有，无法释放已申请的内存空间，一次内存泄露可以忽略，但内存泄漏堆积后果很严重，无论多少内存，迟早会被占光
2.内存溢出：指程序在申请内存时，没有足够的内存空间供其使用
33.堆和栈的区别
栈主要存储的是基本变量和对象的引用
堆主要存储的是实例对象
栈存取速度比较快
堆存取速度比较慢
栈每个线程都有一个栈
堆所有线程共享一个堆
栈垃圾回收比较频繁
堆垃圾回收不是那么频繁
34.css中link和@import的区别
link是XHTML标签，除了加载css之外，还可以定义RSS等其他事务.
@import属于css范畴，只能加载css
link引用css时，在页面加载时同时加载
而@import需要在页面加载完毕后加载
link无兼容问题，@import低版本的浏览器不支持
35.js延迟加载的方式有哪些？
- 使用defer属性
- 使用async属性
- 使用setTimeout延迟方法
- 把JS放在最后
36.虚拟DOM
虚拟DOM就是为了解决浏览器性能问题而被设计出来的
虚拟DOM树的优点：
- 它很小，只包含可能变化的元素
- 遍历查找快
- 修改效率高：只修改受影响的元素
- 避免重复编码
37..json
是为了使数据格式成为一种标准，很简单的被javascript解析
优缺点：
轻量级的数据交换格式，读写更容易，易于解析和生成，支持多种语言
json的片段创建和验证稍显复杂，学习成本比较高。
38。箭头函数需要注意的地方
不可以当成构造函数使用new命令，需要注意this指向，this指向的是定义时所在的对象，而不是使用时所在的对象。