进阶中级前端必备知识点（二）

16、与=的区别

== 用于比较两者是否相等，忽略数据类型。

=== 用于更严谨的比较，值和值的数据类型都需要同时比较。

17、BFC相关？（div塌陷问题或者clearfix（清除浮动） ）

定位方式：普通流 (normal flow)、浮动 (float)、绝对定位 (absolute positioning)

BFC 即 Block Formatting Contexts (块级格式化上下文)：具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

要元素满足下面任一条件即可触发 BFC 特性：

浮动元素：float 除 none 以外的值

绝对定位元素：position (absolute、fixed)

display 为 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC特性：

同一个 BFC 下外边距会发生折叠

BFC 可以包含浮动的元素（清除浮动）

BFC 可以阻止元素被浮动元素覆盖

清除浮动解决的方法有很多，主要目的是让父级元素有高度

方法一：给父级元素设置绝对定位：position:absolute

方法二：给父级元素设置overflow:hidden;

方法三：通过伪对象来实现

.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}

18、对盒模型的理解

盒模型其实就是浏览器把一个个标签都看一个形象中的盒子，那每个盒子（即标签）都会有内容(width,height)，边框(border)，以及内容和边框中间的缝隙（即内间距padding），还有盒子与盒子之间的外间距（即margin）

盒模型包括两种：IE盒模型和w3c标准盒模型

IE盒模型总宽度即就是width宽度=border+padding+内容宽度

标准盒模型总宽度＝border+padding+width

那如何在IE盒模型宽度和标准盒模型总宽度之间切换呢，可以通过box-sizing:border-box或设置成content-box来切换

其中：box-sizing：border-box //IE盒模型

box-sizing：content-box //w3c盒模型、

19、rem和em的区别？百分比与vw、vh的区别?

rem和em都是相对单位，主要参考的标签不同：

rem是相对于根字号，即相对于标签的font-size实现的，浏览器默认字号是font-size:16px

em:是相对于父元素标签的字号，和百分比%类似，%也是相对于父级的，只不过是%相对于父级宽度的，而em相对于父级字号的

百分比是相对于父元素标签的宽度和高度

vw和vh分别相对于屏幕宽度和屏幕高度的，1vw相当于屏幕宽度的1%,100vw相当于满屏宽度100%,

20、居中的方法有哪些？flex居中?

定位：

• 通过给div设置绝对定位，并且left,right,top,bottom设置为0,margin:auto即可以水平垂直居中
• 通过给div设置绝对定位，left为50%,top为50%,再给div设置距左是自身的一半即：margin-left:自身宽度/2,margin-top:自身高度/2。
• 通过给div设置绝对定位，left为50%,top为50%，再给div设置跨左和跟上是自身的一半：transform:translate3d(-50%,-50%,0)

flex布局:

display: flex; justify-content: center; align-items: center;

21、重绘与回流

在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：

回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置

重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

22、怎么实现响应式布局

• 媒体查询
• 百分比布局
• rem
• flex布局

23、防抖与节流

防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象

防抖：在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

节流：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

防抖和节流的区别：

– 效果：

函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

– 原理：

防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。

节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。

24、什么是闭包？闭包的作用以及会导致什么问题

闭包说的通俗一点就是打通了一条在函数外部访问函数内部作用域的通道。正常情况下函数外部是访问不到函数内部作用域变量的，

表象判断是不是闭包:函数嵌套函数,内部函数被return 内部函数调用外层函数的局部变量

优点：可以隔离作用域，不造成全局污染

缺点：由于闭包长期驻留内存，则长期这样会导致内存泄露

如何解决内存泄露：将暴露全外部的闭包变量置为null

适用场景：封装组件，for循环和定时器结合使用,for循环和dom事件结合.可以在性能优化的过程中,节流防抖函数的使用,导航栏获取下标的使用

25、什么是跨域，怎么解决？

基于ajax同源策略，因为安全的考虑，ajax不允许访问不同域名下的资源

只存在前后端访问，后端访问后端不存在跨域问题。

产生跨域的情况有：不同协议，不同域名，不同端口以及域名和ip地址的访问都会产生跨域。

解决：

一、是jsonp

jsonp实现原理：主要是利用动态创建script标签请求后端接口地址，然后传递callback参数，后端接收callback，后端经过数据处理，返回callback函数调用的形式，callback中的参数就是json

二、 是代理（前端代理和后端代理）

前端代理我在vue中主要是通过vue脚手架中的config中的index文件来配置的，其中有个proxyTable来配置跨域的

三、是CORS

CORS全称叫跨域资源共享，主要是后台工程师设置后端代码来达到前端跨域请求的

26、vuex的模块、流程、异步时action？vuex数据持久化？

