1.window.onload与$(document).ready(function(){})的区别

window.onlaod:必须等到页面内的所有元素加载到浏览器后才可以执行，不能编写多个，最后一个会把之前的都覆盖掉。
$(document).ready(function(){})：DOM结构加载完毕之后执行的，可以编写多个

2.盒模型

页面渲染时，DOM元素所采用的布局模型，可以通过box-sizing进行设置。
box-sizing:content-box；W3C标准盒模型 width = width + border + padding 为默认的
box-sizing:border-box；为IE盒模型 width = width

3.BFC/IFC

块级格式化上下文：是一个独立的渲染区域，让处于BFC内部的元素与外部元素之间相互隔离，使得内外元素的定位不会相互影响。
触发条件：1.body根元素；2.float不为none的属性值；3.position:absolute、fixed；4.overflow不为visible；5.display:inline-table/table-cell/flex
属于同一个BFC内的两个相邻box的上下margin会发生重叠，计算BFC高度时，浮动元素也会参与计算。

4.层叠上下文

z-index => 行内元素 =>浮动元素 => 块级元素 => z-index为负 => background

5.水平垂直居中布局\优先级

flex: justify-content:center + align-items:center
absolute: transform:translate(-50%,-50%)
!important => 行内样式 => #id => .class => tag => *

6.如何去除浮动影响，防止父级的高度塌陷

1.增加清除浮动:after{clear:both} 2.设置父级BFC 3.父级设置高度

7. link 与@import的区别

@import为CSS提供的语法，只能倒入样式表。link标签是HTML提供的。
link引入的css样式在加载页面时同时加载，@import在页面加载完毕后被加载。
可以通过JS操作DOM来插入link，无法用@import方式插入样式

8.flex

flex-direction:改变布局方向
flex-wrap: 排列的顺序
justify-content: center/space-between/space-around 中间行如何排列
align-items:center 垂直居中
flex-grow: 父级宽度减去子集宽度，剩余空间按比例分割
flex-shrink：子集宽度和减去父级宽度，剩余空间按比例缩小
align-self: 可覆盖align-items的属性

flex:1  => flex: 1 1 0%
flex:2  => flex: 2 1 auto
flex:10px => flex:1 1 10px
flex:auto => flex:1 1 auto
flex: none => flex:0 0 auto

9.JS数据类型及判断方法

基本数据类型：string, number ,boolean ,null ,undefined ,symbol ,bigInt（7个）
引用数据类型：Object(1个)
判断方法：
typeof：（string\number\boolean\undefined\symbol\bigInt\function）
instanceof： 可以判断arrary与object

var getType = {}.prototype.toString;
getType.call(value) => [object String][object Number][object Boolean][object Undefined]
[object Null][object Arrary][object Function]

10.原型/构造函数/实例

prototype(显式原型)/proto：对象的爹
构造函数：可以通过new来创造一个对象的函数
实例：通过构造函数和new来创造初的对象
实例通过proto指向原型，通过constructor指向构造函数。prototype是函数才有的，proto所有的引用类型都有，所以只有构造函数拥有prototype

原型链

11.变量提升与函数提升

变量提升：把变量提升到函数的顶部,只会提升声明不会将变量的值也提升上去。
函数提升：函数声明式会将其提升至顶部。（没等声明就表达）
其实var、let、function都有变量提升，但是他们都不同，原因是
js生成一个变量需要三步。
1.创建一个空间。2.为该空间赋值初始值（undefined）3.执行赋值
let只做了第一步，该空间无法访问，所以为error
var做了两步，所以值为undefined
函数提升做了三步

12.闭包

闭包是指有权访问另一个函数作用域中的变量函数。可以把闭包简单理解成“定义在一个函数内部的函数”。

var arr = [1,2,3]
for(var i = 0 ; i < arr.length ; i ++){
 setTimeout(() => {console.log(i)},0) 
}
// 2,2,2
可以用闭包解决
for(var i = 0 ; i < arr.length ; i ++){
((a) => {
setTimeout(() => {console.log(a)},0)
})(i)
}
// 0,1,2

