1.箱状模式
一个框有五个主要属性:宽度、高度、填充、边框和边距。
这些模型包括标准盒模型和IE盒模型，
IE盒子型号:
不同的是，标准框模型的内容大小是内容大小，而IE的内容大小是内容+填充+边框的总大小。
那么第二个问题——这两种模式如何设定？
很简单，你可以通过设置框的大小来自由切换:内容框/边框框。
2.2.js有多少种数据类型？null和undefined有什么区别？
JS有七种数据类型:三种基本类型和两种引用数据类型。
以上四种都是简单的值类型，不是对象。
剩下的情况——函数、数组、对象、空值和新数字都是对象。它们都是引用类型。
值类型的类型由typeof判断，引用类型的类型由instanceof判断。
与null的差异未定义
Undefined的意思是“缺少值”，也就是这里应该有一个值，但是还没有定义。未定义的类型只有一个值，undefined。
所有已声明但未初始化的变量的默认值都是未定义的。
当函数没有显式返回值时，默认情况下将返回undefined。
Null是一个空指针对象。null表示“没有对象”，即那里不应该有值。
当函数返回的对象不存在时，返回null。
当不需要某个对象时，该值可以设置为null。
3.js闭包
闭包是指一个函数可以访问另一个函数的作用域变量。
明确地说，闭包是一个可以访问其他函数范围内的变量的函数。
创建闭包的通常方法是在一个函数中创建另一个函数。
由于作用域链的结构，外围函数不能访问内部变量。为了访问内部变量，我们可以使用闭包。闭包的本质仍然是函数。
4.重绘和回流
只是样式的变化不会引起DOM树的变化。页面布局的改变叫做重绘，重绘不一定伴随着回流。
引起DOM树结构和页面布局变化的行为称为回流，回流必须伴随重绘。
什么情况下会导致反流，如何避免？
1.页面的首次呈现
2.浏览器窗口大小改变
resize事件也会导致回流。
3.3的添加和删除行为。数字正射影像图
比如你想删除一个节点，给一个父元素增加一个子元素，这样的操作会造成回流。
如果要添加多个子元素，最好使用documentfragment。
documentFragment是一个包含多个元素的容器对象。当一个或多个元素被更新时，页面将不会被更新。只有当documentFragment容器中存储的所有元素都被更新并插入到页面中时，页面才能被更新。
documentFragment用于批量更新。
4.几何性质的变化
比如改变元素的宽度和高度，改变边框，改变字体大小，这种直接引起页面布局变化的操作也会引起回流。
如果要改变多个属性，最好在一个类中定义这些属性，直接修改类名，这样只造成一次回流。
5.元素位置的变化
更改元素的左右边距、填充等。
所以在制作元素位移动画时，不要改变边距等属性。离开文档流后，最好使用定位来改变位置。
5.本地存储和离线缓存
5.1本地存储
1 .饼干
在h5之前，饼干主要用于储存。cookies将与每个http请求的头信息一起发送，这实际上增加了网络流量。此外，cookies可以存储的数据容量是有限的，根据不同的浏览器类型而有所不同。
曲奇的优点和缺点
优点:可以控制过期时间，使其长期不生效，可扩展，可用性好。加密可以降低cookies被破解的可能性。缺点:数量和长度有限，最多20个cookies，最多4k。请求头上有数据安全性差的cookies的应用场景:主要应用:购物车和客户端登录。
2 .本地存储
LocalStorage，可以长期存储数据，没有时间限制，可以用一天，一年，两年，甚至更久。
优点和缺点
优点:localStorage扩展了cookies的4k限制。localStorage可以直接在本地存储第一次请求的5M数据，相比cookies可以节省带宽。localStorage的使用也遵循相同的origin策略，所以不同的网站不能直接共享同一个localStorage。缺点:需要手动删除。否则浏览器尺寸长期不一样，版本支持也不一样。localStorage只支持字符串类型存储，JSON对象需要转换。localStorage本质上是读取字符串。存储内容太多会消耗内存空，导致页卡变化特征:同源策略限制，只能本地存储，永久存储，与浏览器共享应用场合。
大数据量的临时存储方案。比如在线编辑文章时自动保存。多个页面访问公共数据。SessionStorage只适用于同一个选项卡，而localStorage可以在多个选项卡中共享数据。3 .会话存储
SessionStorage，只能在浏览器关闭前使用，可以在创建另一个页面时使用，浏览器关闭后数据会消失。
特性
同源策略限制。如果你想在不同的页面之间操作相同的会话存储，这些页面必须在相同的协议下，相同的主机名和相同的端口。单个制表符限制。SessionStorage操作仅限于单个选项卡，在该选项卡中对同一页面的所有访问都可以共享sessionStorage数据。仅存储在本地。seesionStorage的数据不会随HTTP请求一起发送到服务器，只会在本地生效，标签页关闭后会清除数据存储模式。SeesionStorage以键和值的形式存储。value的值必须是字符串类型。存储限制:不同的浏览器有不同的存储限制，但大多数浏览器都将上限限制在5MB以内。应用:sessionStorage非常适合单页应用，在各个业务模块中传递值很方便。
5.2离线缓存
应用程序缓存
1)用法:
1 >将清单属性添加到html标记
在页面的html标签中添加manifest属性，属性值为manifest文件的路径。比如:
2)编写清单文件
清单文件是一个简单的文本文件，它告诉浏览器什么需要缓存，什么不需要缓存。
清单文件可以分为三个部分:
缓存清单-此标题下列出的文件将在第一次下载后被缓存。
网络-此标题下列出的文件需要连接到服务器，不会被缓存。
FALLBACK-此标题下列出的文件指定页面不可访问时的回退页面。
3)离线缓存与传统浏览器缓存的区别:
缓存是为了节省网络资源，加快浏览速度。浏览器将最近请求的文档存储在用户的磁盘上。当访问者再次请求此页面时，浏览器可以显示本地磁盘中的文档，这可以加快页面的阅读速度。
差异:
1.离线缓存是针对整个应用的，浏览器缓存是单个文件。
2.当脱机缓存断开时，页面仍然可以打开，但浏览器缓存不能。
3.离线缓存可以主动通知浏览器更新资源。
5.3.本地存储和离线存储有什么区别？
本地存储和离线缓存都用于方便网页的加载和改善用户体验。
本地存储一般存储数据，离线缓存一般存储网页等。
6.冒泡算法思想。
排序的基本思想是:将待排序记录的关键字成对进行比较，当发现两条记录逆序时，进行交换，直到没有逆序记录为止。
使用交换排序的基本思想的主要排序方法是冒泡排序和快速排序。
7.键值在7.vue中的作用
需要使用key对每个节点进行唯一标识，Diff算法可以正确识别这个节点，找到正确的位置区域，插入新的节点。
所以总之，key的作用主要是高效的更新虚拟DOM。
8.V-if和v-show的区别
V-if是动态添加的。当值为false时，它将被完全移除，即该元素不存在于dom树中。
V-show仅隐藏/显示。当值为false时，该元素仍然存在于dom树中。如果其原始样式设置为display: none，则不会正常显示。
9.9.vue的生命周期
开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列流程。
简单就是一个组件从头到尾所经历的各种状态，也就是一个组件的生命周期。
vue实例在创建过程中调用的几个生命周期挂钩。
1.beforeCreate描述:实例初始化后，调用数据观察和事件/观察者事件配置。注意:此时无法获取data中的数据和methods中的方法。
2 .创造这是一个普通的生命周期。您可以调用方法中的方法并更改数据中的数据。最常见的是发送ajax请求来初始化构建的vue对象的静态属性。
3 .在挂载开始之前调用beforeMount。
4 .挂载至此，vue实例已经挂载到页面上，可以获取el中的DOM元素进行DOM操作。
5.当数据更新时调用5.beforeUpdate，这发生在虚拟DOM重新呈现和修补之前。您可以进一步更改此挂钩中的状态，这将不会触发额外的重新渲染。
6.更新的组件DOM已经更新了，所以现在可以执行依赖于DOM的操作了。
7.在销毁7.beforeDestroy的实例之前调用。在这一步，实例仍然完全可用。使用场景:在实例被销毁之前，执行清理任务，比如清除定时器。
8 .销毁描述:在销毁Vue实例后调用。调用后，Vue实例指示的所有内容都将被解除绑定，所有事件侦听器都将被移除，所有子实例都将被销毁。
10.跨域
1.什么是跨域请求？
在 HTML 中，, , , , , 等标签以及 Ajax 都可以指向一个资源地址，而所谓的跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不同时的请求。这里的域指的是这样的一个概念：我们认为如果 “协议 + 域名 + 端口号” 均相同，那么就是同域。在HTML中，、、、、、Ajax等标签都可以指向一个资源地址，所谓跨域请求是指当前发起请求的域与请求所指向的资源所在的域不同的请求。这里的域指的是这样一个概念，如果“协议+域名+端口号”都相同，就是同一个域。
例如，假设一个域名为aaa.cn的网站启动了一个资源路径
Aaa.cn/books/getBookInfo Ajax请求，那么这个请求是在同一个域，因为资源路径的协议、域名、端口号都和当前域一致。但是，如果因为请求域http://bbb.com:80不同于请求域http://aaa.cn:80而发起资源路径为bbb.com/pay/purchase,的Ajax请求，那么这个请求就是跨域请求。
域名、协议、端口不一样就不是一个来源，但都是一样的。这两个网站是同一个来源。
2.跨领域解决方案
1.通过jsonp跨域
jsonp的原理是利用标签的src属性发送带有回调参数的GET请求，没有跨域限制。服务器把接口返回的数据分片成回调函数返回给浏览器，浏览器解析并执行，这样前端就可以得到回调函数返回的数据。只能发送一个get请求。
2.跨域资源共享
CORS是W3C标准，全称是“跨域资源共享”。它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了AJAX只能从同一个源使用的限制。CORS需要浏览器和服务器的支持。目前所有浏览器都支持该功能，IE浏览器不能低于IE10。
3.nginx代理是跨域的。
Nginx代理是跨域的，本质上和CORS跨域原理是一样的。请求响应头中的Access-Control-Allow-Origin…等字段是通过配置文件设置的。
1)nginx配置解决iconfont跨域。
浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件例外，此时可在nginx的静态资源服务器中加入以下配置。浏览器跨域访问js、css、img等常规静态资源被同源策略允许，iconfont字体文件除外。此时，可以将以下配置添加到nginx的静态资源服务器中。
2)nginx反向代理接口是跨域的
跨域问题:同源策略只是浏览器的安全策略。服务器调用HTTP接口时，只使用HTTP协议，不需要相同的源策略，所以不存在跨域问题。
实现思路:通过Nginx配置一个与domain1相同域名(但端口不同)的代理服务器作为跳板，反向代理访问domain2接口，顺便修改cookie中的域信息，方便当前域cookie写入，实现跨域访问。
4.nodejs中间件代理是跨域的
节点中间件实现跨域代理，原理和nginx大致相同。启动代理服务器实现数据转发。还可以通过设置cookieDomainRewrite参数修改响应头中的域名，实现当前域的cookie写入，方便界面登录认证。
5.document.domain+iframe跨域
该方案仅限于主域相同，子域不同的跨域应用场景。实现原理:两个页面都通过js强制设置document.domain为基本主域，从而实现同域。
6.location.hash+iframe跨域
实现原理:A想通过中间的页面c与B跨域通信，三个页面，不同的域使用iframe的location.hash传递值，相同的域之间通过直接的js访问进行通信。
7.window.name+iframe跨域
window.name属性的唯一性:加载不同页面后名称值依然存在，可以支持很长的名称值。
通过将iframe的src属性从外地域转移到本地域，跨域数据通过iframe的window.name从外地域转移到本地域。这样巧妙地绕过了浏览器的跨域访问限制，但同时又是一种安全的操作。
8.postMessage是跨域的。
PostMessage是HTML5 XMLHttpRequest Level 2中的一个API，是少数几个可以跨域操作的窗口属性之一。它可用于解决以下问题:
以及页面和它打开的新窗口之间的数据传输。多个窗口之间的消息传递和嵌套iframe消息传递。以上三种场景的跨域数据传输9。WebSocket协议跨域。
WebSocket协议是HTML5的新协议。它实现了浏览器和服务器的全双工通信，允许跨域通信，是服务器推送技术的一个很好的实现。
原生webSocket API使用起来不是很方便。我们用的是http://Socket.io，它很好的封装了webSocket接口，提供了更简单灵活的接口，也为不支持WebSocket的浏览器提供了向后兼容性。
总结
以上就是9种常见的跨域解决方案，jsonp适合加载不同域名的js、css，img等静态资源；CORS适合做ajax各种跨域请求；Nginx代理跨域和nodejs中间件跨域原理都相似，都是搭建一个服务器，直接在服务器端请求HTTP接口，这适合前后端分离的前端项目调后端接口。document.domain+iframe适合主域名相同，子域名不同的跨域请求。postMessage、websocket都是HTML5新特性，兼容性不是很好，只适用于主流浏览器和IE10+。这些是九种常见的跨领域解决方案。jsonp适合加载不同域名的js、css、img等静态资源。CORS适合ajax跨域请求；Nginx代理跨域和nodejs中间件跨域的原理类似。两者都设置了服务器，直接在服务器端请求HTTP接口，适用于前端和后端分离的前端项目。document.domain+iframe适用于主域名相同但子域不同的跨域请求。PostMessage和websocket是HTML5的新特性，兼容性不是很好。它们只适用于主流浏览器和IE10+。
11.http状态代码
HTTP状态代码通常分为五类:
1:信息状态代码
2开始:成功状态代码
3开始:重定向状态代码
4开始:客户端错误状态代码
5开始:服务器错误状态代码
1XX:信息状态代码
2XX:成功状态代码
3XX:重定向状态代码
4XX:客户端错误状态代码
5XX:服务器错误状态代码
12.MVVM模式
MVVM由三部分组成:模型、视图和视图模型。模型层表示数据模型，数据修改和操作的业务逻辑也可以在模型中定义。视图UI组件，负责将数据模型转换成UI并显示出来。ViewModel是一个同步视图和模型的对象。
在MVVM架构下，视图和模型之间没有直接的联系，但是模型和视图模型之间的交互是双向的。因此，视图数据的变化将与模型同步，模型数据的变化将立即反映到视图中。
ViewModel通过双向数据绑定连接视图层和模型层，视图和模型的同步完全自动，无需人工干预。所以开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态同步。复杂的数据状态维护由MVVM管理。
原作者姓名:吴小华的博客原文来源:CSDN
