面试笔记原型：每创建一个新函数，会根据特定规则为该函数创建一个Prototype属性指向函数的原型对象。原型对象会自动获

JS

原型/继承

原型：每创建一个新函数，会根据特定规则为该函数创建一个Prototype属性指向函数的原型对象。原型对象会自动获得一个constructor属性，指向prototype属性所在的函数指针。

函数经过调用成为构造函数，返回一个新的实例对象，这个对象有个_proto_属性，指向构造函数的原型对象。

原型链：对象通过_proto_指向父类对象，直到object对象为止。

使用hasOwnProperty（）检查对象自身是否含有该属性。
使用in检查对象及原型链中是否存在某个属性。

JavaScript深入之继承的多种方式和优缺点

详解JS原型链与继承

es6

HTML

h5：

标签：新增语义标签（aside/figure/section/header/footer/nav），多媒体标签（video/audio）

属性：增强表单，增强input的type属性；meta增加charset设置字符集；script增加async异步加载脚本

存储：localStorage/sessionStorage/indexDB

API：增加拖放API，地理定位，SVG绘图，canvas绘图，Web Worker，WebSocet

CSS

清除浮动

给父元素添加float，这样让父元素跟子元素一起脱离文档流浮动
给父元素一个固定高度
新建一个空的div,设置clear：both
给父元素添加overflow:hidden
通过伪类::after

::after{
 content:"";
 clear:both;//清除浮动
 display:block;//确保是一个块级元素
 }

BFC

不会发生margin重叠；解决子元素浮动带来的高度坍塌和文字环绕。

创建方法：根元素；浮动元素float：left；right绝对定位元素（position：absolute fixed）display：inline-blocks；table-cell; flexoverflow：hidden；scroll;auto;inherit

特性内部的盒会在垂直方向一个接一个排列 box垂直方向的距离由margin决定每个盒子的左边距与包含块的左边缘接触是页面上的一个独立容器 bfc的高度包含所有元素及浮动元素 bfc不与float box重叠、

，position：absolute;top:50%;left:50%。不同的是，接下来需要使用transform:translate(-50%,-50%),实现垂直居中

居中

水平居中：

内联或类内联元素（譬如文本或链接）

text-align:center

块级元素

margin:0 auto

垂直居中

内联或类内联元素（譬如文本或链接）

已知文本不会换行，让line-height和height相等，从而实现垂直居中

多行

当父级容器拥有确定高度的元素，使用flexbox。对于父容器display:flex，它的每一个子元素都是垂直居中的

幽灵元素：在垂直居中的元素上添加伪元素，设置伪元素的高等于父级容器的高，然后为文本添加vertical-align:middle样式

块级元素

如果我们不知道元素的高度，那么就需要将元素定位到容器的中心位置，然后使用transform属性，将元素的中心和父容器的中心重合，从而实现垂直居中。

如果无法获取确定的宽高，同样需要设定父级容器为相对定位的容器，设定子元素绝对定位的位置，position：absolute;top:50%;left:50%。不同的是，接下来需要使用transform:translate(-50%,-50%),实现垂直居中

flexbox {display:flex;justify-content:center;align-items:center}

position

relative:相对于默认位置进行偏移，搭配top left bottom right进行指定位置的偏移;

absolute:相对于上级非static元素进行偏移搭配top left bottom right进行指定位置的偏移;

fixed:相对于浏览器视口固定;

static 正常的页面流;

sticky relative和fixed结合必须搭配top bottom left right不能省略否则等同于relative

伪类&&伪元素

伪类

为了通过选择器，格式化DOM以外的信息以及不能被常规CSS选择器获取到的信息。

格式化DOM以外的信息。 <a> 中的:link,:visited.这些信息不存在于DOM树中
不能被常规CSS选择器获取到的信息。 :first-child

添加选择器的特殊效果；

基于元素的特征而不是ID class

伪元素

创建文档语言无法创建的虚拟元素。描述内容的第一行 ::first-letter ::first-line

创建源文档不存在的内容。 ::before ::after

区别：

伪类弥补CSS选择器的不足，方便的获取信息。动画交互（滑入滑出）用单冒号表示

伪元素创建了一个虚拟容器，在其中添加内容或样式。字体图标，清除浮动双冒号

盒模型

ie盒模型：此模型下的宽度计算为border+padding+content的宽度总和

box-sizing:border-box

w3c模型：元素的宽度计算为content

box-sizing:content-box

浏览器

浏览器缓存

强缓存（expires/cache-control）
协商缓存（e-tag/last-modify）
缓存位置（ServiceWorker/Memory Cache/Disk Cache/Push Cache）

浏览器本地存储

Cookie/SessionStorage/LocalStorage/IndexDcB

cookie属性详解

http/https/TCP/UDP

http1.0/http1.1：长连接/缓存处理/带宽处理/host头处理

http2.0新特性：多路复用/服务器端推送/二进制传输/heade头部压缩

http3.0 ：UDP

https/http：

https使用443端口，http使用80
http是超文本传输协议，明文传输；https经过ssl加密的协议，传输更安全
https除了tcp握手的三个包，还要加上SSL握手的九个包

对称加密：客户端和服务器公用一个密钥来对消息加解密。

非对称加密：

非对称加密概述

（建议精读）HTTP灵魂之问，巩固你的 HTTP 知识体系

跨域

正确面对跨域，别慌

安全

CSRF：跨站请求伪造。

--验证Token

XSS：跨站脚本注入。利用网页开发时留下的漏洞，注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。

--输入检查。代码转义或过滤。/设置httpOnly（防止获取cookie）/开启CSP

非对称加密：

从输入URL到页面呈现过程发生了什么（重绘回流&&Eventloop）

segmentfault.com/a/119000000…

深入浅出浏览器渲染原理

从输入url到页面展示到底发生了什么

为什么tcp连接的时候是三次握手，关闭的时候是四次握手

（01）老生常谈的从 URL 输入到页面展现背后发生的事 | Web 前置知识

浏览器渲染机制

回流：DOM结构的修改引起DOM尺寸变化。（几何属性变化，DOM节点发生增减移动）

过程：生成DOM树，计算样式，生成布局树，建图层树，绘制列表

重绘：DOM的修改导致样式的变化但是没有影响到几何属性。

React

react-fiber/diff

React Fiber是什么

React 源码剖析系列－不可思议的 react diff

浅谈React diff算法与key

生命周期

componentWillMount 在渲染前调用,在客户端也在服务端。 

componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

redux/redux-thunk/react-route-dom

redux

Store：Redux只有一个Store，Store的State不能直接修改，每次只能返回一个新的State。

使用createStore函数生成Store。

使用store.subscribe方法设置监听函数一旦State发生变化就自动执行这个函数。

Action：Action就是View发出的通知，State要改变。store.dispatch是view发出Action的唯一方法。有一个Type属性，代表名称。

Reducer：纯函数。combineReducers把多个reducer合成一个根Reducer。

流程：

用户通过View发出Action。
```
store.dispatch(action)
```
Store自动调用Reducer，传入两个参数，当前State和收到的Action，返回新的State
```
xxReducer(previousState,action)
```
State一旦有变化，Store会调用监听函数。
```
store.subscribe()
```
store通过getState得到当前状态，重新触发渲染。
```
setState(store.getState())
```