大家好，我是讯享网，很高兴认识大家。



1.盒子模型

一个盒子中主要的属性就5个：width、height、padding（内边距）、border、margin（外边距）。

盒模型有标准盒模型和IE的盒模型，

IE盒模型：

不同之处就是标准盒模型的内容大小就是content的大小，而IE的则是content + padding +border 总的大小。

JS有7种数据类型：三种基本类型（数字，字符串，布尔），两种引用数据类型（对象，数组)，两种特殊数据类型（undefined，null）

其中上面的四种（undefined, number, string, boolean）属于简单的值类型，不是对象。

剩下的几种情况——函数、数组、对象、null、new Number(10)都是对象。他们都是引用类型。

值类型的类型判断用typeof，引用类型的类型判断用instanceof。

undefined表示“缺少值”，就是此处应该有一个值，但是还没有定义，undefined类型只有一个值，undefined.
（1）所有已声明但是没有初始化的变量，默认值都为undefined。
（2）函数没有明确返回值的时候，会默认返回undefined。

null为一个空指针对象null表示“没有对象”，即该处不应该有值
当函数返回的对象不存在时，返回null。
当某个对象不需要时，可将值设为null。

闭包是指有权访问另一个函数作用域变量的函数。

清晰的讲：闭包就是一个函数，这个函数能够访问其他函数的作用域中的变量。

创建闭包的通常方式，是在一个函数内部创建另一个函数。

由于作用域链的结构，外围函数是无法访问内部变量的，为了能够访问内部变量，我们就可以使用闭包，闭包的本质还是函数

只是样式的变化，不会引起DOM树变化，页面布局变化的行为叫重绘，且重绘不一定会伴随回流

引起DOM树结构变化，页面布局变化的行为叫回流，且回流一定伴随重绘。

什么情况下回导致回流，如何避免回流？

1.页面初次渲染

2.浏览器窗口尺寸改变

resize事件发生也会引起回流。

3.DOM的增删行为

比如你要删除某个节点，给某个父元素增加子元素，这类操作都会引起回流。

如果要加多个子元素，最好使用documentfragment。（让要操作的元素进行离线处理，处理完事以后再一起更新）

documentFragment是一个保存多个element的容器对象（保存在内存）当更新其中的一个或者多个element时，页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。
documentFragment用来批量更新

4.几何属性的变化

比如元素宽高变了，border变了，字体大小变了，这种直接会引起页面布局变化的操作也会引起回流。

如果你要改变多个属性，最好将这些属性定义在一个class中，直接修改class名，这样只用引起一次回流。

5.元素位置的变化

改一个元素的左右margin，padding之类的操作

所以在做元素位移的动画，不要更改margin之类的属性，使用定位脱离文档流后改变位置会更好

（1）在h5之前，存储主要用的是cookie。cookie会随着每次http请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同

（2）cookie的优缺点

（3）cookie的应用场景：主要应用：购物车、客户端登录

讯享网

（1）localStorage（本地存储）,可以长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据都可以使用

（2）优缺点

（3）应用场合

（1）sessionStorage（会话存储），只有在浏览器被关闭之前使用，创建另一个页面时同意可以使用，关闭浏览器之后数据就会消失

（2）特点

（3）应用场合：sessionStorage 非常适合单页应用程序，可以方便在各业务模块进行传值。

1）使用方法：

1> 在html标签添加manifest属性

在页面的html标签中添加manifest属性，属性值为manifest文件的路径。如：

2）编写manifest文件

manifest文件是简单的文本文件，它会告知浏览器需要缓存的内容以及不需要缓存的内容。

3)离线缓存与传统浏览器缓存区别：

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

所以一句话，key的作用主要是为了高效的更新虚拟DOM

v-if 是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。

v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示

从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程

简单讲是一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

一个vue实例在创建过程中调用的几个生命周期钩子。

1.beforeCreate 说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用 注意：此时，无法获取 data中的数据、methods中的方法
2.created 这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据。最常见的就是发送ajax请求来对已经构建完毕的vue对象的静态属性进行一些初始化。
3.beforeMount 在挂载开始之前被调用
4.mounted 此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作
5.beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
6.updated 组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
7.beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。使用场景：实例销毁之前，执行清理任务，比如：清除定时器等
8.destroyed 说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

