面试准备

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
  用于处理微信公众号发过来的请求，

4.preact

与React相同的API，更容易迁移
更小的体积，更适用于移动端，首屏渲染时间小于React
渲染性能更好
专注于React服务端渲染
花更多时间去解决更关键的问题，而不是花在使用替换方案和解决其兼容性上
React项目使用在自己的核心产品上

3.React生命周期

生命周期分为挂载，渲染，卸载这几个阶段

挂载阶段
componentWillMount可以在render方法之前执行，componentDidMount会在render方法之后执行，在componentWillMount中调用setState方法，组件会更新state，但组件只渲染一次
卸载阶段
componentWillUnmount
执行一些清理方法，事件回收或是清除定时器
更新阶段
如果组件自身的state更新了，会依次执行
- shouldComponentUpdate
  接受更新的props和state，在需要时更新，不需要时不更新，即是否执行虚拟DOM对比
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.请求报文和响应报文