1.本地存储
- navigator.onLine 判断设备是否能上网
- HTML5应用缓存，为离线web应用设计，可以用一个描述文件manifest file，列出要下载和缓存的资源
1.1 cookie
- document.cookie 可以访问cookie
- cookie 在客户端存储会话信息，用于保存客户端状态
- 响应中包含Set-Cookie字段，要求设置相应cookie
- 向相同域名发送请求都会包含这个cookie
- 浏览器对cookie数量限制在每个域30或50个，超过cookie数量，浏览器就会清楚之前设置的cookie，删除最少使用的cookie，为了绕开限制可以使用子cookie
- cookie大小限制在4095B范围内
- cookie是由分号隔开，需要用encodeURIComponent编码后存入
- 可以添加HTTP-only字段，cookie只能从服务器读取，
1.2 localStorage
持久化存储数据，同源策略
- clear
- setItem
- getItem
- removeItem
- length 获取有多少键值对在Storage对象中
在safa上，无痕模式下去写入LocalStorage会报错，要注意捕获异常
1.3. SessionStorage
存储会话数据，数据只保持到浏览器关闭
- 对存储数据进行修改，都会在文档上触发storage事件
- 每个来源2.5M的大小限制
1.4 IndexedDB
同源策略，对象存储数据库，所有操作为异步执行，客户端本地数据库
2.nodejs
- 中间件
是一个处理请求对象和响应对象的函数，在express请求响应循环中，下一个内联的中间件通常用变量next表示 - 执行任何代码
- 修改请求和响应对象
- 终结请求-响应循环
- 调用堆栈中的下一个中间
如果中间件没有终结请求响应循环，则必须调用next方法将控制权交给下一个中间件，否则请求就会挂起 - 常用中间件
- flash
后台管理部分用于显示成功和错误信息 - wechat, wechatCenter
用于处理微信公众号发过来的请求，
- flash
4.preact
- 与React相同的API，更容易迁移
- 更小的体积，更适用于移动端，首屏渲染时间小于React
- 渲染性能更好
- 专注于React服务端渲染
- 花更多时间去解决更关键的问题，而不是花在使用替换方案和解决其兼容性上
- React项目使用在自己的核心产品上
3.React生命周期
生命周期分为挂载，渲染，卸载这几个阶段
挂载阶段
componentWillMount可以在render方法之前执行，componentDidMount会在render方法之后执行，在componentWillMount中调用setState方法，组件会更新state，但组件只渲染一次卸载阶段
componentWillUnmount
执行一些清理方法，事件回收或是清除定时器-
更新阶段
如果组件自身的state更新了，会依次执行- shouldComponentUpdate
接受更新的props和state，在需要时更新，不需要时不更新，即是否执行虚拟DOM对比
- shouldComponentUpdate
componentWillUpdate
渲染前后时刻，不能执行setState，会造成死循环，自身调用自身componentDidUpdate
渲染之后时刻componentWillReceiveProps
在props传入后，渲染之前setState，这里调用setState不会二次渲染可以使用setstate的有
componentWillMount
componentDidMount
componentWillReceiveProps
componentDidUpdate将无状态组件写成函数组件
展示型组件，也无法使用组件的生命周期方法
4.React性能优化
1.如果新的props和旧的一样，这是React还是要进行虚拟DOM的diff，，这个diff就是多余的性能损耗，而且在DOM结构比较复杂的情况，整个diff会花费较长的时间
可以通过集成React.pureComponent纯组件来优化性能，它重写了shouldComponentUpdate，浅比较Props和state，当两者相等时返回false，这样组件就不会进行虚拟DOM的diff
2.有特殊需求时，可以使用shouldComponentUpdate来判断是否需要更新组件，比如判断传入数据的id是否有变化等等
3.diff算法不会尝试比较不同组件类的子树，如果发现正在使用的两个组件类输出的DOM结构非常相似，可以把这两个组件类改成一个组件类
4.不要进行DOM节点跨层级的操作，保持稳定DOM结构有助于性能的提升，可以通过CSS隐藏和显示节点，而不是真正地移除和添加DOM节点
5.React会将所有显示到DOM的字符串转义，防止XSS
5.使用Symbol设置私有属性
let Person=(function(){
let _name=Symbol();
class Person{
constructor(name){
this[_name]=name;
}
get name(){
return this[_name];
}
}
return Person;
})();
let a=new Person('red');
console.log(a.name);
首先在函数作用域内创建属性名，使用闭包引用这个变量，就不会被垃圾回收器回收，接着使用Symbol设置属性名，保证不会重名，且外部无法生成同样的值，保证唯一性
6.express特点
- 自带路由和路由规则，需要body-parser解析请求主体
- 使用一个接一个的中间件的线性结构
7.koa特点
- 洋葱模型，调用next下一个中间件的前后都能执行相应的代码
8.HTTP请求报文和响应报文
8.1 请求报文
请求报文由
- 请求行，请求头部，请求主体构成
请求行包含请求方法，请求URL，HTTP协议及版本
响应报文 - 响应行，响应头部，响应主体构成
响应行包含HTTP协议及版本，状态码及描述
9.性能优化
- 根据User-Agent判断浏览器的类型，如果是谷歌浏览器返回webp格式
10.请求报文和响应报文
请求报文由
- 请求行
请求方法，URL字段，HTTP协议版本 - 请求头部
User-Agent 请求浏览器的类型
Host 请求的主机名 - 请求主体
响应报文
- 响应行
状态码，HTTP协议版本 - 响应头部
Set-Cookie字段
Content-Type字段 - 响应主体
11.垃圾回收机制
内存分配量达到了一个临界值，垃圾收集器就会运行，这个临界值会动态调整。
如果垃圾回收的内存分配量低于15%，那么临界值就会加倍，垃圾回收的内容分配量高于85%，那么临界值会重置为默认值
12.ES6
及时清除引用是非常重要的，WeakSet和WeakMap对值的引用都是不计入垃圾回收机制的，这是弱引用，一旦消除对该节点的引用，它占用的内存就会被垃圾回收机制释放，WeakMap保存的键值对也会自动消失，向向对象上添加数据，又不想干扰垃圾回收机制，就可以使用WeakMap
- WeakSet
- 防止不重复值得集合，成员只能是对象，而不能是其他类型的值
- WeakSet中的对象都是弱引用，即垃圾回收机制不考虑WeakSet对该对象的引用
- 内部有多少成员取决于垃圾回收机制有没有运行，运行前后成员个数不同，垃圾回收机制何时运行是不可预测的
- WeakSet不可遍历
13.暂时性死区
只要在块级作用域内存在let命令，声明的变量就绑定这个区域，不再受外部影响，在声明之前使用变量，会报错
只要已进入当前作用域，索要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才能获取和使用该变量
14.前端SEO
- 合理的title，description，keywords
- 语义化HTML代码
- 重要内容HTML代码放在最前 搜索引擎对抓取的长度有限制
- 重要内容不要用js输出
- 少用iframe
- 非装饰性图片必须加alt
- 提高网站速度：网站速度是搜索引擎排序的一个重要指标
