Merge branch 'v2' of https://github.com/dt-fe/weekly into v2

115
Merge pull request #190 from vivaxy/patch-1
2019-08-12 08:17:19 +08:00 · 2019-08-12 08:17:13 +08:00 · 2019-08-05 14:30:23 +08:00 · 2019-08-05 09:11:22 +08:00 · 2019-08-05 09:11:20 +08:00 · 2019-08-05 09:00:49 +08:00
117 changed files with 5276 additions and 183 deletions
@@ -164,11 +164,11 @@ async function mount() {

 ```javascript
 async function mount() {
-  const result = await Promise.all(
+  const result = await Promise.all([
    fetch('a.json'),
    fetch('b.json'),
    fetch('c.json')
-  );
+  ]);

  render(...result);
 }
@@ -96,7 +96,7 @@

 最后考察候选人的发展潜力与工作态度，我们一般通过询问简单的算法问题，进一步了解候选人是否对技术真正感兴趣，而不只是对前端工程感兴趣。同时，算法问题也考察候选人解决抽象问题的能力，或者让候选人设计一个组件，通过对组件需求的不断升级，考察候选人是否能及时给出解决方案。

-最后时工作态度，首先会考察人品，对不懂的知识点装懂是违背诚信的行为，任何团队都不会要的。同时，**不正视自己技术存在的盲点，将是技术发展的最大阻碍**。不过这里也不怕被候选人套路，如果全部都回答不懂那也不用考虑了。
+最后是工作态度，首先会考察人品，对不懂的知识点装懂是违背诚信的行为，任何团队都不会要的。同时，**不正视自己技术存在的盲点，将是技术发展的最大阻碍**。不过这里也不怕被候选人套路，如果全部都回答不懂那也不用考虑了。

 # 3 总结

@@ -98,7 +98,7 @@ foo();

 我们谈到了一些意外情况下定义的全局变量, 代码中也有一些我们明确定义的全局变量. 如果使用这些全局变量用来暂存大量的数据, 记得在使用后, 对其重新赋值为 null.
 #### 2. 未销毁的定时器和回调函数
-在很多库中, 如果使用了观察着模式, 都会提供回调方法, 来调用一些回调函数. 要记得回收这些回调函数. 举一个 setInterval的例子.
+在很多库中, 如果使用了观察者模式, 都会提供回调方法, 来调用一些回调函数. 要记得回收这些回调函数. 举一个 setInterval的例子.
 ```javascript
 var serverData = loadData();
 setInterval(function() {
@@ -174,4 +174,4 @@ JS 这类高级语言，隐藏了内存管理功能。但无论开发人员是



-参考文章: [MDN 的内存管理介绍](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Memory_Management)
+参考文章: [MDN 的内存管理介绍](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Memory_Management)
@@ -0,0 +1,161 @@
+本期精读的文章是: [coinhive官方文档](https://coinhive.com)及[Monero官方文档](https://getmonero.org/)
+
+懒得看文章？没关系。
+
+咦，怎么是官方文档？
+
+本期精读有所不同，注重实操，先操作获取感性认识，然后再介绍相关的概念，由浅入深，力求不纠缠细节，但不遮盖环节。阅读本文需要对加密货币有一些基本常识 (如果你是一个开发者但是完全没了解过加密货币，可以参考[这里](http://piotrpasich.com/introduction-bitcoin-for-developers/))。希望同学们看完本文能对加密货币领域有一个更深更切实的感受。如果要了解更多细节，文末总结的延伸阅读链接列表是最好的开始。
+
+要注意一点，文中很多说明是默认基于XMR和BTC的，他们两个又同源，机制非常相似。**所以很多命题判断并不适用于所有的成千上万的加密货币.** 正相反，新的币种层出不穷，几乎所有的惯例都被打破，所有可能性都被尝试。这一点以下不再做说明。
+
+# 1 引言
+首先，干货。10行代码，5分钟，不需部署不需构建直接浏览器开挖。
+
+- 本地创建文件test.html，粘贴如下代码:
+  ```
+  <!doctype html>
+  <html>
+  <head>
+      <title>Mining</title>
+  </head>
+  <body>
+      <div class="coinhive-miner" 
+          style="width: 256px; height: 310px"
+          data-key="MUtCJzIDhrs01ERrf3qlqdawo35N0CYD">
+          <em>Loading...</em>
+      </div>
+      <script src="https://authedmine.com/lib/simple-ui.min.js" async></script>
+  </body>
+  </html>
+  ```
+
+- 本地双击打开。等待JS加载，点击widget "Start Mining"。开始挖矿! 如下图
+
+  ![mining](https://img.alicdn.com/tfs/TB13KIljiqAXuNjy1XdXXaYcVXa-880-686.png)
+
+  不错，数字已经在跳动，风扇开始工作，永无尽头的挖矿已经开始了。那么重要的是，挖出来的加密货币在哪呢？原来上面的代码里用的还是我的 API key，所以还没挖到你自己那里，所以请继续下面的步骤：
+
+- 在coinhive注册账号并登陆。它是做什么的？别急，后面会详细讲。在 `coinhive/settings` 找到自己的 `API keypair`，把 `public key` 复制出来，形如 `MUtCJzIDhrs01ERrf3qlqdawo35N0CYD`
+
+- 替换上面代码中的 data-key 部分，重新开始挖矿。好了，现在挖出的 Monero (这是啥？详见下一节) 已经会到你自己的 coinhive账户中。用下图来说明，你名下总计算过的 Hash 个数为 264K，当前难度换算为 0.00002 个 Monero(Symbol:XMR)。当前难度为 66G 一个 block，一个 block reward 5.87 XMR，得到一个 XMR 是 11.268G。264K/11.268G = 0.0000234。这就是你目前的收益。
+
+  ![coinhive dashbaord](https://img.alicdn.com/tfs/TB1LnMljiqAXuNjy1XdXXaYcVXa-2424-1118.png)
+
+- 查 bitfinex 可得现在 XMR 价格在 375 美元 (当你看到本文的时候，价格可能早就又波动到不知哪里去了)，所以你 (以及你忠实勤劳的电脑) 获得的实际收益为 0.000234 * 375 USD = 0.008775 USD，快到一分钱了 :)
+
+怎么样，有没有一种浏览器点开即玩一刀 999 级的感觉。以上操作的便捷直接，是建立在无数前人大量的开发和基础设施建设之上的。越是领域早期的工作，越步履维艰，收货也越丰厚。如今加密货币已经走到了一个成年期，逐渐稳定成熟起来。
+
+接下来我们聚焦到上面过程的每个环节，了解下拼图的每一块是怎样被构成全图的。
+
+# 2 聚焦
+让我们从最终端最接近用户的环节开始，逐一聚焦，最后走完整条链路。
+
+## 2.1 从浏览器说起
+本文标题叫浏览器挖矿，也是和贴合前端的部分。那么为什么可以在浏览器里挖矿？为什么可以很多用户在多个终端浏览器同时为同一个人 (你) 挖矿？
+
+我们知道，挖矿是对加密货币产生机制的俗称。主流大多采取 Proof of Work (PoW) 机制。最常见的 PoW 方式就是由网络中所有节点作为矿工，每个节点都基于 blockchain 前面 block 已有信息计算一个新信息。这个新信息的计算方式往往是某种 hash function，并且人为地被设置为需要巨大计算力和时间才能完成 (其具体难度一般也会实时调整)。当一个节点幸运地 (也依靠强大的算力) 第一个计算出结果后，会把这个结果广播到网络中。其他所有节点会验证这个结果 (我们知道非对称加密算法，验证便宜而计算昂贵)，一旦证实就会停下手里的计算，承认这个计算结果。新的计算结果创造出新的块，区块链的高度增加一层，然后计算继续下去。每一个块的生成一般在2-10分钟。这个过程就被叫做挖矿.
+
+既然是通用计算，既然是算一个 hash 值，那么民用级 CPU 和 GPU，浏览器或任何沙盒，虚拟机，移动设备当然就都可以。在我们的例子中，计算过程被做成分布式，每个用户可以各自计算，结果按 chunk 发回 master 汇总。这样就实现了终端用户 - 浏览器 - 共同贡献计算资源 - 换为 XMR 的过程。
+
+这就是对整个链路的一个描述。从中我们会生出一些疑问，比如:
+
+> 给我看看具体算什么 hash？为什么要算XMR而不是比特币或者其他？既然第一个算出的赢家通吃所有，为什么我的收益却是线性的？这种描述来看岂不是算力最大的一方**永远**都能算出结果而其他人颗粒无收吗?
+
+要看具体算法，没有问题。bitcoin 在[这里](http://www.righto.com/2014/02/bitcoin-mining-hard-way-algorithms.html)，XMR 则看[CryptoNote Standard 008](https://cryptonote.org/cns/cns008.txt)
+
+读完两个算法我们就有了以上疑问的答案:
+
+### 2.1.1 为什么要算XMR而不是比特币或者其他
+XMR 不是唯一选择，但是 BTC 是一个不可选的选择。因为 double SHA-265 在专业级 GPU 上会比 CPU 上快 10^4 倍 ([更多信息](https://en.bitcoin.it/wiki/Why_a_GPU_mines_faster_than_a_CPU))。这样一百万用户合力浏览器挖矿还不如一架子双路 Titan，就失去了分布到终端用户的意义。而 CryptoNight 在 GPU 上只比同价值 CPU 快 2 倍。另外 CryptoNight 算法也被设计为不适用[ASIC](https://en.wikipedia.org/wiki/Application-specific_integrated_circuit)。
+
+怎么实现的？CryptoNight 算法开宗明义地写明，运算主体是 Memory-Hard Loop，而不是 Computation-Hard Loop。每个循环都要在内存中检索。实际运行 CryptoNight 时，CPU 都会用最快，最接近 ALU 也是容量最小的 L3 Cache。换到 GPU，显存虽然很大，却没有 L3 Cache 一样的极致读写速度优化，而且由于内存读写成了瓶颈，GPU 中的大量 ALU 也没了用武之地。下图简略地描述了 CryptoNight 循环体的结构:
+
+![CryptoNight](https://img.alicdn.com/tfs/TB1KrQzjiqAXuNjy1XdXXaYcVXa-682-509.png)
+
+### 2.1.2 算力最大的一方永远都能算出结果
+看了比特币具体算法，你应该明白了 hash 是靠不停改变 nonce 来生成的。随机取一个值，算了不对，再随机取另一个 nonce 值..。既然是随机取，就不会存在赢家恒赢.
+
+### 2.1.3 为什么我的收益却是线性的
+这是一个隐蔽但是却非常重要的问题。答案是，本来确实是赢家通吃。如果你的算力足够大，挖矿时间足够长之后总会轮到你，但是收益会有大幅波动.
+
+就是因为如此，矿工们逐渐建立了矿池组织。大家把算力都投入到一起，合力算，然后不管这次实际是谁算出来，都按照贡献的算力比例分配收益。矿池是一个加密货币建立之初，完全推崇去中心化时没有预料到的结构，也产生了深远的影响。现在来自中国矿池的算力早已超过网络 50%，他们会在挖出的块中打上矿池标记，而这些矿池在加密货币的分叉，路线图中也扮演举足轻重的角色.
+
+所以你的算力并不是直接投入 XMR 网络中，而是投入一个矿池。在我们的例子里矿池就是 coinhive，只不过是一个比较特殊的矿池，特殊在矿池成员都运作在浏览器中。这就是为什么你会得到线性收益而不是 all or none.
+
+自古以来各行业都会自发产生行业工会，建立类似保险和行业守则 / 规范这些人人为我我为人人的机制。在 crypto 行业也不例外。这是意料之外而情理之中.
+
+## 2.2 在浏览器里发生了什么，或 coinhive 干了什么
+好，我们搞清了一些基本的 Monero 挖矿机制，下面来看看 coinhive。已经知道 coinhive 帮我们接入它的矿池，让再小的算力也能按比例得到产出。但是还有什么呢？最关键的一点，coinhive 是怎样把一个完整的 mining 过程拆分成小块，让一个或许并不强大的设备上的浏览器，也能快速接收 task，快速完成并且即时上传的呢?
+
+废话不多说，打开源码。本项目没有开源，构建完成后的在https://coinhive.com/lib/coinhive.min.js。先做初步 format 处理，发现有些工作完成在后端，worker shard 一侧。以下用松散的伪码总结一下 client side 的[main success scenario](https://wiki.ihris.org/wiki/Understanding_Use_Cases)流程 (注意很多地方简化了):
+
+```
+  - start
+  - loadWorkerResource
+  - load worker-asmjs.min.js
+  - CRYPTONIGHT_WORKER_BLOB = createObjectURL(Blob(response_of_worker-asmjs.min.js))
+  - _startNow -> _connectAfterSelfTest
+  - selfTest -> verify(testJob),
+    testJob = {
+      verify_id: "1",
+      nonce: "204f150c",
+      result: "6a9c7dea83b079ce0e012907dd6929bcb0aeec3c1f06c032ca7c3386432bca00",
+      blob: "0606c6d8cfd005cad45b0306350a730b0354d52f1b6d671063824287ce4a82c971d109d56d1f1b00000000ee2d1d4fd7c18bdc1b24abb902ac8ecc3d201ffb5904de9e476a7bbb0f9ec1ab04"
+    };
+    verify = if (!this._isReady) {
+        this.verifyJob = job
+    } else {
+        this.worker.postMessage(job)
+    }
+    // 实例化若干个JobThread，每个对应一个worker，worker实际执行asmjs.min.js
+  - _connect // verify成功，终于建立连接。根据public key固定hash到一个shard池然后随机选一个shard，建立websocket
+  - websocket.onmessage: if (type==job) work()
+  - work:
+    do { hash(input，output) } while !(meetTarget(output));
+    websocket.postMessage({nonce，output}) // hash done successfully。submit
+```
+
+看一下这个过程，结合[cns003 XMR blockchain specs](https://cryptonote.org/cns/cns003.txt)。XMR 的整体 hash input 很小，是:
+```
+  - size of [block_header，Merkle root hash，and the number of 
+    transactions] in bytes (varint)
+  - block_header,
+  - Merkle root hash,
+  - number of transactions (varint).
+```
+
+这样用 websocket 发过来毫无问题。之后就是完全独立的计算，调整 nonce 来算不同的 hash 结果。target 就是当前难度的一个指示.
+
+这样整条链路就比较清晰了。再思考一下以下问题:
+
+### 2.2.1 为什么XMR适宜分布式客户端计算
+因为能够利用每个用户的 CPU 和其中的**高速 L3 Cache**。这是中心化执行难以具备的条件.
+
+任何时候当考虑要不要把某项操作推到客户端进行时，都要想明白可以利用客户端的哪个资源，这个资源在客户端是否有明显优势，是否比后端中心化执行更有利。**很多时候答案是，优势并不明显。那么引入的网络通信成本，法规成本，额外开销可能就并不值得.**
+
+## 2.3 最后的步骤
+到了这里，最后剩余步骤就很标准模式化了。coinhive 作为矿场，代管着用户生产的加密货币。用户发请求提出 XMR，就需要提到一个自己的钱包地址保管，比如 [MyMonero](https://mymonero.com)。也可以直接提到 Exchange 交易所，在其中交易成其他币种，包括法币，然后电汇等等形式提现.
+
+如果对钱包或者交易所感兴趣 (这两个也是很大的话题，比如钱包分硬件钱包和软件钱包，离线冷钱包和线上热钱包，private key和recover seeds。交易所有多种多样的交易对，有杠杆，期货，空和多，多种挂单类型等等)，可以看[这里](https://www.blockchain-council.org/cryptocurrency/hot-wallet-vs-cold-wallet/)和[这里](https://github.com/txbits/txbits).
+
+# 3 更多讨论
+
+> 讨论地址是：[精读《全链路体验浏览器挖矿》 · Issue #55 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/55)
+
+**如果你想参与讨论，请[点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，每周五发布。**
+
+# 4 延伸阅读
+http://piotrpasich.com/introduction-bitcoin-for-developers
+
+https://en.wikipedia.org/wiki/Monero_(cryptocurrency)
+
+http://www.righto.com/2014/02/bitcoin-mining-hard-way-algorithms.html
+
+https://cryptonote.org/cns/cns001.txt
+cns001-008 是 Specs 集合
+
+https://en.bitcoin.it/wiki/Why_a_GPU_mines_faster_than_a_CPU
+
+https://en.wikipedia.org/wiki/Application-specific_integrated_circuit
+
+https://github.com/txbits/txbits
@@ -94,7 +94,7 @@ const incrementAsync = async count => {

 ### 将 action + reducer 改为两种 action

-redux 抽象的 action 与 reducer 的指责很清晰，action 负责改 store 以外所有事，而 reducer 负责改 store，偶尔用来做数据处理。这种概念其实比较模糊，因为往往不清楚数据处理放在 action 还是 reducer 里，同时过于简单的 reducer 又要写 action 与之匹配，感觉过于形式化，而且繁琐。
+redux 抽象的 action 与 reducer 的职责很清晰，action 负责改 store 以外所有事，而 reducer 负责改 store，偶尔用来做数据处理。这种概念其实比较模糊，因为往往不清楚数据处理放在 action 还是 reducer 里，同时过于简单的 reducer 又要写 action 与之匹配，感觉过于形式化，而且繁琐。

 重新考虑这个问题，我们只有两类 action：`reducer action` 与 `effect action`。

@@ -87,7 +87,7 @@ function getTokenBlockComment(restStr: string) {
 ```typescript
 while (sqlStr) {
  token =
-    getTokenWhitespace(sqlStr, token) | getTokenBlockComment(sqlStr, token);
+    getTokenWhitespace(sqlStr, token) || getTokenBlockComment(sqlStr, token);

  sqlStr = sqlStr.substring(token.value.length);

@@ -12,7 +12,7 @@

 <img src="assets/68/2.jpg" />

-产品用户体验不仅是指交互视觉，我的理解用户体验反应用户与产品从认知，使用到传播整个情感的连接和反馈。能力上包括了产品设计与功能实现，用户交互界面，以及系统承载能力。
+产品用户体验不仅是指交互视觉，我的理解用户体验反映用户与产品从认知，使用到传播整个情感的连接和反馈。能力上包括了产品设计与功能实现，用户交互界面，以及系统承载能力。

 上图是 CUBI Mobel：CUBI UX - User Experience Model。完整地说明了用户体验从内容、商业目标、交互、用户目标四个方面组合。

@@ -39,7 +39,7 @@
 我试着列了几类

 1. 产品商业阶段性目标和最终目标。营收提高，优化结构，工程效率提高，质量提高，能力覆盖。
-2. 工程研发过程及能力。投入产出比，系统成本，系统稳定性，创新性？。
+2. 工程研发过程及能力。投入产出比，系统成本，系统稳定性，创新性。
 3. 用户可用性。满意度，过程效率，过程质量。

 ## 总结
@@ -2,7 +2,7 @@

 重回 “手写 SQL 编辑器” 系列。这次介绍如何利用缓存优化编译器执行性能。

-可以利用 **Frist 集** 与 **Match 节点缓存** 这两种方式优化。
+可以利用 **First 集** 与 **Match 节点缓存** 这两种方式优化。

 本文会用到一些图做解释，下面介绍图形规则：

@@ -44,7 +44,7 @@ Match 节点缓存，指在运行时，缓存节点到其第一个终结符的

 拿 `select a, b, c, d from e` 这个语句做测试：

-| node 节点访问次数 | Frist 集优化 | First 集 + Match 节点缓存优化 |
+| node 节点访问次数 | First 集优化 | First 集 + Match 节点缓存优化 |
 | ----------------- | ------------ | ----------------------------- |
 | 784               | 669          | 652                           |

@@ -264,7 +264,7 @@ function App() {
 }
 ```

-可以看到将细碎的代码片段结合成了一个完整的代码块，更维护。
+可以看到将细碎的代码片段结合成了一个完整的代码块，更易维护。

 现在介绍了 `useState` `useContext` `useEffect` `useRef` 等常用 hooks，更多可以查阅：[内置 Hooks](https://reactjs.org/docs/hooks-reference.html)，相信不久的未来，这些 API 又会成为一套新的前端规范。

@@ -57,7 +57,7 @@ interface VDom {
  props: {
    [attrKey: string]: string;
  };
-  chindren: VDom[];
+  children: VDom[];
 }
 ```

@@ -149,9 +149,9 @@ Fiber 利用分片的思想，把一个耗时长的任务分成很多小片，
 因此，在组件更新时有可能一个更新任务还没有完成，就被另一个更高优先级的更新过程打断，优先级高的更新任务会优先处理完，而低优先级更新任务所做的工作则会完全作废，然后等待机会重头再来。所以 React Fiber 把一个更新过程分为两个阶段：

 - 第一个阶段 Reconciliation Phase，Fiber 会找出需要更新的 DOM，这个阶段是可以被打断的；
- 第二个阶段 Commit Phase，是无法别打断，完成 DOM 的更新并展示；
+- 第二个阶段 Commit Phase，是无法被打断的，完成 DOM 的更新并展示；

-在使用 Fiber 后，需要要检查与第一阶段相关的生命周期函数，避免逻辑的多次或重复调用：
+在使用 Fiber 后，需要检查与第一阶段相关的生命周期函数，避免逻辑的多次或重复调用：

 - componentWillMount
 - componentWillReceiveProps
@@ -504,7 +504,7 @@ export default {

 ## 2.13. Field

-与 Value 组件唯一的区别，就是
+与 Value 组件唯一的区别，就是支持了 `bind`。

 ### 用法

@@ -422,7 +422,7 @@ function Article({ id }) {
    return () => {
      didCancel = true;
    };
-  }, [fetchArticle]);
+  }, [API.fetchArticle]);

  // ...
 }
@@ -101,8 +101,8 @@ function SearchResults({ query }) {
  const [data, setData] = useState(null);
  const [currentPage, setCurrentPage] = useState(0);

-  const fetchResults = useCallback(() => {
-    return "http://myapi/results?query" + query + "&page=" + currentPage;
+  const getFetchUrl = useCallback(() => {
+    return "http://myapi/results?query=" + query + "&page=" + currentPage;
  }, [currentPage, query]);

  useEffect(() => {
@@ -114,7 +114,7 @@ function SearchResults({ query }) {
 }
 ```

-Function Component 对 `props` 与 `state` 的数据都一视同仁，且可以将取数逻辑与 “更新判断” 通过 `useCallback` 完全封装在一个函数内，再将这个函数作为整体依赖项添加到 `useEffect`，如果未来再新增一个参数，只要修改 `fetchResults` 这个函数即可，而且还可以通过 `eslint-plugin-react-hooks` 插件静态分析是否遗漏了依赖项。
+Function Component 对 `props` 与 `state` 的数据都一视同仁，且可以将取数逻辑与 “更新判断” 通过 `useCallback` 完全封装在一个函数内，再将这个函数作为整体依赖项添加到 `useEffect`，如果未来再新增一个参数，只要修改 `getFetchUrl` 这个函数即可，而且还可以通过 `eslint-plugin-react-hooks` 插件静态分析是否遗漏了依赖项。

 Function Component 不但将依赖项聚合起来，还解决了 Class Component 分散在多处生命周期的函数判断，引发的无法静态分析依赖的问题。

@@ -409,7 +409,7 @@ const App = memo(function App() {
  const [state, dispatch] = useReducer(appReducer, new State())

  return (
-    <AppDispatch.Provider value={dispaych}>
+    <AppDispatch.Provider value={dispatch}>
      <Count count={count}/>
      <Name name={name}/>
    </AppDispatch.Provider>
@@ -0,0 +1,174 @@
+# 1. 引言
+
+[react-easy-state](https://github.com/solkimicreb/react-easy-state) 是个比较有趣的库，利用 Proxy 创建了一个非常易用的全局数据流管理方式。
+
+```jsx
+import React from "react";
+import { store, view } from "react-easy-state";
+
+const counter = store({ num: 0 });
+const increment = () => counter.num++;
+
+export default view(() => <button onClick={increment}>{counter.num}</button>);
+```
+
+上手非常轻松，通过 `store` 创建一个数据对象，这个对象被任何 React 组件使用时，都会自动建立双向绑定，**任何对这个对象的修改，都会让使用了这个对象的组件重渲染。**
+
+当然，为了实现这一点，需要对所有组件包裹一层 `view`。
+
+# 2. 精读
+
+这个库利用了 [nx-js/observer-util](https://github.com/nx-js/observer-util) 做 Reaction 基础 API，其他核心功能分别是 `store` `view` `batch`，所以我们就从这四个点进行解读。
+
+## Reaction
+
+这个单词名叫 “反应”，是实现双向绑定库的最基本功能单元。
+
+拥有最基本的两个单词和一个概念：`observable` `observe` 与自动触发执行的特性。
+
+```js
+import { observable, observe } from "@nx-js/observer-util";
+
+const counter = observable({ num: 0 });
+const countLogger = observe(() => console.log(counter.num));
+
+// 会自动触发 countLogger 函数内回调函数的执行。
+counter.num++;
+```
+
+在第 35 期精读 [精读《dob - 框架实现》](https://github.com/dt-fe/weekly/blob/master/35.%E7%B2%BE%E8%AF%BB%E3%80%8Adob%20-%20%E6%A1%86%E6%9E%B6%E5%AE%9E%E7%8E%B0%E3%80%8B.md#%E6%8A%BD%E4%B8%9D%E5%89%A5%E8%8C%A7%E5%AE%9E%E7%8E%B0%E4%BE%9D%E8%B5%96%E8%BF%BD%E8%B8%AA) “抽丝剥茧，实现依赖追踪” 一节中有详细介绍实现原理，这里就不赘述了。
+
+有了一个具有反应特性的函数，与一个可以 “触发反应” 的对象，那么实现双向绑定更新 View 就不远了。
+
+## store
+
+react-easy-state 的 `store` 就是 `observable(obj)` 包装一下，唯一不同是，由于支持本地数据：
+
+```js
+import React from 'react'
+import { view, store } from 'react-easy-state'
+
+export default view(() => {
+  const counter = store({ num: 0 })
+  const increment = () => counter.num++
+  return <button={increment}>{counter.num}</div>
+})
+```
+
+所以当监测到在 React 组件内部创建 `store` 且是 Hooks 环境时，会返回：
+
+```js
+return useMemo(() => observable(obj), []);
+```
+
+这是因为 React Hooks 场景下的 Function Component 每次渲染都会重新创建 Store，会导致死循环。因此利用 `useMemo` 并将依赖置为 `[]` 使代码在所有渲染周期内，只在初始化执行一次。
+
+> 更多 Hooks 深入解读，可以阅读 [精读《useEffect 完全指南》](https://github.com/dt-fe/weekly/blob/master/96.%E7%B2%BE%E8%AF%BB%E3%80%8AuseEffect%20%E5%AE%8C%E5%85%A8%E6%8C%87%E5%8D%97%E3%80%8B.md)。
+
+## view
+
+根据 Function Component 与 Class Component 的不同，分别进行两种处理，本文主要介绍对 Function Component 的处理方式，因为笔者推荐使用 Function Component 风格。
+
+首先最外层会套上 `memo`，这类似 `PureComponent` 的效果：
+
+```js
+return memo(/**/);
+```
+
+然后构造一个 `forceUpdate` 用来强制渲染组件：
+
+```js
+const [, forceUpdate] = useState();
+```
+
+之后，只要利用 `observe` 包裹组件即可，需要注意两点：
+
+1. **使用刚才创建的 `forceUpdate` 在 `store` 修改时调用。**
+2. `observe` 初始化不要执行，因为初始化组件自己会渲染一次，再渲染一次就会造成浪费。
+
+所以作者通过 `scheduler` `lazy` 两个参数完成了这两件事：
+
+```js
+const render = useMemo(
+  () =>
+    observe(Comp, {
+      scheduler: () => setState({}),
+      lazy: true
+    }),
+  []
+);
+
+return render;
+```
+
+最后别忘了在组件销毁时取消监听：
+
+```js
+useEffect(() => {
+  return () => unobserve(render);
+}, []);
+```
+
+## batch
+
+这也是双向绑定数据流必须解决的经典问题，批量更新合并。
+
+由于修改对象就触发渲染，**这个过程太自动化了，以至于我们都没有机会告诉工具，连续的几次修改能否合并起来只触发一次渲染。** 尤其是 For 循环修改变量时，如果不能合并更新，在某些场景下代码几乎是不可用的。
+
+所以 `batch` 就是为解决这个问题诞生的，让我们有机会控制合并更新的时机：
+
+```js
+import React from "react";
+import { view, store, batch } from "react-easy-state";
+
+const user = store({ name: "Bob", age: 30 });
+
+function mutateUser() {
+  // this makes sure the state changes will cause maximum one re-render,
+  // no matter where this function is getting invoked from
+  batch(() => {
+    user.name = "Ann";
+    user.age = 32;
+  });
+}
+
+export default view(() => (
+  <div>
+    name: {user.name}, age: {user.age}
+  </div>
+));
+```
+
+`react-easy-state` 通过 `scheduler` 模块完成 `batch` 功能，核心代码只有五行：
+
+```js
+export function batch(fn, ctx, args) {
+  let result;
+  unstable_batchedUpdates(() => (result = fn.apply(ctx, args)));
+  return result;
+}
+```
+
+利用 `unstable_batchedUpdates`，可以保证在其内执行的函数都不会触发更新，也就是之前创建的 `forceUpdate` 虽然被调用，但是失效了，等回调执行完毕时再一起批量更新。
+
+同时代码里还对 `setTimeout` `setInterval` `addEventListener` `WebSocket` 等公共方法进行了 `batch` 包装，让这些回调函数中自带 `batch` 效果。
+
+# 4. 总结
+
+好了，`react-easy-state` 神奇的效果解释完了，希望大家在使用第三方库的时候都能理解背后的原理。
+
+> PS：最后，笔者目前不推荐在 Function Component 模式下使用任何三方数据流库，因为官方功能已经足够好用了！
+
+> 讨论地址是：[精读《react-easy-state》 · Issue #144 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/144)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+**special Sponsors**
+
+- [DevOps 全流程平台](https://e.coding.net/?utm_source=weekly)
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,204 @@
+# 1. 引言
+
+这次介绍的文章是 [scheduling-in-react](https://philippspiess.com/scheduling-in-react/)，简单来说就是 React 的调度系统，为了得到更顺滑的用户体验。
+
+毕竟前端做到最后，都是体验优化，前端带给用户的价值核心就在于此。
+
+# 2. 概述
+
+文章从 Dan 在 [JSConf](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html) 提到的 Demo 说起：
+
+![](https://img.alicdn.com/tfs/TB1q4DhQIfpK1RjSZFOXXa6nFXa-663-405.gif)
+
+这是一个测试性能的 Demo，随着输入框字符的增加，下方图表展示的数据量会急速提升。在 Synchronous 与 Debounced 模式下的效果都不尽如人意，只有 Concurrent 模式下看起来是顺畅的。
+
+那么为什么普通的 Demo 会很卡呢？
+
+这就涉及到浏览器 Event Loop 规则了。
+
+JS 是单线程的，浏览器同一时间只能做一件事情，而肉眼能识别的刷新频率在 60FPS 左右，这意味着我们需要在 16ms 之内完成 Demo 中的三件事：响应用户输入，做动画，Dom 渲染。
+
+然而目前几乎所有框架都使用同步渲染模式，这意味着如果一个渲染函数执行时间超过了 16ms，则不可避免的发生卡顿。
+
+总结一下有两个主要问题：
+
+1. 长时间运行的任务造成页面卡顿，我们需要保证所有任务能在几毫秒内完成，这样才能保证页面的流畅。
+2. 不同任务优先级不同，比如响应用户输入的任务优先级就高于动画。这个很好理解。
+
+## React 调度机制
+
+为了解决这个问题，React16 通过 Concurrent（并行渲染） 与 Scheduler（调度）两个角度解决问题：
+
+- **Concurrent：** 将同步的渲染变成可拆解为多步的异步渲染，这样可以将超过 16ms 的渲染代码分几次执行。
+- **Scheduler：** 调度系统，支持不同渲染优先级，对 Concurrent 进行调度。当然，调度系统对低优先级任务会不断提高优先级，所以不会出现低优先级任务总得不到执行的情况。
+
+为了保证不产生阻塞的感觉，调度系统会将所有待执行的回调函数存在一份清单中，在每次浏览器渲染时间分片间尽可能的执行，并将没有执行完的内容 Hold 住留到下个分片处理。
+
+Concurrent 的正式 API 会在 2019 Q2 发布，现在可以通过 `<React.unstable_ConcurrentMode>` API 方式调用：
+
+```jsx
+ReactDOM.render(
+  <React.unstable_ConcurrentMode>
+    <App />
+  </React.unstable_ConcurrentMode>,
+  rootElement
+);
+```
+
+只申明这个是不够的，因为我们还没有申明各函数执行的优先级。我们可以通过 `npm i scheduler` 包来申明函数的优先级：
+
+```jsx
+import { unstable_next } from "scheduler";
+
+function SearchBox(props) {
+  const [inputValue, setInputValue] = React.useState();
+
+  function handleChange(event) {
+    const value = event.target.value;
+
+    setInputValue(value);
+    unstable_next(function() {
+      props.onChange(value);
+      sendAnalyticsNotification(value);
+    });
+  }
+
+  return <input type="text" value={inputValue} onChange={handleChange} />;
+}
+```
+
+在 `unstable_next()` 作用域下的代码优先级是 `Normal`，那么产生的效果是：
+
+1. 如果 `props.onChange(value)` 可以在 16ms 内执行完，则与不使用 `unstable_next` 没有区别。
+2. 如果 `props.onChange(value)` 的执行时间过长，可能这个函数会在下次几次的 Render 中陆续执行，不会阻塞后续的高优先级任务。
+
+## 调度带来的限制
+
+调度系统也存在两个问题。
+
+1. 调度系统只能有一个，如果同时存在两个调度系统，就无法保证调度正确性。
+2. 调度系统能力有限，只能在浏览器提供的能力范围内进行调度，而无法影响比如 Html 的渲染、回收周期。
+
+为了解决这个问题，Chrome 正在与 React、Polymer、Ember、Google Maps、Web Standars Community 共同创建一个 [浏览器调度规范](https://github.com/WICG/main-thread-scheduling)，提供浏览器级别 API，可以让调度控制更底层的渲染时机，也保证调度器的唯一性。
+
+# 3. 精读
+
+关于 React 调度系统的剖析，可以读 [深入剖析 React Concurrent](https://zhuanlan.zhihu.com/p/60307571) 这篇文章，感谢我们团队的 淡苍 提供。
+
+简单来说，一次 Render 一般涉及到许多子节点，而 Fiber 架构在 Render 阶段可以暂停，一个一个节点的执行，从而实现了调度的能力。
+
+## React 调度能力的限制
+
+> 这意味着，如果你的 React 应用目前是流畅的，开启 Concurrent 并不会对你的应用带来性能体验上的提升，如果你的 React 应用目前是卡顿的，或者在某些场景下是卡顿的，那么 Concurrent 或许可以挽救你一下，带来一些改变。
+
+正如《深入剖析 React Concurrent》一文提到的，如果你的应用没有性能问题，就不要指望 React 调度能力有所帮助了。
+
+这也是在说，如果一段代码逻辑不存在性能问题，就不需要使用 Concurrent 优化，因为这种优化是无效的。我们需要能分辨哪些逻辑需要优化，哪些逻辑不要。
+
+## 从现在开始尝试 Function Component
+
+为了配合 React Schedule 的实现，学会使用 Function Component 模式编写组件是很重要的，因为：
+
+1. Class Component 的生命周期概念阻碍了 React 调度系统对任务的拆分。
+2. 调度系统可能对 `componentWillMount` 重复调用，使得 Class Component 模式下很容易写出错误的代码。
+3. Function Component 遵循了更严格的副作用分离，这使得 Concurrent 执行过程不会引发意外效果。
+
+## React.lazy
+
+与 Concurrent 一起发布的，还有 React 组件动态 import 与载入方案。正常的组件载入是这样的：
+
+```jsx
+import OtherComponent from "./OtherComponent";
+
+function MyComponent() {
+  return (
+    <div>
+      <OtherComponent />
+    </div>
+  );
+}
+```
+
+但如果使用了 `import()` 动态载入，可以使用 `React.lazy` 让动态引入的组件像普通组件一样被使用：
+
+```jsx
+const OtherComponent = React.lazy(() => import("./OtherComponent"));
+
+function MyComponent() {
+  return (
+    <div>
+      <OtherComponent />
+    </div>
+  );
+}
+```
+
+如果要加入 Loading，就可以配合 `Suspense` 一起使用：
+
+```jsx
+import React, { lazy, Suspense } from "react";
+const OtherComponent = lazy(() => import("./OtherComponent"));
+
+function MyComponent() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <OtherComponent />
+    </Suspense>
+  );
+}
+```
+
+和 Concurrent 类似，React.lazy 方案也是一种对性能有益的组件加载方案。
+
+## 调度分类
+
+调度分 4 个等级：
+
+- **Immediate**：立即执行，最高优先级。
+- **render-blocking**：会阻塞渲染的优先级，优先级类似 `requestAnimationFrame`。如果这种优先级任务不能被执行，就可能导致 UI 渲染被 block。
+- **default**：默认优先级，普通的优先级。优先级可以理解为 `setTimeout(0)` 的优先级。
+- **idle**：比如通知等任务，用户看不到或者不在意的。
+
+目前建议的 API 类似如下：
+
+```js
+function mytask() {
+  ...
+}
+
+myQueue = TaskQueue.default("render-blocking")
+```
+
+先创建一个执行队列，并设置队列的优先级。
+
+```js
+taskId = myQueue.postTask(myTask, <list of args>);
+```
+
+再提交队列，拿到当前队列的执行 id，通过这个 id 可以判断队列何时执行完毕。
+
+```js
+myQueue.cancelTask(taskId);
+```
+
+必要的时候可以取消某个函数的执行。
+
+# 4. 总结
+
+随着 Hooks 的发布，即将到来的 Concurrent 与 Suspense 你是否准备好了呢？
+
+笔者希望大家一起思考，这三种 API 会给前端开发带来什么样的改变？欢迎留言！
+
+> 讨论地址是：[精读《Scheduling in React》 · Issue #146 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/146)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+**special Sponsors**
+
+- [DevOps 全流程平台](https://e.coding.net/?utm_source=weekly)
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,201 @@
+# 1. 引言
+
+本周精读的文章是 [V8 引擎 Lazy Parsing](https://v8.dev/blog/preparser)，看看 V8 引擎为了优化性能，做了怎样的尝试吧！
+
+这篇文章介绍的优化技术叫 [preparser](https://cs.chromium.org/chromium/src/v8/src/parsing/preparser.h?l=921&rcl=e3b2feb3aade83c02e4bd2fa46965a69215cd821)，是通过跳过不必要函数编译的方式优化性能。
+
+# 2. 概述 & 精读
+
+解析 Js 发生在网页运行的关键路径上，因此加速对 JS 的解析，就可以加速网页运行效率。
+
+然而并不是所有 Js 都需要在初始化时就被执行，因此也不需要在初始化时就解析所有的 Js！因为编译 Js 会带来三个成本问题：
+
+1. 编译不必要的代码会占用 CPU 资源。
+2. 在 GC 前会占用不必要的内存空间。
+3. 编译后的代码会缓存在磁盘，占用磁盘空间。
+
+因此所有主流浏览器都实现了 Lazy Parsing（延迟解析），它会将不必要的函数进行预解析，也就是只解析出外部函数需要的内容，而全量解析在调用这个函数时才发生。
+
+## 预解析的挑战
+
+本来预解析也不难，因为只要判断一个函数是否会立即执行就可以了，只有立即执行的函数才需要被完全解析。
+
+使得预解析变复杂的是变量分配问题。原文通过了堆栈调用的例子说明原因：
+
+Js 代码的执行在堆栈上完成，比如下面这个函数：
+
+```js
+function f(a, b) {
+  const c = a + b;
+  return c;
+}
+
+function g() {
+  return f(1, 2);
+  // The return instruction pointer of `f` now points here
+  // (because when `f` `return`s, it returns here).
+}
+```
+
+这段函数的调用堆栈如下：
+
+<img width=200 src="https://img.alicdn.com/tfs/TB1gNCsRVYqK1RjSZLeXXbXppXa-173-333.svg">
+
+首先是全局 This `globalThis`，然后执行到函数 `f`，再对 `a` `b` 进行赋值。在执行 `f` 函数时，通过 `<rip g>`(return instruction pointer) 保存 g 堆栈状态，再保存堆栈跳出后返回位置的指针 `<save fp>`(frame pointer)，最后对变量 `c` 赋值。
+
+这看上去没有问题，只要将值存在堆栈就搞定了。但是将变量定义到函数内部就不一样了：
+
+```js
+function make_f(d) {
+  // ← declaration of `d`
+  return function inner(a, b) {
+    const c = a + b + d; // ← reference to `d`
+    return c;
+  };
+}
+
+const f = make_f(10);
+
+function g() {
+  return f(1, 2);
+}
+```
+
+将变量 `d` 申明在函数 `make_f` 中，且在返回函数 `inner` 中用到了 `d`。那么函数的调用栈就变成了这样：
+
+<img width=500 src="https://img.alicdn.com/tfs/TB1HiuGR4YaK1RjSZFnXXa80pXa-428-292.svg">
+
+需要创建一个 `context` 存储函数 `f` 中变量 `d` 的值。
+
+也就是说，如果一个在函数内部定义的变量被子 Scope 使用时，Js 引擎需要识别这种情况，并将这个变量值存储在 `context` 中。
+
+所以对于函数定义的每一个入参，我们需要知道其是否会被子函数引用。**也就是说，在 `preparser` 阶段，我们只要少能分析出哪些变量被内部函数引用了。**
+
+## 难以分辨的引用
+
+预处理器中跟踪变量的申明与引用很复杂，因为 Js 的语法导致了无法从部分表达式推断含义，比如下面的函数：
+
+```js
+function f(d) {
+  function g() {
+    const a = ({ d }
+```
+
+我们不清楚第三行的 `d` 到底是不是指代第一行的 `d`。它可能是：
+
+```js
+function f(d) {
+  function g() {
+    const a = ({ d } = { d: 42 });
+    return a;
+  }
+  return g;
+}
+```
+
+也可能只是一个自定义函数参数，与上面的 `d` 无关：
+
+```js
+function f(d) {
+  function g() {
+    const a = ({ d }) => d;
+    return a;
+  }
+
+  return [d, g];
+}
+```
+
+## 惰性 parse
+
+在执行函数时，只会将最外层执行的函数完全编译并生成 AST，而对内部模块只进行 `preparser`。
+
+```js
+// This is the top-level scope.
+function outer() {
+  // preparsed
+  function inner() {
+    // preparsed
+  }
+}
+
+outer(); // Fully parses and compiles `outer`, but not `inner`.
+```
+
+为了允许惰性编译函数，上下文指针指向了 [ScopeInfo](https://cs.chromium.org/chromium/src/v8/src/objects/scope-info.h?rcl=ce2242080787636827dd629ed5ee4e11a4368b9e&l=36) 的对象（从代码中可以看到，ScopeInfo 包含上下文信息，比如当前上下文是否有函数名，是否在一个函数内等等），当编译内部函数时，可以利用 ScopeInfo 继续编译子函数。
+
+但是为了判断惰性编译函数自身是否需要一个上下文，我们需要再次解析内部的函数：比如我们需要知道某个子函数是否对外层函数定义的变量有所引用。
+
+这样就会产生递归遍历：
+
+<img width=800 src="https://img.alicdn.com/tfs/TB1uCOPR7voK1RjSZFwXXciCFXa-960-540.svg">
+
+由于代码总会包含一些嵌套，而编译工具更会产生 IIFE(立即调用函数) 这种多层嵌套的表达式，使得递归性能比较差。
+
+而下面有一种办法可以将时间复杂度简化为线性：将变量分配的位置序列化为一个密集的数组，当惰性解析函数时，变量会按照原先的顺序重新创建，这样就不需要因为子函数可能引用外层定义变量的原因，对所有子函数进行递归惰性解析了。
+
+按照这种方式优化后的时间复杂度是线性的：
+
+<img width=800 src="https://img.alicdn.com/tfs/TB1VS5LR7voK1RjSZFNXXcxMVXa-960-540.svg">
+
+## 针对模块化打包的优化
+
+由于现代代码几乎都是模块化编写的，构建起在打包时会将模块化代码封装在 IIFE（立即调用的闭包）中，以保证模拟模块化环境运行。比如 `(function(){....})()`。
+
+这些代码看似在函数中应该惰性编译，但其实这些模块化代码从一开始就要被编译，否则反而会影响性能，因此 V8 有两种机制识别这些可能被立即调用的函数：
+
+1. 如果函数是带括号的，比如 `(function(){...})`，就假设它会被立即调用。
+2. 从 V8 v5.7 / Chrome 57 开始，还会识别 uglifyJS 的 `!function(){...}(), function(){...}(), function(){...}()` 这种模式。
+
+然而在浏览器引擎解析环境比较复杂，很难对函数进行完整字符串匹配，因此只能对函数头进行简单判断。所以对于下面这种匿名函数的行为，浏览器是不识别的：
+
+```js
+// pre-parser
+function run(func) {
+  func()
+}
+
+run(function(){}) // 在这执行它，进行 full parser
+```
+
+上面的代码看上去没毛病，但由于浏览器只检测被括号括住的函数，因此这个函数不被认为是立即执行函数，因此在后续执行时会被重复 full-parse。
+
+也有一些代码辅助转换工具帮助 V8 正确识别，比如 [optimize-js](https://github.com/nolanlawson/optimize-js)，会将代码做如下转换。
+
+转换前：
+
+```js
+!function (){}()
+function runIt(fun){ fun() }
+runIt(function (){})
+```
+
+转换后：
+
+```js
+!(function (){})()
+function runIt(fun){ fun() }
+runIt((function (){}))
+```
+
+然而在 V8 v7.5+ 已经很大程度解决了这个问题，因此现在其实不需要使用 [optimize-js](https://github.com/nolanlawson/optimize-js) 这种库了～
+
+# 4. 总结
+
+JS 解析引擎在性能优化做了不少工作，但同时也要应对代码编译器产生的特殊 IIFE 闭包，防止对这种立即执行闭包进行重复 parser。
+
+最后，不要试图总是将函数用括号括起来，因为这样会导致惰性编译的特性无法启用。
+
+> 讨论地址是：[精读《V8 引擎 Lazy Parsing》 · Issue #148 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/148)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+**special Sponsors**
+
+- [DevOps 全流程平台](https://e.coding.net/?utm_source=weekly)
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
ascoders	b9d95182a1	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2019-08-12 08:17:19 +08:00
ascoders	bfa3ab7b55	115	2019-08-12 08:17:13 +08:00
黄子毅	304e4d3aa3	Merge pull request #190 from vivaxy/patch-1 Update 092.精读《React PowerPlug 源码》.md	2019-08-05 14:30:23 +08:00
ascoders	62be743112	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2019-08-05 09:11:22 +08:00
ascoders	6d27e723cd	update 114	2019-08-05 09:11:20 +08:00
vivaxy	704c9cda9e	Update 092.精读《React PowerPlug 源码》.md 补全句子	2019-08-05 09:00:49 +08:00
黄子毅	44dd8057e2	Merge pull request #188 from xuhongbo/patch-5 Update 039.精读《全链路体验浏览器挖矿》.md	2019-07-29 22:54:20 +08:00
leoxu	d956b15ad0	Update 039.精读《全链路体验浏览器挖矿》.md fix type	2019-07-29 20:13:54 +08:00
黄子毅	961d77b4d1	Merge pull request #186 from xuhongbo/patch-3 Update 113.精读《Nodejs V12》.md	2019-07-29 13:23:28 +08:00
黄子毅	c763fc15bd	Merge pull request #187 from xuhongbo/patch-4 Update 068.精读衡量用户体验.md	2019-07-29 13:23:16 +08:00
leoxu	f9f04d711f	Update 068.精读衡量用户体验.md 修改一些用词错误	2019-07-29 11:20:01 +08:00
leoxu	5d40208d45	Update 113.精读《Nodejs V12》.md 不是很通顺	2019-07-29 11:03:00 +08:00
ascoders	771bb9f914	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2019-07-29 08:56:57 +08:00
ascoders	96f850e29f	113	2019-07-29 08:53:44 +08:00
黄子毅	349e7df2b6	Merge pull request #185 from LiuL0703/patch-2 fix:typo	2019-07-27 22:16:19 +08:00
Linear-Enter	b198d57cf6	fix:typo	2019-07-27 10:17:15 +08:00
黄子毅	03b8840291	Merge pull request #181 from cpprookie/cpprookie-patch-1 Update 112.精读《源码学习》.md	2019-07-23 09:45:31 +08:00
黄子毅	60899c0bf8	Merge pull request #183 from lengjing/patch-1 Update 082.精读《Htm - Hyperscript 源码》.md	2019-07-23 09:45:20 +08:00
lengjing	648e113e66	Update 082.精读《Htm - Hyperscript 源码》.md	2019-07-22 11:08:32 +08:00
chen tuo	61a5e74908	Update 112.精读《源码学习》.md 修改文字错误	2019-07-22 10:29:10 +08:00
ascoders	d2273e72f6	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2019-07-22 09:58:20 +08:00
ascoders	386b605c32	finish 112	2019-07-22 09:19:57 +08:00
黄子毅	b60cca25d7	Merge pull request #180 from LiuL0703/patch-1 fix:typo	2019-07-21 23:43:19 +08:00
Linear-Enter	68e6c23f82	fix:typo	2019-07-21 19:12:01 +08:00
ascoders	a9d2c1d47a	111	2019-07-16 08:54:37 +08:00
ascoders	cc364c4b2f	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2019-07-08 12:15:52 +08:00
ascoders	f65b11ea6b	110	2019-07-08 12:15:47 +08:00
黄子毅	35458365c6	Merge pull request #174 from Kerminate/v2 fix: vue 与 Mutable 相结合	2019-07-01 10:18:52 +08:00
Kerminate	dde997ac27	fix: vue 与 Mutable 相结合	2019-07-01 10:10:44 +08:00
ascoders	53ae9e077e	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2019-07-01 08:37:28 +08:00
ascoders	30bdcf13dd	109	2019-07-01 08:37:25 +08:00
黄子毅	12b1b02539	Merge pull request #170 from vivaxy/patch-1 Update 078.精读《手写 SQL 编译器 - 性能优化之缓存》.md	2019-06-25 22:24:53 +08:00
黄子毅	2a92487a5e	Merge pull request #171 from vivaxy/patch-2 Update 064.精读《手写 SQL 编译器 - 词法分析》.md	2019-06-25 22:24:40 +08:00
ascoders	b6487f8754	fix bug	2019-06-25 22:24:19 +08:00
vivaxy	7a8e1b25dd	Update 064.精读《手写 SQL 编译器 - 词法分析》.md Fix syntax.	2019-06-25 14:53:07 +08:00
vivaxy	44683fa1dc	Update 078.精读《手写 SQL 编译器 - 性能优化之缓存》.md	2019-06-25 09:16:11 +08:00
ascoders	3a4b82bc76	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2019-06-24 09:06:59 +08:00
ascoders	4f2ed7b3cb	update	2019-06-24 09:06:55 +08:00
黄子毅	a72795b099	Merge pull request #168 from eos3tion/patch-1 Update 107.精读《Optional chaining》.md	2019-06-18 10:01:18 +08:00
ascoders	dea2acc384	Merge branches 'v2' and 'v2' of https://github.com/dt-fe/weekly into v2	2019-06-17 10:46:28 +08:00
ascoders	74f539cc34	fix typo error	2019-06-17 10:44:18 +08:00
程方	1947b9c08c	Update 107.精读《Optional chaining》.md 修正`.?`为`?.`	2019-06-17 10:34:16 +08:00
黄子毅	e84c85cc1d	Merge pull request #167 from think2011/patch-2 Update 029.精读《JS 中的内存管理》.md	2019-06-17 09:27:00 +08:00
ascoders	170c0f4525	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2019-06-17 09:23:37 +08:00
ascoders	c836848228	107	2019-06-17 09:23:32 +08:00
曾浩	7b87d5c3c4	Update 029.精读《JS 中的内存管理》.md	2019-06-16 20:27:28 +08:00
黄子毅	add5bdd01e	Merge pull request #166 from think2011/patch-1 Update 019.精读《最佳前端面试题》及面试官技巧.md	2019-06-14 14:27:15 +08:00
曾浩	0633764a44	Update 019.精读《最佳前端面试题》及面试官技巧.md	2019-06-14 13:47:36 +08:00
黄子毅	fcc183d523	Update 103.精读《为什么专家不再关心技术细节》.md	2019-06-11 10:46:30 +08:00
ascoders	627db8a249	update	2019-06-10 09:01:29 +08:00
ascoders	b41530b37c	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2019-06-10 09:01:06 +08:00
ascoders	2062b652dd	106	2019-06-10 09:00:27 +08:00
黄子毅	365997863e	Merge pull request #161 from xuhongbo/patch-1 Update 105.精读《What's new in javascript》.md	2019-06-03 14:57:32 +08:00
黄子毅	ab6978da4a	Merge pull request #160 from Kerminate/v2 fix: 对大数描述的修正	2019-06-03 10:39:31 +08:00
leoxu	f37d496f1b	Update 105.精读《What's new in javascript》.md 缺少 `=`	2019-06-03 10:33:07 +08:00
Kerminate	3bf34602b4	fix: 对大数描述的修正	2019-06-03 10:20:54 +08:00
ascoders	274ffc0a9f	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2019-06-03 09:19:56 +08:00
ascoders	72e8b69dd7	104	2019-06-03 09:19:47 +08:00
黄子毅	62ac1d76b9	Merge pull request #158 from xuhongbo/patch-1 Update 101.精读《持续集成 vs 持续交付 vs 持续部署》.md	2019-05-27 14:06:12 +08:00
leoxu	e537efe7bd	Update 101.精读《持续集成 vs 持续交付 vs 持续部署》.md 格式问题，没有换行，导致读者会有疑惑，并不能直观的看到产出	2019-05-27 11:27:10 +08:00
ascoders	f1871f59e5	fix	2019-05-27 10:13:26 +08:00
ascoders	5d08eabde3	104	2019-05-27 08:56:59 +08:00
黄子毅	7e79c60a12	Merge pull request #156 from xuhongbo/patch-1 Update 103.精读《为什么专家不再关心技术细节》.md	2019-05-20 16:46:47 +08:00
leoxu	9c051f6ab5	Update 103.精读《为什么专家不再关心技术细节》.md 原理 -> 远离	2019-05-20 14:32:57 +08:00
ascoders	065fab1546	fix	2019-05-20 14:07:20 +08:00
ascoders	88cd38685d	103	2019-05-20 09:39:06 +08:00
黄子毅	7de3c77c3b	Merge pull request #154 from dancerphil/master fix: sort by file name #152	2019-05-17 13:34:31 +08:00
Cong Zhang	09978602c0	fix: sort by file name #152	2019-05-17 10:54:09 +08:00
ascoders	fcb42f2dcf	102	2019-05-13 09:00:22 +08:00
ascoders	0ef3cf16a9	format	2019-05-12 12:32:05 +08:00
黄子毅	baf666dbf8	Merge pull request #150 from huxiaoyun/master feat: 101	2019-04-29 11:47:04 +08:00
ludy.hxy	74f1884f78	feat: 101	2019-04-29 11:19:37 +08:00
黄子毅	4f815df5ab	Merge pull request #149 from Kerminate/master fix: 引用正确的函数名	2019-04-23 09:44:09 +08:00
Kerminate	35a8ee0a9e	fix: 引用正确的函数名	2019-04-23 09:29:01 +08:00
ascoders	37fbb981d4	100	2019-04-22 19:05:11 +08:00
ascoders	1cd6722352	Merge branch 'master' of https://github.com/dt-fe/weekly	2019-04-15 09:01:42 +08:00
ascoders	e14a9e8f9b	finish 99	2019-04-15 09:00:17 +08:00
黄子毅	f3e2892982	Merge pull request #145 from kaiye/patch-1 Update 97.精读《编写有弹性的组件》.md	2019-04-09 19:52:56 +08:00
kaiye	bd8c58a938	Update 97.精读《编写有弹性的组件》.md fix typo	2019-04-09 16:52:40 +08:00
ascoders	806e2e1419	Merge branch 'master' of https://github.com/dt-fe/weekly	2019-04-08 08:50:25 +08:00
ascoders	8f9ace0396	98.	2019-04-08 08:50:12 +08:00
黄子毅	40ab3468d0	Merge pull request #143 from 07akioni/patch-2 Update 79.精读《React Hooks》.md	2019-04-01 09:12:44 +08:00
07akioni	0cee0db46d	Update 79.精读《React Hooks》.md	2019-03-31 23:13:47 +08:00