13.对象的拷贝

浅拷贝：以赋值的形式拷贝引用对象，修改时原对象也会受到影响。Object.assign
深拷贝：完全拷贝一个新的对象，修改时原对象不再受影响。JSON.parse(JSON.stringify(obj)) /lodash:cloneDeep
原因：基本数据类型放在栈当中，数据确定，可以直接取放，引用类型放在堆当中，栈的内存上只存储了一个指向堆内存地址的指针。

14.继承

继承分为组合式继承与寄生组合式继承。每个函数都有一个原型对象，每一个原型对象都有一个指向构造函数的指针。

组合式继承：
function Person(name){
  this.name = name;
  this.emotion = ['a','d','s'];
}
Person.prototype.eat = function(){
  console.log('eat');
}
function Student(name){
  Person.call(this,name);
}
Student.prototype = new Person();
Student.prototype.constructor = Student
缺点：需要继承两次

寄生组合式继承：
function Person(name){
  this.name = name;
}
function Child (Name){
  Person.call(this, Name)
}
Child.prototype = Object.create(Person.prototype);
Child.prototype.constructor = Child;
// 写一个Object.create
function object(o){
    function f(){}
    f.prototype = o;
    return new f()
}

15.工厂模式与构造函数的模式

工厂模式：
function Person(hair,face,eye){
  var o = new Object;
  o.hairs = hair;
  o.eye = eye;
  o.say = function(){
  console.log('say something to me !')
  }
}
构造函数模式：
function Person(hairs,face,eye){
this.hair = hair;
this.face = face;
this.eye = eye;
}

16.模块化

node(commonJS):require/module.exports/exports
exports是对module.exports的引用：exports = module.exports
require相当于把引用的module拷贝一份到当前的module当中去。

function require(/* ... */) {
  const module = { exports: {} };
  ((module, exports) => {
    function someFunc() {}
    module.exports = someFunc;
  })(module, module.exports);
  return module.exports;
}

require的简单实现，直接将需要载入的文件赋值到module.exports，并return出。其实就是复制。
AMD与CMD都是浏览器的规范，CommonJS是服务器端的规范
require与import的区别：
require是同步加载，import是异步加载；require是值的拷贝，import是指针

17.函数改变this

this只有在函数执行的时候，才知道最终指向谁，谁调用它，它就指向谁
this在函数定义的时候是无法确定的，只有在最后使用的时候，谁用它，那它就指向谁。
在严格模式下，所有指向windows的this都是undefined。当遇到new时，最后产生一个对象，那它最后指向的是这个对象
改变this只有四种方法，new，apply，call，bind（返回一个方法，需要再次执行）
1.new的关键字改变。
2.apply()有两个参数，第二个参数必须为数组。
3.call()有多个参数。
4.bind()可以传多参，返回一个修改过this后的函数。
普通函数的this永远指向执行它的对象，箭头函数 它会捕获其所在（即定义的位置）上下文的this值，无法改变指向。
箭头函数是匿名函数，不能使用new，且没有arguments，使用rest参数代替

var o = {
  say1:function(){
    setTimeOut(function(){
      console.log(this) 
    },0)
  },
  say2:function(){
  setTimeOut(() => {
      console.log(this)
  },0)
  }
}
o.say1()// windows
o.say2() // o

18.解构赋值的方法

const s = new Set();
const test = [1,2,3,3,3,3,3];
[1,2,3,3,3,3,3,4].forEach(x => s.add(x)) || [...new Set(test)]
或者 result = Arrary.from(s);
// 并集
var a1 = [1,2,3]
var a2 = [3,4,5]
var result1 = new Set([...a1,...a2])
// 交集
var s = [1,2,3]
var e = new Set([3,4,5])
var t = new Set(s.filter((x) => {return e.has(x)}))
// 差集
var a1 = [1,2,3]
var a2 = [2,3,4]
var a1Set = new Set(a1);
var result = new Set(a2.filter((x) => !a1Set.has(x)))

19.数组Arrary

