面试

MVVM框架的优点：
1. 数据驱动。
2. 组件化。
3. 轻量、简洁、高效。
技术栈说明：
Vue-resource和后端交互
Vue-router路由实现单页应用。
第三方js库better-scroll
最大程度组件化
Html5的localstorage
图标字体的使用
移动端1像素边框
Css sticky footer 布局
Flex弹性布局
Vue.js介绍：
1.它是一个轻量级MVM框架
2.数据驱动 +组件化的前端开发
3.Git超过25K+的star数，社区完善。
对比Angular React
Vue.js更加轻量，gzip后大小只有20K+
Vue.js更易上手，学习曲线平稳.
吸取两家之长，借鉴了angular 的指令和react 的组件化。
Vue.js的核心思想
数据驱动：
Directives指令去对dom进行封装，当时数据发生变化会通知指令修改特定的dom.数据驱动dom变化，dom是数据的一种自然映射。如图：

Vue.js还会对视图做监听，当我们修改视图的时候，vue.js监听到这些变化。从而改变数据，实现数据的双向绑定。

数据响应原理

组件化
扩展HTML元素，封装可重用的代码。
组件设计原则：
1. 页面上每个独立的可视/可交互区域视为一个组件。
2. 每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护。
3. 页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。
Vue-cli是Vue的脚手架工具：
作用：目录结构，本地调试，代码部署，热加载，单元测试。
编写一个组件的步骤：
三部分组成：


然后通过export default{
导出一个对象。Vue的定义。
}
使用的时候：
先引用在注册

Webpack配置：

需求分析：
SPA单页web应用。
Node.js使用模块和包来组织。在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块，文内容可能就是我们封装好的一些Javascript方法，json数据，
Css盒模型
1. 标准模型+IE模型
W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
2. Css如何设置这两种模型的。
box-sizing:content-box; 标准模型
box-sizing:border-box; IE模型
3. JS中如何设置获取盒模型对应的宽和高。
1. dom.style.width/height 可以拿到内联样式的宽和高。
2. dom.currentStyle.width/height 渲染之后的宽和高，相对准确（只有IE）。
3. window.getComputedStyle(dom).width/height 兼容更多的浏览器。
4. dom.getBoundingClientRect().width/height (left,top,width,height)
4. 解释边距重叠
父子元素边距重叠。父级元素创建了一个bfc。
5. BFC（块级格式化上下文）
BFC原理：
1. BFC垂直方向的边距会发生重叠。
2. BFC的区域不会与浮动元素的box重叠。
3. BFC是一个独立的区域，外面不会影响里面，里面也不会影响外面。
4. 计算BFC高度时，浮动元素也会参与计算。
创建BFC:
1. float！=none
2. position!=static||relative
3. display==table ||table cell ||inline-box
4. overflow==hidden||auto
使用场景：
1. 清除浮动。
2. 防止垂直方向上的边距重叠。
3. 防止左右元素的溢出。
Dom事件
1. dom事件级别
dom0 element.οnclick=function(){}
dom2 element.addEventListener(‘click’,function(){},false)。
false为冒泡事件（从内向外），true为捕获事件（由外向内）。
dom3 element.addEventListener(‘keyup’,function(){},false)。
事件类型增加。
2. dom事件模型
冒泡事件和捕获事件。
3. dom事件流
事件流包括三个阶段，事件捕获阶段，处于目标阶段和事件冒泡阶段。
4. 描述dom事件捕获的具体流程
Window—>document—>html——>body—>目标元素
Document.documentElement获取html.
5. Event对象的常见应用
event.preventDefault() 阻止默认行为
event.stopPropagation() 阻止冒泡行为
event.stopImmediatePropagation() 阻止剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡。如果注册两个事件，可以只让一个事件执行。
event.currentTarget返回绑定事件的元素（父级元素事件）
event.target 返回触发事件的元素（当前被点击的元素）
注：事件委托，给dom注册click事件。
6. 自定义事件
var eve = new Event(‘custome’);
ev.addEventListener(‘custome’,function(){
console.log(‘custome’);
});
ev.dispatchEvent(eve);
类型转换
1. 数据类型
原始类型：
Boolean Null Undefined Number String Symbol
对象：
Object
2. 显示类型转换
Number函数
原始类型转换
数值：转换后还是原来的值
字符串：如果可以解析为数值，则转换为相应的数值，否则得到NaN，空字符串转为0。
布尔值：true转为1，false转为0.
undefined:转为NaN.
null：转为0.
对象类型转换
先调用对象自身的valueOf方法，如果该方法返回原始类型的值（数值,字符串和布尔值），则直接对该值使用Number方法，不在进行后续步骤。
如果ValueOf()方法返回复合类型的值，再调用对象自身的toString方法，如果toString方法返回原始类型的值，则对该值使用Number方法，不再进行后续步骤。
如果tostring方法返回的是复合类型的值，则报错。

