Worker

背景

1. js是单线程的，
   好处很多，如毕竟DOM只有一份，如果多个线程同时操作DOM岂不是大乱；
   当然坏处也不少，如耗时的计算（也可让接口做）影响用户体验；

宗旨

1. 不打扰用户
   DOM操作，alert，confirm都不能使用的
2. 一对一的，只能和创建Worker的脚步（window，Worker）进行通讯

专用WebWorker，
共享WebWorker

通过Worker(scriptURL)告诉浏览器把scriptURL指定的JS新开线程执行。

一个挺有意思的问题：浏览器都有哪些加载JS方式 ？

1. window上下文中：script标签，Worker(), SharedWorker()，ServiceWorkerContainer.register
2. Worker上下文中：importScripts()，并且还是同步的这样可以实现前后依赖加载，也可以通过多个参数并行加载。忽然意识到script标签也是通过同步的方式加载JS的（不过可以添加属性控制）

依赖的技术

1. 结构化克隆算法
2. MessageChannel

参考

1. ryf Web Worker 使用教程
2. MDN 使用Web Worker
3. MDN WebWorker 落地页

from note.

重新认识JSON.stringify

因看到结构化copy而导致的血案X：有必要认真看下JSON.stringify方法了。
本质就是把JS对象序列化成JSON字符串，但也没那么简单。

1. 关于方法名字stringify

说实话之前一直记不清后面几个字母。后来特意查了下原来字符ify作为后缀有特殊含义的：

与形容词和名词相结合，也可以加缀在词根后面，构成的动词多是及物的

2. 语法

JSON.stringify(value[, replacer [, space]])

2.1 参数value

好吧我平时只用到这个参数。因为JSON的类型比JS类型少，并不是所有的JS数据都可以进行JSON序列化的，详细的见MDN列举的五点注意事项

2.2 参数replacer

1. 数组类型
   以白名单的方式指定需要被序列化的属性名称，并且会影响对象以及其子对象的属性的名称

var obj = {
  a: 1,
  b: 2,
  c: {
    a: 21,
    b: 22
  }
}
// 不仅属性obj.b没忽略了，obj.c.b属性也被忽略了
console.log(JSON.stringify(obj, ['a', 'c'],)) //{"a":1,"c":{"a":21}}

2. 函数function(key, value)
   如果是个函数的话在序列化过程中把所有的属性key-value对作为参数调用该回调函数。函数的返回值作为序列化的value输出：

如果返回一个 Number, 转换成相应的字符串被添加入JSON字符串。
如果返回一个 String, 该字符串作为属性值被添加入JSON。
如果返回一个 Boolean, "true" 或者 "false"被作为属性值被添加入JSON字符串。
如果返回任何其他对象，该对象递归地序列化成JSON字符串，对每个属性调用replacer方法。除非该对象是一个函数，这种情况将不会被序列化成JSON字符串。
如果返回undefined，该属性值不会在JSON字符串中输出。

注意：

• 如果返回值为undefined则忽略改属性（数组元素会用null取代），所以说函数类型的参数像是个黑名单机制，而数组类型的参数像是个白名单机制。
• 第一次调用时会把stringify方法的参数1作为改回调函数的value，此时key取值为空窜。这样就要需要被序列化的值和序列化其属性统一处理了（走递归序列化逻辑）

2.3参数space

主要用来格式化输出的JSON字符串。

3. *操作：toJSON方法

在序列化过程中，如果对象包含toJSON方法，JSON.stringify会调用value.toJSON方法的返回值作为序列化的value，并且JSON.stringify调用toJSON方法时会传入参数：

1. 如果该对象是JSON.stirngify的value参数，则参数是空字符串；
2. 如果被序列的对象是对象的属性，则参数是属性名称（string ）；
3. 如果被序列的对象是数组的元素，则参数是该对象所在的下标。

本质上就是用toJSON方法的返回值替代被序列化的对象本身。而JSON.stringify参数2用用来修改被序列对象的属性。

参考

1. MDN JSON.stringify

from note.