splice(startNum, number, a1,a2): 返回一个截取的数组，旧的数组被修改了，且把a1，a2加进去了。
slice（stratNum,endNum）:返回截取的数组（或字符串），旧的数组或字符串不会发生改变

字符串：

slice(startNum, endNum)：返回截取的字符串,旧字符串不会改变slice(-1)为倒数第一到最后的字符串
substr(startNum,length)：返回截取的字符串,旧字符串不会改变substr(-1)为倒数第一到最后的字符串
substring(startNum,endNum):如果前边比后边大，那么这两个交换位置，如果是-1默认为从0开始，返回新的字符串
concat:连接数组，浅拷贝
indexOf,lastIndexOf(value,fromIndex):第一次出现某个值的index
sort:用来排序 = > [5,6,1,2,7,4].sort((a,b) => {return a - b})   //  [1, 2, 4, 5, 6, 7]

20.Webpack

webpack是一个模块化打包工具，里边有几大块：entry入口，output输出地址。
bundle：最终输出的文件。
chunk： 打包后的文件
module：开发的模块
plugins：全局使用的一些插件，通过new HtmlWebpackPlugin用来生成带有入口文件的index.html，可以使用happyPack，利用cpu来实现一些异步执行的loader，
loader：是执行的，一般用来处理less-loader/postcss-loader/css-loader/style-loader。React的babel也在loader中做处理。
optimization: 是做优化的，里边可以设置打包优化，例如不直接使用import React from react,如果多个文件有引用，则可以把该文件抽出来，避免多次打包。

• 关于webpack的使用：我们项目一共是有三个文件，分别是dev.config\prod.config\basis.config，每个都返回一个对象形式，最后使用webpackMerge将他们连接起来。这三个文件不同的设置，是因为一些在生产上跑的东西不需要在开发的时候跑一遍，例如我们在生产的plugins上有代码压缩，在开发的时候，不需要压缩，加了热更新。然后在loader上，我们通过happyPack对css文件和react进行一个模拟的异步执行。css上使用了less-loader,postcss-loader（向css前自动加前缀，做浏览器兼容）,css-loader,style-loader。

21.ES6与ES7

通过babel解析成ES5可以让浏览器解析
let/const为块级作用域，不允许重复声明
class为类的声明，extends为类的继承
[...c]为解构赋值
Set，Map为伪数组，需要用[...]/Arrary.from/Arrary.Prototype.slice.bind方法转换为数组
Set

var a = [1,2,3]
var b = [2,3,4]
var aSet = new Set(a);
var bSet = new Set(b);
var result = new Set([...a, ...b])  // [1,2,3,4]
var result = a.filter((data) => bSet.has(data)) // [2,3]
var result = a.filter((data) => !bSet.has(data)) // [1]
const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

Map

var aMap = new Map();
var o = {s:'s'}
aMap.set('oName',o);
aMap.get('oName');
aMap.has('oName');
aMap.delete('oName');

22.express/egg

app.use使用中间键，app.get通过获取是get请求的方法，然后根据url来判断执行操作。
egg主要做node层接口聚合的，分为router/controller/services/在router层确定请求的接口，controller层做请求，包括请求前参数的聚合，services层拿到返回的结果后，对返回的数据做处理。
path.resolve([from],to):path.resolve(__dirname, 'res')

23.浏览器的数据存储

1.localStorage：本地存储，数据长期存在，大小约为5M
2.sessionStorage：会话存储，数据在关闭网页后消失，大小5M
3.cookie：保存在浏览器端的数据，服务器端通过response的set-cookie来设置cookie的值，js通过document.cookie来读取和创建cookie，紧跟域名，同一个domain下的所有请求都会携带cookie。通过后台设置httpOnly，可以设置不让document.cookie获取到cookie。如果给cookie设置过期时间，则会存储在硬盘当中，下次还在，如果不设置过期时间，存储在浏览器的内存当中，浏览器关闭则关闭。
4.session：保存在服务器端的数据，用来保存用户信息，通过SessionID来分辨不同的用户，一般SessionID存储在cookie当中