String函数
原始类型转换
数值：转为相应的字符串
字符串：还是原来的字符串
布尔值：true转为“true”,false转为“false”.
Undefined:转换为“undefined”
Null:转为“null”.
对象类型转换
先使用toString方法，如果toString方法返回原始类型，在进行String方法。
如果tostring方法返回复合类型，在调用valueof()方法，如果valueof方法原始类型则对它进行string。
Valueof返回复合类型，则报错。
Boolean函数
原始类型转换：
Undefined
Null
-0 false
+0
NaN
‘’
3. 隐式类型转换
四则运算
判断语句
Native调用
4. 实际运用：
(http://www.cnblogs.com/ziyunfei/archive/2012/09/15/2685885.html)
[]+[] 两个空字符串相加等于‘ ’
[]+{} ‘[Object Object]’
{}+[] 0 上面的输入被解析成了一个代码块后跟一个表达式+[]
{}+{} NaN原因就是JavaScript引擎将第一个{}解释成了一个空的代码块并忽略了它.NaN其实是后面的表达式+{}计算的结果 (加号以及后面的{}).这里的加号并不是代表加法的二元运算符,而是一个一元运算符,作用是将它后面的操作数转换成数字,和Number()函数完全一样
true+true 2
1+{a:1} 1[object Object]
HTTP协议类
1. HTTP协议的主要特点
简单快速 灵活 无连接 无状态
2. HTTP报文的组成部分
请求报文：请求行（http方法 页面地址 http版本 ） 请求头（key和value） 空行 请求体
响应报文：状态行 响应头 空行 响应体
3. HTTP方法
GET 获取资源
POST 传输资源
PUT 更新资源
DELETE 删除资源
HEAD 获得报文首部
4. POST和GET区别
1. GET在浏览器回退时是无害的，而post会再次提交请求。
2. GET产生的URL地址可以被收藏，而POST不可以。
3. GET请求会被浏览器主动缓存，而POST不会，除非手动设置。
4. GET请求只能进行url编码，而POST支持多种编码方式。
5. GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会保留。
6. GET在请求URL中传送的参数是有长度限制的，而POST没有
7. 对参数的数据类型，GET只接受ASCII字符，POST没有限制。
8. GET比POST更不安全，参数直接暴露在URL上。
9. GET通过URL传递，POST放在Request body中
5. HTTP状态码
1XX:指示信息
2XX成功
3XX:重定向
4XX:客户端错误
5XX:服务器错误
200 OK 客户端请求成功
206 Partial Content：客户发送了一个带range头的GET请求，服务器器完成了它
301 Move permantly 转移到新的url
302 not Modifiend 临时重定向
304 客户端有缓存，可以直接从缓存中取
400 有语法错误，不能被服务器所理解
401 请求未授权
403 对请求页面的访问被禁止
404 请求资源不存在
500 服务器错误
503 服务器过载
6. 什么是持久连接
HTTP协议采用请求—应答模式，当使用普通模式，即非Keep-Alive 模式时，每个请求应答客户和服务器都要建立一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）
当使用keep-Alive模式（持久连接或连接重用）时，Keep-Alive功能使客户端到服务端的连接有效，当出现对服务器的后端请求时，Keep-Alive功能避免了建立或者重新建立连接，HTTP1.1支持，HTTP1.0不支持。
7. 什么是管线化
在使用持久连接的情况下，某个连接上消息的传递类似于
请求1->响应1->请求2->响应2->请求3->响应3
管道：
请求1->请求2->请求3->响应1->响应2->响应3
一次打包发送。
1. 管线化机制通过持久连接完成，仅HTTP/1.1支持此请求
2. GET和HEAD请求可以进行管线化，POST则有限制。
3. 服务端必须支持HTTP1.1，才能启用管线化机制
4. Chrome和firefox没有开启管线化支持
原型链类
1. 创建对象有几种方法
2. 原型，构造函数，实例，原型链
3. Instanceof的原理

面向对象
类与实例
类的声明
1． function Animal() {
this.name = ‘name’;
}
2.ES6中声明
class Animal2{
constructor(){
this.name = name;
}
}
生成实例
类与继承
如何实现继承

继承的几种方式

通信类
1. 什么是同源策略及限制
同源策略限制从一个源加载的文件或脚本如何与来自另一个源的资源进行交互。
这个是一个用于隔离潜在恶意文件的关键的安全机制。
*Cookie，LocalStorage和IndexDB无法读取
*DOM无法获取
*AJAX请求不能发送
2. 前后端如何通信
Ajax 同源策略下的通信
WebSocket 不受同源策略的影响
CORS 支持同源和跨域通信
3. 如何创建Ajax
XMLHttpRequest对象的工作流程
兼容性处理
事件的触发条件
事件的触发顺序
4. 跨域通信的几种方式
*JSONP
JSONP的原理是什么？怎么实现？

*Hash
Hash原理url地址中#后面的东西叫hash,hash变动页面不会刷新，url中？后面叫search,search改变会刷新页面。
// 利用hash，场景是当前页面 A 通过iframe或frame嵌入了跨域的页面 B
// 在A中伪代码如下：
var B = document.getElementsByTagName(‘iframe’);
B.src = B.src + ‘#’ + ‘data’;
// 在B中的伪代码如下
window.onhashchange = function () {
var data = window.location.hash;
};
data数据需要处理
*postMesage
HTML5中新增加的标准
// 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
Bwindow.postMessage(‘data’, ‘http://B.com‘);
// 在窗口B中监听
Awindow.addEventListener(‘message’, function (event) {
console.log(event.origin);
console.log(event.source);
console.log(event.data);
}, false);
*WebSocket
// Websocket【参考资料】http://www.ruanyifeng.com/blog/2017/05/websocket.html
var ws = new WebSocket(‘wss://echo.websocket.org’);
//协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
ws.onopen = function (evt) {
console.log(‘Connection open …’);
ws.send(‘Hello WebSockets!’);
};
ws.onmessage = function (evt) {
console.log(‘Received Message: ‘, evt.data);
ws.close();
};
ws.onclose = function (evt) {
console.log(‘Connection closed.’);
};
*CORS
支持跨域通信的ajax,http头中加入origin。
// url（必选），options（可选）
fetch(‘/some/url/’, {
method: ‘get’,
}).then(function (response) {

  }).catch(function (err) {
    // 出错了，等价于 then 的第二个参数，但这样更好用更直观
  });

安全类
CSRF（跨站请求伪造）
重点：攻击原理和防御措施
攻击原理：

api接口是get类型,新浪微博关注添加，一定在注册网站登录过。
防御：
*Token验证，访问接口的时候浏览器会自动上传cookie。访问网站时自动在本地生成存储一个Token，访问接口时没有Token,不会通过
*Referer验证，页面来源判断，不属于站点的来源，一律拦截。
*隐藏令牌，隐藏在Http head 头中。
XSS（跨域脚本攻击）
反射型

存储型
区别：
XSS：像页面注入JS去运行，Js函数体里面去做想做的事情。
CSRF：利用本身漏洞去自动执行接口，依赖用户登录。
算法类：
1. 排序
*快速排序
*选择排序
*希尔排序
2. 堆栈、队列、链表（难）
3. 递归（60%算法）
4. 波兰式和逆波兰式（1+3）*5/6
JS运行机制
1. Js是单线程，SetTimeOut是异步任务，遇到异步任务先挂起，先执行同步任务，在执行异步任务。While(1)也是同步任务，所以先执行。
2. 队列插入的时间，异步队列执行的时间，SetTimeOut到时间了以后才扔进异步队列。
3. 事件循环（Event loop）和任务队列
当一个程序里有同步任务时，先执行同步任务，当遇到异步任务时，根据Time的时间，等到时间时把它放入任务队列，等到同步任务执行完毕，在执行异步任务。
*执行栈执行的是同步任务
*什么时候去任务队列取任务
*什么时候去任务队列放任务
4.异步任务
1.setTimeOut和setInterval
2.DOM事件
3.ES6中的Promise
浏览器的渲染
1. 什么是DOCTYPE及作用
DTD是告诉浏览器我是什么文档类型，浏览器用什么解析
DOCTYPE直接告诉浏览器什么是DTD。
HTML5

HTML 4.01两个模式一个strict（包含所有HTML元素和属性，但不包括展示性和弃用的元素）一个Transitional（包含所有HTML元素和属性，以及展示性和弃用的元素）。
浏览器渲染过程
2. 浏览器的渲染过程
3. 重拍Reflow
DOM结构的各个元素都有自己的盒子，这些需要浏览器根据各种样式来计算并根据计算结果将元素放到它该放的位置，这个过程叫reflow
触发Reflow
当你增加，删除，修改DOM节点时，会导致Reflow或Repaint
当你移动DOM的位置，或是出现一个动画的时候。
当你修改CSS样式
当你resize窗口的时候，或是滚动的时候
当你修改网页默认字体时
4. 重绘Repaint
定义：页面呈现内容画在浏览器上
触发Repaint
DOM改动
CSS改动
5. 布局Layout
页面性能
1. 提升页面性能的方法有哪些？
1. 资源压缩合并，减少Http请求。
2. 非核心代码异步加载->异步加载的方式->异步加载的区别
(1)异步加载的方式
*动态脚本加载
*defer
*async
(2)异步加载的区别
（1）defer是在HTML解析完之后才会执行的，如果是多个，按照加载的顺序依次执行。
(2)async是在加载之后立即执行，如果是多个，执行顺序和加载顺序五个。
3. 利用浏览器缓存->缓存的分类->缓存的原理
1. 缓存的分类
1） 强缓存（在这个时间之前，直接拿副本，不会请求服务器）
Expires Expires:Thu, 21 Jan 2017 23:39:02 GMT
//服务器的绝对时间，缺点客户端和服务器时间不一致。
Cache-Control Cache-Control:max-age=3600
//相对时间，单位是秒，两个都下发，以后者为准。
2） 协商缓存
Last-Mofied if-Modified-Since Last-Modified:wed,26,Jan 2017 00:35:11 GMT Etag If-None-Match
// Last-Mofied = if-Modified-Since,上次给的时间和服务器对比时间。
Etag:服务器下发的时候给一个哈希值，不变的话直接用上次的。
注意：跟浏览器缓存相关的http头：Expires Expires，Cache-Control，Last-Mofied，Etag，if-Modified-Since。
4. 只用CDN
5. 预解析DNS(当有多个域名时)
//a标签默认打开预解析，https开头，很多浏览器默认关闭预解析。
//dns预解析
错误监控类
1． 前端错误的分类
1）及时运行错误（代码错误）
2）资源加载错误
2． 错误的捕获方式
即时运行错误的捕获方式
1） try.catch
2） window.onerror
资源加载错误
1） Object.onerror
2） Performance.getEntries()
3） Error事件捕获（只有捕获可以）
**获取失败加载图片
1） performance.getEntries().forEach(item=>{console.log(item.name)})已经加载的资源
2） document.getElementsByTagName(‘img’)所有应该加载的图片。
跨域的js运行错误可以被捕获到吗,错误提示什么，应该怎么处理？

在客户端做script,服务端加Access-Control-Allow-Origin:*加域名
3． 上报错误的基本原理
1. 采用Ajax通信方式上报
2. 利用Image对象上报

Vue
1.对vue 是渐进式的理解？
每个框架都有它自己的特点，使用vue你可以在原有的大系统上，一两个组件用使用vue完成，把它当jquery使用。也可以它的全家桶当angular来使用。还可以用它的视图搭配自己设计的下层使用。它只是个轻量的视图而已，它只做它该做的事情，不做它不该做的事情。