1.你知道的布局方式有哪一些
流式，浮动，定位，弹性，表格，网格，%，rem，vw/vh，响应式等等太多了
1:静态布局:一般以px来作为单位,传统的web布局
2.流式:百分比布局
3.自适应布局:AWD
4.响应式布局:RWD
5.弹性布局 rem/em布局
6.定位布局
7.浮动布局
8.网格布局:Gird布局
2.解释一下重绘和回流
二:
(从他们的区别以及能够举出例子说明什么时候会引起重绘和回流)
重绘:当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了，这个过程称之为repaint.
(当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color，我们将这样的操作称为重绘)
回流:对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow.
常见引起回流属性和方法：
任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。
（1）添加或者删除可见的 DOM 元素； （2）元素尺寸改变——边距、填充、边框、宽度和高度 （3）内容变化，比如用户在 input 框中输入文字 （4）浏览器窗口尺寸改变——resize事件发生时 （5）计算 offsetWidth 和 offsetHeight 属性 （6）设置 style 属性的值 （7）当你修改网页的默认字体时。
区别:回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。
3.描述一下Ajax的流程
结合原生AJAX流程图，点出AJAX状态，属性
流程:
1.使用js内置的构造函数:（window.XMLHttpRequest）来创建ajax对象
2.打开连接的通道:(open)//添加请求方式是get还是post 请求的url 异步还是同步(async/await)
get:只能传输少量数据 通过路径携带传输 传输不安全 （传送速率快） post: 对于传输的数据没有大小限制 独立传输 相当安全 （传送速率慢）而且需要设置请求头:xhr.setRequestHeader('Content-type','*')
3.发送请求:(send)
4.接收返回的值和监听的状态(返回的readyState和监听状态status)
readyState状态码: 0 :状态初始化（还没有调用open方法） 1 :服务器已连接（send方法完成，正在发生请求） 2 :请求已接受（send完成，已接收到全部响应内容） 3 :请求处理中(解析响应内容) 4 :请求已完成，且响应已就绪
status监听状态码:
1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本
4.说说你对SPA单页面的理解
往SPA单页应用优缺点，并结合实现原理来说
1.什么是SPA:SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面举个例子来讲就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们发现，变的始终是杯子里的内容.
优点：
- 具有桌面应用的即时性、网站的可移植性和可访问性
- 用户体验好、快，内容的改变不需要重新加载整个页面
- 良好的前后端分离，分工更明确
缺点：
- 不利于搜索引擎的抓取
- 首次渲染速度相对较慢
补充:如何给SPA做SEO
1.SSR服务端渲染
将组件或页面通过服务器生成html，再返回给浏览器，如nuxt.js
2.静态化
目前主流的静态化主要有两种：（1）一种是通过程序将动态页面抓取并保存为静态页面，这样的页面的实际存在于服务器的硬盘中（2）另外一种是通过WEB服务器的 URL Rewrite的方式，它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址，一句话来说就是把外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果.
5.说说你理解的MVVM
结合目前流行的前端框架，解释MVVM模式下各个板块的作用
拿Vue中的MVVM来举例:
MVVM：数据驱动视图。只需要更改数据，不需要自己操作DOM，Vue框架本身会根据数据重新渲染视图。
MVVM 是 Model-View-ViewModel 的缩写分别对应
MVC模型里面的Model-View-Controller所以其本质上就是MVC的改进版.
M(Model模型层):主要负责数据相关业务,进行数据的业务逻辑处理.
V(View视图层):负责视图相关业务,比如网页的Dom.
VM(ViewModel视图模型层):是Model层和View层交互的桥梁,负责监听M然后对V进行修改,实现M和V的双向绑定.当M层的数据发生修改时,VM层会监测到变化然后立马对V层的数据也进行修改,进而实现数据的双向绑定.反之当V层的数据发生修改时,VM层也会监测到变化然后对M层的数据进行修改.
也就是说,Model层和View层不会直接相互操作,而是通过VM层进行互相联系,从而降低了耦合.
补充:
MVVM模式的主要目的就是分离视图层和模型层,这样做的好处是:
低耦合.视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。 可重用性.可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。 独立开发.开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计. 可测性.界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
6.介绍一下你理解的虚拟DOM
结合虚拟DOM的优势和实现原理，转换为真实DOM还有和它模板的关系，可以参考当前热门框架Vue
虚拟DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实的DOM上
下面就是一个真实DOM映射到虚拟DOM的例子：
<ul id='list'>
<li class='item'>Item 1</li>
<li class='item'>Item 2</li>
<li class='item'>Item 3</li>
</ul>
虚拟DOM:
var element = {
tagName: 'ul', // 节点标签名
props: { // DOM的属性，用一个对象存储键值对
id: 'list'
},
children: [ // 该节点的子节点
{tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
{tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
{tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
]
}
Virtual DOM* 具备跨平台的优势* 由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。
操作原生DOM慢，js运行效率高。 我们可以将DOM对比操作放在JS层，提高效率。 因为DOM操作的执行速度远不如Javascript的运算速度快，因此，把大量的DOM操作搬运到Javascript中，运用patching算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。
Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。 可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）
提升渲染性能 Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。