24.浏览器的缓存

缓存过程：
浏览器第二次请求资源 => 获取资源缓存的header信息判断cache-control和expries信息，如果命中直接取资源信息，包括缓存的header信息。如果没命中强缓存，浏览器会发送请求到服务器，请求会携带第一次请求返回的相关header信息字段，如（Last-modified、Etag）等，由服务器端根据请求中的相关header信息来比对是否协商缓存命中结果；若命中结果，则服务器返回新的响应header信息更新缓存中对应的header信息，但不返回资源。他会告知浏览器可以直接从缓存中获取；否则返回新的资源。
强缓存：通过expries：Date与cache-control：max-age来判断是否为强缓存。
cache-control：no-store:不缓存，去请求。no-cache：不强制缓存，可以去请求协商缓存
协商缓存：通过last-modify：确定最近一次更新的时间，E-tag：确定版本号
再次请求，通过if-modify-since；if-no-match请求带上上次返回的结果，去匹配。

25.TCP/IP

tcp/ip协议是一个协议族，对应的OSI七层模型和TCP/IP四层模型
OSI：物理层、数据链路层、网络层、传输层、会话层、表达层、应用层
TCP/IP：数据链路层、网络层（IP头部，APR、RAPR）、传输层（TCP/UDP）、应用层（HTTP、FTP）

26.HTTP/HTTPS

HTTP协议是基于TCP/IP协议的应用层协议，叫做超文本传输协议。
每次请求，TCP建立一个与服务器连接的通道，当请求结束后，通道断开，所以HTTP是一个无状态的短链接协议。它定义了数据请求的头部和接收的格式。
HTTPS是一个以安全为目的的HTTP通道，在HTTP头部加一个SSL层，通过非对称加密算法加密RSA进行加密。
准确过程：非对称加密和解密是非常耗时间的，所以，需要使用对称加密。浏览器将自己的对称加密的密钥，通过服务器的公钥进行加密，将其发送给服务器，服务器使用自己的私钥解密，得到对称加密的密钥。
看似很完美，可能会有第三方劫持，当浏览器请求服务器的公钥时，第三方劫持服务器的公钥，将自己的公钥返回给浏览器，浏览器使用这个公钥加密，并发送，第三方接收到后，解密，并添加真正的服务器的公钥，发送给服务器，服务器返回结果，第三方用自己的私钥加密信息，返回给浏览器。这样，浏览器和服务器并不会感知。
所以需要CA，CA值得所有浏览器信赖，每个浏览器都已知CA的公钥。当浏览器向服务器请求加密通信时，服务器先向CA请求，获取证书，CA对证书进行hash加密，得到数字签名。明文和数字签名共同组成数字证书。浏览器拿到证书，使用公钥解密，并比对数字签名，如果相同，则可靠。
HTTP：8080，明文传输，HTTPS：443，密文传输，需要CA认证

27.TCP/UDP（传输层协议）

TCP：连接的、面向字节流的可靠的传输协议，通过三次握手建立连接，慢、耗时长，全双通工
UDP：无连接的、面向报文的不可靠传输协议，会发生丢包。主要在视频、语音、直播使用，不考虑报文是否到达。

28.三次握手/四次挥手

第一次握手：客户端向服务器端发送请求：seq=X,SYN=1
第二次握手：服务器端接收到请求后，返回seq=Y,ACK=X+1,SYN=1,确认了浏览器的发送端口和自己的接收端口正常。
第三次握手：浏览器端接收到返回请求后，发送ACK=Y+1，确认了自己的发送和接收端口，服务器的接收和发送端口正常。服务器端接收到请求后，确认了自己的发送，浏览器的接收端口正常。
为什么不多次握手：没有必要多次握手，三次握手已经足够确认通讯正常，两次握手不足以确定端口的正常