vuex是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括state,actions,mutations,getters和modules 5个要素，

主要流程：组件通过dispatch到 actions，actions是异步操作，再actions中通过commit到mutations，mutations再通过逻辑操作改变state，从而同步到组件，更新其数据状态

getters相当于组件的计算属性对,组件中获取到的数据做提前处理的.再说到辅助函数的作用.

因为vuex中的state是存储在内存中的，一刷新就没了，例如登录状态，常见解决方案有：

第一种：利用H5的本地存储(localStorage,sessionStorage)

第二种：利用第三方封装好的插件，例如：vuex-persistedstate

第三种:使用vue-cookie插件来做存储

27、同步和异步的理解？异步解决方案？回调地狱？ Promise？async/await？自己实现promise？

同步即sync，形象的说就是代码一行行执行，前面代码和请求没有执行完，后面的代码和请求就不会被执行

异步：即async,形象的说就是代码可以在当前程序没有执行完，也可以执行后面的代码

异步解决方案主要有：

• 回调函数
  
• promise
  
• generator
  
• async和await
  

回调地狱：为了实现某些逻辑经常会写出层层嵌套的回调函数，如果嵌套过多，会极大影响代码可读性和逻辑，这种情况也被成为回调地狱

promise的状态改变一次以后就不会再改变，链式调用：then返回的是一个Promise对象，所以能进行链式调用。

async/await其实是Promise的语法糖， async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。

28、性能优化？

减少前端资源数量，减小前端资源大小，减少dom操作

代码层面：注意事件的销毁、路由懒加载、提取公共代码、css放前面、组件懒加载、减少代码体积大小、字体图标代替图片、使用事件委托、使用查找表、不覆盖原生方法、减低css选择器复杂度、使用flex、使用 transform 和 opacity实现动画

交互优化：减少请求数量、使用 HTTP2（头部压缩、链路复用、解析快、可设置优先级、流量控制、服务器推送）、减少重绘重排（innerHTML代替DOM操作、避免使用动态属性、脱离文档流操作再合并）

加载优化：按需引入、使用CDN、使用服务端渲染、善用缓存、避免卡顿

打包优化：使用gzip、Webpack 对图片进行压缩、webpack 按需加载代码、提取第三库代码、webpack物理打包以及配置项打包优化

其他优化：图片优化（压缩、懒加载、用webp格式，延迟加载、响应式图片）、使用工作线程Web Workers、少用全局变量

29、es6新特性

ES6新增特性常用的主要有：let/const,箭头函数，模板字符串，解构赋值，模块的导入(import)和导出(export default/export),Promise,还有一些数组字符串的新方法,其实有很多，我平时常用的就这些

30、说一下call,apply,bind区别

call,apply,bind主要作用都是改变this指向的，但使用上略有区别，说一下区别:

call和apply的主要区别是在传递参数上不同，call后面传递的参数是以逗号的形式分开的，apply传递的参数是数组形式、Apply是以A开头的,所以应该是跟Array(数组)形式的参数]

bind返回的是一个函数形式，如果要执行，则后面要再加一个小括号 例如：bind(obj,参数1,参数2,)(),bind只能以逗号分隔形式，不能是数组形式

31、var let const

var：存在变量提升，后面声明的变量会覆盖前面的变量声明、作用域不可控。

let:只能声明一次，可以重复赋值，形成暂时性死区

cosnt:只能声明一次,不能重复赋值，形成暂时性死区

32、单项数据流、双向数据流

Vue是单项数据流,数据双向绑定

单向数据流主要是vue 组件间传递数据是单向的，即数据总是由父组件传递给子组件，子组件在其内部维护自己的数据，但它无权修改父组件传递给它的数据，当开发者尝试这样做的时候，vue 将会报错。

33、SPA和MPA？

单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索

多页应用MPA（MultiPage-page application），翻译过来就是多页应用在MPA中，每个页面都是一个主页面，都是独立的当我们在访问另一个页面的时候，都需要重新加载html、css、js文件

我们熟知的JS框架如react,vue,angular,ember都属于SPA

单页应用与多页应用的区别

单页应用优缺点

优点：

具有桌面应用的即时性、网站的可移植性和可访问性

用户体验好、快，内容的改变不需要重新加载整个页面

良好的前后端分离，分工更明确

缺点：

不利于搜索引擎的抓取

首次渲染速度相对较慢

34、mvc与mvvm

MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

35、vue中，data为什么是函数？

作用域问题，为了保证互不干扰，因为一个组件是可以共享的，但他们的data是私有的，所以每个组件都要return一个新的data对象，返回一个唯一的对象，不要和其他组件共用一个对象。而且data也是一个闭包的经典使用常见。