面试准备

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.请求报文和响应报文

请求报文由

• 请求行
  请求方法，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
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标