1.浏览器向服务器端发送请求FIN=1，seq=X，
2.服务器端返回，ACK=X+1，Seq=Y，
3.服务器发送，FIN=1，seq=Z
4.浏览器端返回：ACK=Z+1，等待2MSL后关闭端口
为什么要等待2MSL：1MSL是报文在网络中生存的最大时间，超时后报文将被丢弃，所以2MSL是报文在连接中存在的最长时间，如果没收到。服务端将会再发送一个FIN包，客户端可以再次发送确认包。
为什么握手是3次，挥手是4次：区别在于第一次握手的时候，服务端可以返回SYN+ACK，因为第一次建立连接，服务器端不会有向客户端要发送的东西。而在挥手的时候，双方已经建立了连接，服务器端可能还有东西需要向客户端发送，所以要先发ACK来确认收到，再发FIN释放通道，这个过程中，服务器端还是可以继续发送

29.GET/POST/状态码

GET：参数在URL中,可以被浏览器收藏标签，参数大小限制在2K，浏览器会主动缓存回退无害
POST：参数在Request的body中，不受限，浏览器不会主动缓存，回退会再次请求
他两都是HTTP协议定义的两种方式，而HTTP协议都是基于TCP/IP协议族来定义的，所以GET和POST的底层都是TCP协议，只不过定义的时候是这么定义的，可以在post上使用url来请求，也可以在get里传requestbody来使用。有一些说法是post会把head和body分两次发送，而get只发送一次。但这个应该是不同浏览器所造成的。
100:服务器接收请求，客户必须继续发出请求
200:成功
204:请求收到，但是返回结果为空
301:永久重定向，当请求为此code时，将请求引至其他页面
302:临时性重定向
304:所请求资源未修改，协商缓存
400:请求的参数有误
403:请求成功，但是服务器端拒绝响应
404:请求的url有误
500:服务器内部错误
504:nginx未能从服务器端拉取到请求

30.一个页面从输入url开始经历了什么

1.进行DNS解析，先从浏览器缓存中查找对应的IP => host => 路由器的缓存 => 本地DNS => 根
2.拿到对应的IP后进行TCP三次握手
3.三次握手成功后，发起HTTP请求，一般当connection为keep-alive，表示持久链接，浏览器每隔45s会发送一个TCP的keep-alive包来确定连接是否存在，nginx默认75s没有新的请求，则断开连接
4.浏览器解析页面，首先开始解析HTML代码，遇到js/css/image等浏览器会再次发送请求获取数据。同步进行代码解析，在解析的过程中处理
1.HTML生成dom树，2.处理CSS生成CSS的规则树，3.将CSS的规则树与DOM树结合生成渲染树4.根据渲染树的数据计算节点，布局5.根据计算好的节点绘制页面。
布局：根据渲染树的信息，计算渲染树的位置及尺寸
重绘：某个节点颜色的变化等，不影响布局，只会引起重绘
回流：某个尺寸发生变化，需要重新计算渲染树
5.TCP四次挥手，断开连接

31.跨域问题

1.通过设置document.domain来设置同源
2.我们项目中使用nginx来做跨域的处理，nginx中设置location来判断url，然后设置add_header设置Access-Control-Allow-Orign为来标识允许所有域来请求
3.传递参数，用过postMessage（data，orignUrl）来传递父页面的参数，子页面通过window.onMessage来接收父页面传递的参数
4.在实际工作中遇到的问题，在做上传组件的时候，实现的方案是先向一个A域名发送请求，由A向服务器端做上传请求，因为请求为一个文件流的形式，是MIME类型的post请求，有可能对服务器产生副作用，所以浏览器先使用一个OPTIONS方法发起一个预检请求，从而获知服务器是否允许跨域请求。但是服务器返回404，所以在nginx的A域名下，设置了Access-Control-Allow-Orign:''。Access-Control-Allow-Methods: POST, GET, OPTIONS。Access-Control-Alow-Credentials

32.React

为什么setState后无法立刻拿到state？
setState通过一个队列的机制来更新state，当执行setState的时候，会将需要更新的state合并后放入队列，不会立刻更新this.state，所以无法设置this.state它只会在下次setState的时候被冲掉，所以只能在setState后调用回掉函数立即使用。实际会触发re-render方法，将新的节点放在旧的节点之前，然后删除掉旧的元素。