在 HTML 中，, , , , ,  等标签以及 Ajax 都可以指向一个资源地址，而所谓的跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不同时的请求。这里的域指的是这样的一个概念：我们认为如果 “协议 + 域名 + 端口号” 均相同，那么就是同域。

举个例子：假如一个域名为 的网站，它发起一个资源路径为 的 Ajax 请求，那么这个请求是同域的，因为资源路径的协议、域名以及端口号与当前域一致（例子中协议名默认为http，端口号默认为80）。但是，如果发起一个资源路径为 的 Ajax 请求，因为请求域 http://和发起请求的域 http://不同，那么这个请求就是跨域请求。

域名、协议、端口有一个不同就不是同源，三者均相同，这两个网站才是同源

jsonp的原理就是利用标签没有跨域限制，通过标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。只能发送get一种请求。

2、跨域资源共享（CORS）

CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

3、nginx代理跨域

nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。

1）nginx配置解决iconfont跨域

浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入以下配置。

2）nginx反向代理接口跨域

跨域问题：同源策略仅是针对浏览器的安全策略。服务器端调用HTTP接口只是使用HTTP协议，不需要同源策略，也就不存在跨域问题。

4、nodejs中间件代理跨域

node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。

5、document.domain + iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景。实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

6、location.hash + iframe跨域

7、window.name + iframe跨域

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

8、postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

9、WebSocket协议跨域

小结

状态码含义描述100继续初始的请求已经接受，请客户端继续发送剩余部分101切换协议请求这要求服务器切换协议，服务器已确定切换

2XX：成功状态码

状态码含义描述200成功服务器已成功处理了请求201已创建请求成功并且服务器创建了新的资源202已接受服务器已接受请求，但尚未处理203非授权信息服务器已成功处理请求，但返回的信息可能来自另一个来源204无内容服务器成功处理了请求，但没有返回任何内容205重置内容服务器处理成功，用户终端应重置文档视图206部分内容服务器成功处理了部分GET请求

3XX：重定向状态码

状态码含义描述300多种选择针对请求，服务器可执行多种操作301永久移动请求的页面已永久跳转到新的url302临时移动服务器目前从不同位置的网页响应请求，但请求仍继续使用原有位置来进行以后的请求303查看其他位置请求者应当对不同的位置使用单独的GET请求来检索响应时，服务器返回此代码304未修改自从上次请求后，请求的网页未修改过305使用代理请求者只能使用代理访问请求的网页307临时重定向服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求

4XX：客户端错误状态码

状态码含义描述400错误请求服务器不理解请求的语法401未授权请求要求用户的身份演验证403禁止服务器拒绝请求404未找到服务器找不到请求的页面405方法禁用禁用请求中指定的方法406不接受无法使用请求的内容特性响应请求的页面407需要代理授权请求需要代理的身份认证408请求超时服务器等候请求时发生超时409冲突服务器在完成请求时发生冲突410已删除客户端请求的资源已经不存在411需要有效长度服务器不接受不含有效长度表头字段的请求412未满足前提条件服务器未满足请求者在请求中设置的其中一个前提条件413请求实体过大由于请求实体过大，服务器无法处理，因此拒绝请求414请求url过长请求的url过长，服务器无法处理415不支持格式服务器无法处理请求中附带媒体格式416范围无效客户端请求的范围无效417未满足期望服务器无法满足请求表头字段要求

5XX：服务端错误状态码

状态码含义描述500服务器错误服务器内部错误，无法完成请求501尚未实施服务器不具备完成请求的功能502错误网关服务器作为网关或代理出现错误503服务不可用服务器目前无法使用504网关超时网关或代理服务器，未及时获取请求505不支持版本服务器不支持请求中使用的HTTP协议版本

12.MVVM模式

原作者姓名：吴小花的博客
原出处：CSDN
原文链接：最全前端面试总结_吴小花的博客-CSDN博客