非原创，是自己在找资料的时候的一些汇总，自己的一些总结
CSS篇
1、盒模型
标准盒模型
对应 box-sizing: content-box;
对应 box-sizing: border-box;
2.清浮动
1、父层加overflow:hidden;
2、父层添加:after
.parent:after { clear:both; display:block; content:'';}.parent { *zoom:1;//为了兼容IE6/7}复制代码 3、添加一个空div，设置
clear:both复制代码
3.关于居中
1、适合定宽的，水平居中
{ marin:0 auto;}复制代码 2、绝对定位,定宽不定宽都适合，垂直居中
{ position:absloute; top:50%; left：50%; transform: translate(-50%,-50%);}复制代码 { position:absolute; top:0; bottom:0; left:0; right:0; margin:0 auto;}复制代码 3、flex (IE10及以上)，垂直居中
.parent{ display:flex; justify-content:center; align-item:center}复制代码 4、水平居中
.parent { text-align:center;}.child{ display:inline-block;}复制代码 5、垂直居中
{ text-align:center; line-height:20px;//line-height=height}复制代码 6、绝对定位，定高宽的
{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px;}复制代码 4、css hack
1、条件注释法
除IE外都可识别 复制代码
2、类内属性前缀法
5、布局
1、左定宽，又自适应
1、float+margin-left
.left{ float:left; width:200px;}.right { margin-left:200px}复制代码 2、双inline-block/双float
.left{ width:200px;}.right{ width: calc(100% - 200px);}复制代码 3、float+bfc
.left{ float:left; margin-right:20px;}.right{ overflow:auto;}复制代码 4、flex
.container { disply:flex;}.right{ flex:1;}复制代码 2、圣杯
.container{ padding: 0 200px; } .middle{ width: 100%; background: paleturquoise; height: 200px; float: left; } .left{ background: palevioletred; width: 200px; height: 200px; float: left; font-size: 40px; color: #fff; margin-left:-100%; position: relative; left:-200px; } .right { width: 200px; height: 200px; background: purple; font-size: 40px; float: left; color: #fff; margin-left: -200px; position: relative; left:200px; }复制代码测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试leftright
2、用flex
3、双飞翼
在圣杯布局的基础上，在mian外面加一层main-container,在main 上设置margin:0 200px;
.middle-container{ width: 100%; background: paleturquoise; height: 200px; float: left; } .middle { margin:0 200px; } .left{ background: palevioletred; width: 200px; height: 200px; float: left; font-size: 40px; color: #fff; margin-left:-100%; } .right { width: 200px; height: 200px; background: purple; font-size: 40px; float: left; color: #fff; margin-left: -200px; }复制代码 6、top和translate来移动的区别
top是cpu通过计算来进行渲染的；translate是GPU计算渲染的，CPU可以同时做其他的一些计算；所以translate的性能优于top
7、animation 有哪几个属性,transition有哪几个参数
animation-name 动画名称 animation-duration 动画时间animation-timing-function 速度曲线，开始结束的方式animation-delay 开始播放前的延迟时间animation-iteration-count 播放次数animation-direction 是否反向播放复制代码
transition: property（css属性名） duration（时间） timing-function（速度曲线） delay（延迟时间）;
8、bfc的作用
1、包含浮动元素； 2、不被浮动元素覆盖； 3、阻止margin折叠的问题
9、offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸复制代码
css权重
1、!important，加在样式属性值后，权重值为 10000 2、内联样式，如：style=””，权重值为1000 3、ID选择器，如：#content，权重值为100 4、类，伪类和属性选择器，如： content、:hover 权重值为10 5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1 6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
sass和scss区别
scss是sass的升级版，1、扩展名不同，一个是以.scss 结尾，一个是以.sass结尾；2、sass有严格的缩进语法，且不带{}和;而scss需要{}和；，对空格也不敏感
网络
1、跨域（同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。若地址里面的协议、域名和端口号均相同则属于同源。）
解决办法：1、jsonp(只能get,无法适用于post)。原理：利用script标签没有跨域限制的“漏洞”来达到与第三方通讯的目的
2、服务器端设代理；
3、后端在服务器上设置cors，在Access-Control-Allow-Origin中设置允许的请求源。cors请求分为简单请求和非简单请求。
如果是简单请求，浏览器会直接发送cors请求，即若浏览器发现这次跨域为简单请求，就会在头信息（Request Header）中添加一个Origin字段，表示本次请求来自于哪个源。判断Origin是否在允许源（由服务端决定）范围之内，如果验证通过，服务端会在Response Header 添加 Access-Control-Allow-Origin（必选，表示服务器端允许的请求源）、Access-Control-Allow-Credentials等字段。浏览器收到Respnose后会判断自己的源是否存在 Access-Control-Allow-Origin允许源中，如果不存在，会抛出“同源检测异常”。
总结：简单请求只需要CORS服务端在接受到携带Origin字段的跨域请求后，在response header中添加Access-Control-Allow-Origin等字段给浏览器做同源判断。
非简单请求需要CORS服务端对OPTIONS类型的请求做处理，其他与简单请求一致
2、浏览器缓存
cookie/localStorage/sessionStorage
生命周期：
cookie: 可设置失效时间，没有设置的话，默认关闭浏览器后失效；
localstorage:除非手动删除，否则永久保存；
sessionstorage: 仅在当前网页会话下有效。关闭页面或浏览器会失效
存放的数据大小
cookie: 4kb左右；local~/session~:5mb左右
cookie每次都会携带在http头中，如果使用cookie保存过多的数据会带来性能问题；
local~/session~：仅在客户端（浏览器）中保存，不参与和服务器通信
3、http常见状态码
200 OK 请求没问题实体的主体部分包含了所请求的资源。
202 Accept 接受请求，处理尚未完成
204 no content 服务器成功处理了请求，但没有返回任何内容
304 not modified 未修改自动上次请求后，请求的网页未修改过。服务器返回此响应，不会返回网页的内容
400 错误请求 服务器不理解请求的语法
401 未授权 请求要求身份验证。对于需要登录的网页，服务器可能返回此响应
403 禁止 服务器拒绝请求
404 未找到 服务器找不到请求的网页
405 方法禁用 禁用请求中指定的方法
500 服务器内部错误 服务器遇到错误，无法完成请求
501 尚未实施 服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码
4、http/https
HTTP缺点
通信使用明文，可能被窃听不验证通信方的身份，可能遭遇伪装无法证明报文的完整性，有可能遭遇篡改复制代码
https = http + TLS/SSL(具有身份验证、信息加密和完整性校验的功能)
HTTPS开发的主要目的，是提供对网站服务器的身份认证，保护交换数据的隐私与完整性,加密数据包。
5、dns解析顺序
JS
1.原型，原型链，作用域链
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的 作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期
每个函数都有一个prototype属性，这个属性就是原型。原型链就是对象之间的继承链，一个对象通过的prototype指向一个父对象，父对象的prototype又指向另一个对象，最终指向Object对象。这一个关系链就是原型链
1.对象有属性__proto__,指向该对象的构造函数的原型对象。 2.方法除了有属性__proto__,还有属性prototype，prototype指向该方法的原型对象
__proto__是每个对象都有的一个属性，而prototype是函数才会有的属性!!!
JavaScript中的对象，都有一个内置属性[[Prototype]]，指向这个对象的原型对象。当查找一个属性或方法时，如果在当前对象中找不到定义，会继续在当前对象的原型对象中查找；如果原型对象中依然没有找到，会继续在原型对象的原型中查找（原型也是对象，也有它自己的原型）；如此继续，直到找到为止，或者查找到最顶层的原型对象(Object.prototype)中也没有找到，就结束查找，返回undefined。
原型链作用：对象属性的访问修改和删除。
访问。优先在对象本身查找，没有则顺着原型链向上查找修改。只能修改跟删除自身属性，不会影响到原型链上的其他对象。复制代码
2、闭包
闭包就是指有权访问另一个函数作用域中的变量的函数，闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域。
闭包只能取得包含函数中任何变量的最后一个值，这是因为闭包所保存的是整个变量对象，而不是某个特殊的变量。
使用场景：一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中，封装对象的私有属性和私有方法，实现对象的数据私有化；代替一些全局变量；
坏处：就是消耗内存、不正当使用会造成内存溢出的问题
function test(){ var arr = []; for(var i = 0;i < 10;i++){ arr[i] = function(){ return i; }; } for(var a = 0;a < 10;a++){ console.log(arr[a]()); }}test(); // 连续打印 10 个 10 function test(){ var arr = []; for(let i = 0;i < 10;i++){ arr[i] = function(){ return i; }; } for(var a = 0;a < 10;a++){ console.log(arr[a]()); }}test(); // 0-9复制代码 原因 ：
函数1作用域for(var i = 0; i < 10; i++) { 函数1作用域 我在函数1作用域中 arr[i] = function() { 函数2作用域 我在函数2作用域中 return i; };}函数1作用域console.log(i); 毫无疑问，执行到这里的时候，i是10，既然这里是10 那么在函数2作用域中访问i也是10也就不足为奇了 因为函数2作用域中没有，向上去函数1作用域中找 同一作用域中同一变量名的变量值肯定是相同的(未修改的情况下)复制代码 当你换成let的时候，读取i的时候，在当前作用域（块3）中没有找到，向上一个作用域（块2）寻找，在块2中发现i，于是拿到值。
块1作用域for(let i = 0; i < 10; i++) { 块2作用域 我在块2作用域中 console.log(i); // 毫无疑问，这里的i从0依次增加到10 arr[i] = function() { 块3作用域 我在块3作用域中 return i; };}块1作用域复制代码 3、变量提升和函数提升
包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理函数声明比变量声明优先提升只有声明会被提升，变量的赋值或者其他运行逻辑会留在本地复制代码
4、算法
1、冒泡排序
function bubbleSort(arr){ for(var i=0;i a[j+1]){ index = a[j]; a[j] = a[j+1]; a[j+1] = index; } console.log(a); } } return arr;}复制代码 2、选择排序
function quickSort(arr){ var minIndex,temp; for(var i=0;i 3、统计字符串中次数最多字母
function findMaxDuplicateChar(str) { if(str.length == 1) { return str; } var charObj = {}; for(var i = 0; i < str.length; i++) { if(!charObj[str.charAt(i)]) { charObj[str.charAt(i)] = 1; } else { charObj[str.charAt(i)] += 1; } } var maxChar = '', maxValue = 1; for(var k in charObj) { if(charObj[k] >= maxValue) { maxChar = k; maxValue = charObj[k]; } } return maxChar + '：' + maxValue;}复制代码 4、数组去重
5、Event Loop
1、主线程运行的时候产生堆（heap）和栈（stack）
2、栈中的代码调用各种外部API，它们在"任务队列"中加入各种事件（click，load，done）
3、只要栈中的代码执行完毕，主线程就会去读取"任务队列"，将队列中的事件放到执 行栈中依次执行。
4、主线程继续执行，当再调用外部API时又加入到任务队列中，等主线程执行完毕又会接着将任务队列中的事件放到主线程中。 上面整个过程是循环不断的。
事件队列（quene）是一个存储着待执行任务的队列，其中的任务严格按照时间先后顺序执行，排在队头的任务将会率先执行，而排在队尾的任务会最后执行。事件队列每次仅执行一个任务，在该任务执行完毕之后，再执行下一个任务。
6、值类型和引用类型
堆：队列优先,先进先出；由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。栈：先进后出；动态分配的空间 一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收，分配方式倒是类似于链表。复制代码
值类型：boolen, string,number,null,undefined,symbol。保存在栈中，占用的空间规定。
引用类型：object,function。保存在堆中（引用变量存储在栈中的是一个指针，指向堆中的数组或者对象的地址），占用空间不固定
7、js事件绑定
1、dom直接绑定：
在dom上直接绑定onclick、onmouseover、onmouseout等等。
2、在javascript代码中绑定：
在script标签中进行绑定
复制代码
3、使用事件监听绑定
关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。
element.addEventListener(event, function, useCapture)复制代码
event : （必需）事件名，支持所有DOM事件。
function：（必需）指定要事件触发时执行的函数。
useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。
优点：1.可以绑定多个事件。2.可以解除相应的绑定
4、关于事件委托
事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。
传统写法
- item1
- item2
- item3
事件委托
- item1
- item2
- item3
8、ES6相关知识
1、Promise
new Promise((resolved, rejected) => { resolved(1);}).then(data => { console.log(data);}, err => { console.log(err);}).catch(err => { console.log(err);}); // 1复制代码 Promise解决了原先用ajax发送多个异步请求时，多层嵌套的一个问题，改为以.then（）这种链式的形式进行多次异步请求，更直观更方便维护。
Promise有3个状态：pending(进行中)，fulfilled(成功)，rejected(失败)
2个过程：pending———>fulfilled (resolve)请求成功 pending——>rejected (reject)请求失败
1个方法：.then()
Promise.all 用来包装多个异步请求，只有当里面所有请求都成功（resolve）时，才会被调用执行
Promise.race：也是用于将多个Promise实例包装成一个新的Promise实例，如果这个函数中，有一个Promise变成Fulfilled时，它就会将结果传递给下一个Promise
Promise.resolve：它会将一个当前对象转化为Promise对象
Promise.reject：返回一个出错的Promise对象
2、const定义一个空数组，然后往数组中添加元素，会报错吗？
不会。当const 定义的是一个值类型时，修改会报错；当const定义的是一个引用类型（对象）时，修改不会报错
let是更完美的var，不是全局变量，具有块级函数作用域,大多数情况不会发生变量提升。const定义常量值，不能够重新赋值，如果值是一个对象，可以改变对象里边的属性值
关于变量提升
var a = 10;function hello(){ console.log(a)；//undefined var a = 11; console.log(a);//11}hello();function hello(){ console.log(a); let a = 11; console.log(a);}hello();//报错：a is not defined复制代码 3、关于箭头函数
1、箭头函数的this指向的事定义时所在上下文中的this，而不是使用时的对象；
2、不能够使用arguments对象，可以使用扩展符...
3、不能够用作构造函数，这就是说，不能够使用new命令，否则就会抛出一个错误
4、import 和 require的区别；import {} 和没有{}的区别
遵循规范
require 是 AMD规范引入方式import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法复制代码
调用时间
require是运行时调用，所以require理论上可以运用在代码的任何地方import是编译时调用，所以必须放在文件开头复制代码
本质
require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require复制代码
模块输出时 export { onlyOne }，对应引入时 import { onlyOne } form 。。。
export default 命令，为模块指定了默认输出，让他们不用阅读文档就能用任意自定义模块名加载模块。import “随意” form 。。。
9、判断是否为数组
1、 isArray()
2、
3、instanceof 运算符是用来测试一个对象是否在其原型链原型构造函数的属性
var arr = []; arr instanceof Array; // true复制代码
4、constructor属性返回对创建此对象的数组函数的引用，就是返回对象相对应的构造函数
var arr = []; arr.constructor == Array; //true复制代码
10、关于this
11、关于setTimeout、Promise、Async/Await 的区别
async用于声明一个函数是异步的，async函数返回一个promise
12、关于js的操作
数组转字符串：join(),toString(), 字符串转数组：split()
1、数组
2、字符串
3、函数
4、dom操作
13、ajax
ajax是一种异步请求数据的web开发技术，再不刷新页面的情况下，更新页面局部内容 ajax创建过程 step1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象； step2. 创建一个新的HTTP请求，并指定改HTTP请求的方法、URL以及验证信息； step3. 设置响应HTTP状态变化的函数； step4. 发送HTTP请求； step5. 获取异步调用返回的数据； step6. 使用javascript和DOM实现局部刷新；
get/post区别
14、值类型和引用类型
值类型（原始数据类型）：Number String Boolean Undefined Null Symbol(es6) 引用类型：object （array function Date） 区别：值类型 保存在栈中， 引用类型保存在堆中，但是不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地址。引用对象的赋值实际上是堆内存对象再栈中的引用地址复制，实际两者指向的是同一个堆内存对象
堆和栈是两种数据结构，堆是先进先出，栈是先进后出。
15、深拷贝浅拷贝
深浅拷贝是相对于引用类型来说的 浅拷贝：子对象和父对象在浅拷贝的时候他们指向同一个内存的数组，所以子对象修改，父对象也会被修改 深拷贝：深度拷贝就是把父对象拷贝到子对象上，而且两者的内存和以后的操作都互不影响的拷贝 深拷贝方法一：
function deepCopy(obj) { return JSON.parse(JSON.stringify(obj)); }复制代码 深拷贝方法二：
function deepCopy(obj){ var newobj, obj; if (obj.constructor == Object){ newobj = new obj.constructor(); }else{ newobj = new obj.constructor(obj.valueOf());//valueOf()方法返回 Array 对象的原始值 } for(var key in obj){ if ( newobj[key] != obj[key] ){ if ( typeof(obj[key]) == 'object' ){ newobj[key] = deepCopy(obj[key]); }else{ newobj[key] = obj[key]; } } } newobj.toString = obj.toString; newobj.valueOf = obj.valueOf; return newobj; }复制代码 16、=== 和 == 的区别
== 只要求值相等，=== 是更严格的相等，要求值和类型都相等
框架
1、mvc mvp mvvm
MVC：用户操作->View（用户界面，负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据保存，数据持久化）->View（将结果反馈给View）。
2、react
Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。
react 和vue的一个区别：对于react而言，应用状态的改变会引起所有子组件的重新渲染，但是可以通过shouldComponentUpdate来控制子组件是否需要重新渲染。但是对于vue而言，这是一个默认的优化，它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。所以它可以更快的计算出virtual dom的差异。
react的数据传递：
1、父到子：通过props传递；2、子到父：父组件传一个callback回调函数给子组件调用，父组件定义一个函数当作props传递给子组件，在子组件中调用该函数，并将相关数据传进去，父组件中就可以拿到3、同级之间的组件：先callback拿到其中一个子组件的数据，在通过props传给另一个子组件4、context复制代码
const PropTypes = require('prop-types');class Children extends React.Component { static contextTypes = { text: PropTypes.string } render() { return ( { this.context.text } ) }}class Parent extends React.Component { render() { return ( 在 GrandParent 上通过 getChildContext 给 context 对象添加了 text 的属性，这个属性可以在 GrandParent 的任何一个子孙（子组件）中访问。
Redux 解决的是大型软件架构中数据流传输的问题；context 解决的是子孙之间方便数据交互的问题。有一定的相似性，但不属于同等性质。
3、redux（严格的单向数据流）
三大原则：1、单一的数据源：整个应用的state都被储存在一棵树中，并且这棵状态树只存在于唯一一个store中；
2、只读的state:唯一改变state的方法就是出发一个action;
3、使用纯函数修改state:为每个action用纯函数编写reducer来描述如何修改state树.reducer接受 Action 和当前 State 作为参数，返回一个新的 State。
纯函数：1、有传入的值就有返回的新值，2、不依赖外部的状态、变量或常量，3、不修改传入的值 store的职责：维持应用的 state；
提供 getState() 方法获取 state；
提供 dispatch(action) 方法更新 state；
通过 subscribe(listener) 注册监听器;
通过 subscribe(listener) 返回的函数注销监听器。
通过store.getState()来了解工厂中商品的状态，使用store.dispatch（接收action作为参数）发送action指令
react-redux 提供了两个重要的对象， Provider 和 connect ，前者使 React 组件可被连接（connectable），后者把 React 组件和 Redux 的 store 真正连接起来。
首先在最外层容器中，把所有内容包裹在 Provider 组件中，将之前创建的 store作为 prop 传给 Provider 。
const App = () => { return ( )};复制代码 Provider 内的任何一个组件（比如这里的 Comp ），如果需要使用 state 中的数据，就必须是「被 connect 过的」组件——使用 connect 方法对「你编写的组件（ MyComp ）」进行包装后的产物。
class MyComp extends Component { // content...}const Comp = connect(...args)(MyComp);复制代码 react-redux中的connect方法将store上的getState 和 dispatch包装成组件的props。
connect将方法和组件进行绑定。connect() 接收四个参数，它们分别是 mapStateToProps ， mapDispatchToProps， mergeProps 和 options 。
第一个参数将 store 中的数据作为 props 绑定到组件上。
第二个参数将 action 作为props 绑定到 MyComp 上。
3、react的相关问题
1、在构造函数中定义一个id=1,setState修改为id=2,接着打印id，值是多少？
答案是：1
2、连续三次调用setState，render会渲染几次
答案是： 1
以上两题，因为setState是异步的，他会先进入事件队列中等待，并不是马上出结果
webpack
webpack是把项目当作一个整体，通过一个给定的主文件(入口文件)，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件
vue
核心：1、响应式的数据绑定系统（双向数据绑定）；2、组建系统。
数据双向绑定原理
通过Object.defineProperty( )实现对属性的劫持，给每个属性对象都加上 setter和getter，已达到数据变动监听的目的，再结合发布者-订阅者，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。
发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作复制代码
为什么vue中的data必须是个函数？
优化方法
减少重绘(repaint)和回流（reflow），回流指dom结构发生变化，或尺寸、布局发生变化，重绘指不影响布局的外观样式发生变化，如background-color.回流一定会引起重绘，重绘不一定引起回流