什么是JSX？
jsx是javascript的语法糖，它将js当中的html标签转换为js对象的形式描述。

React具体过程
jsx是一个javascript的语法糖，他能将js中的html标签转换为对象的形式（AST抽象语法树），其实就是虚拟dom树。当有页面数据的改动时，可以通过createElement方法，new一个Element对象接收三个参数（type、props、children）生成新的虚拟dom树。
更新页面的数据时，通过diff深度优先遍历比较。diff算法：接收旧的虚拟dom和新的虚拟dom，里边一共有patches（补丁）的对象。当新的DOM节点不存在时，生成一个对象{type:'Remove',index},当节点类型变化时，会有{'type':'REPLACE':newNode},当属性变化时会有{type:'ATTR',attr:'要更改的数据'}
通过diffAttr和diffChildren比较新老类型和节点。
最后一个步骤是打补丁，遍历patches旧的节点根据序号确认当前是哪一个节点的问题，打补丁，判断patches里的各种类型，然后根据不同的类型，做各种不同的操作，通过renderDom的方法，将相应的改变应用到旧的dom树上去。
用JS对象模拟DOM（虚拟DOM）
把此虚拟DOM转成真实DOM并插入页面中（render）
如果有事件发生修改了虚拟DOM，比较两棵虚拟DOM树的差异，得到差异对象（diff）
把差异对象应用到真正的DOM树上（patch）
React dangerouslySetInnerHtml
类似与innerHtml，可以向其中传入一个对象，使用{__html=html字符串}

React的生命周期

constructor
componentWillMount
render
componentDidMout
componentWillUnmount
===============================================
componentWillReceiveProps
shouldComponentMount
componentWillUpdate
render
componentDidUpdate
componentWillUnmount

ReactSSR
在页面初次加载的时候，把所有的地方都渲染好，一次性传给客户端，有SEO和首屏加载快的特点。

如ajax无法在服务器端使用，只能去寻找http.request的方法，找到了node-fetch，客户端使用whatwg-fetch，

浏览器端添加样式比较容易，写一个css文件，在webpack中配置style-loader和css-loader解析，而在服务端跑会报window is undefined的错,所以在浏览器端应该使用style-loader和css-loader，在服务器端使用isomorphic-style-loader。

isomorphic-style-loader，只在对应的dom元素上生成对应的class类名，然后返回生成的css代码。

在客户端中，我们使用css-loader和style-loader，不但在dom上添加class，还会把代码挂载到页面上，如果这么做，页面的样式最终是由客户端渲染的，页面会在一开始的时候展示的是没有样式的页面，所以，我们可以在isomorphic-style-loader拿到样式后，以字符串的形式将其添加到服务器端渲染的HTML标签里。

在渲染方面，react提供了两种方法，React.renderToString和React.renderToStaticMarkup,

renderToString方法渲染的节点带有data-reactId属性，可以精准的定位发生变化的节点，按需更新。

renderToStaticMarkup渲染出不带data-reactId的纯HTML文件，如果发生更新，则整体更新。

项目中的script和meta，title等属性都是通过其渲染的。页面reactRouter通过renderToString渲染的。

关于store，我们在浏览器端的时候，可以直接写store = createStore(),return store;

但是在服务器端是不可以的，因为用户浏览器端只有一个store，而客户端要为用户创建多个store，所以，要返回一个方法
var getStore = function(){
return createStore();
}
这样在每次执行的时候，服务端都会重新为各个用户建立独立的store。

通过服务器端获取的数据，最终要展现在客户端，首先在服务器端获取到数据后，通过renderToStaticMarkup将其发送到页面中，在页面中嵌入一个script标签，该标签的作用是拿到数据，把它传递给window的方法，然后在client的文件中，通过取window方法，拿到数据，注入到组件当中。

使用universal-router路由，每个页面的title和description都是通过universal-router提供的中间键来为页面添加信息，通过调用context.next()来执行下一步