25/07/19

Author: WindRunnerMax

Browser/基于fetch的SSE方案.md

@@ -507,20 +507,16 @@ useEffect(() => {
 
 ## 每日一题
 
-```
-https://github.com/WindrunnerMax/EveryDay
-```
+- <https://github.com/WindRunnerMax/EveryDay>
 
 ## 参考
 
-```
-https://github.com/EventSource/eventsource
-https://github.com/Azure/fetch-event-source
-https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource
-https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html
-https://nodejs.org/docs/latest-v20.x/api/http.html#messagesocket
-https://html.spec.whatwg.org/multipage/server-sent-events.html#parsing-an-event-stream
-https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events
-https://stackoverflow.com/questions/7348736/how-to-check-if-connection-was-aborted-in-node-js-server
-https://stackoverflow.com/questions/76115409/why-does-node-js-express-call-request-close-on-post-request-with-data-before-r
-```
+- <https://github.com/EventSource/eventsource>
+- <https://github.com/Azure/fetch-event-source>
+- <https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource>
+- <https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html>
+- <https://nodejs.org/docs/latest-v20.x/api/http.html#messagesocket>
+- <https://html.spec.whatwg.org/multipage/server-sent-events.html#parsing-an-event-stream>
+- <https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events>
+- <https://stackoverflow.com/questions/7348736/how-to-check-if-connection-was-aborted-in-node-js-server>
+- <https://stackoverflow.com/questions/76115409/why-does-node-js-express-call-request-close-on-post-request-with-data-before-r>

Environment/建立DNS隧道绕过校园网认证.md

@@ -115,7 +115,7 @@ Debug queue.c:300	Flushing outgoing data
 ```
 要注意的是无论是本地的终端还是服务器的终端都需要保持其运行才能继续正常使用，毕竟如果终端掉了进程结束了也就不存在封包解包的操作了，另外实际使用速度还是比较感人的，毕竟其有大量的封包拆包操作。
 
-## 最后
+## 总结
 最终还是没能成功实现想要的功能，最后使用`dnslog`探查了一下实际上是有`dns`查询的，还是需要研究一下究竟是什么阻拦策略导致没有完成隧道的建立。想来三级域名的`A`记录其实是可以携带一点信息的，即`abc.example.com`可以携带`abc`这个信息过去。此外还有一个终极大招，直接物理方案解决，毕竟`AP`可是在宿舍里边的。
 
 

JavaScript/Generator函数.md

@@ -8,7 +8,9 @@
 
 ## 实例
 使用`function*`声明方式会定义一个生成器函数`generator function`，它返回一个`Generator`对象，可以把它理解成，`Generator`函数是一个状态机，封装了多个内部状态，执行`Generator`函数会返回一个遍历器对象。  
+
 调用一个生成器函数并不会马上执行它里面的语句，而是返回一个这个生成器的迭代器`iterator `对象，他是一个指向内部状态对象的指针。当这个迭代器的`next()`方法被首次（后续）调用时，其内的语句会执行到第一个（后续）出现`yield`的位置为止，`yield`后紧跟迭代器要返回的值，也就是指针就会从函数头部或者上一次停下来的地方开始执行到下一个`yield`。或者如果用的是`yield*`，则表示将执行权移交给另一个生成器函数（当前生成器暂停执行）。  
+
 `next()`方法返回一个对象，这个对象包含两个属性：`value`和`done`，`value`属性表示本次`yield`表达式的返回值，`done`属性为布尔类型，表示生成器后续是否还有`yield`语句，即生成器函数是否已经执行完毕并返回。  
 
 ```javascript
@@ -24,6 +26,7 @@ console.log(g.next()); // {value: 21, done: false}
 console.log(g.next()); // {value: 31, done: true}
 console.log(g.next()); // {value: undefined, done: true} // 可以无限next()，但是value总为undefined，done总为true
 ```
+
 调用`next()`方法时，如果传入了参数，那么这个参数会传给上一条执行的`yield`语句左边的变量。
 
 ```javascript
@@ -41,6 +44,7 @@ console.log(g.next(50)); // {value: 51, done: false} // y被赋值为50
 console.log(g.next()); // {value: 31, done: true} // x,y 1,50
 console.log(g.next()); // {value: undefined, done: true}
 ```
+
 若显式指明`return`方法给定返回值，则返回该值并结束遍历`Generator`函数，若未显式指明`return`的值，则返回`undefined`
 
 ```javascript
@@ -56,8 +60,10 @@ console.log(g.next()); // {value: 21, done: false}
 console.log(g.next()); // {value: 31, done: false} // 注意此处的done为false
 console.log(g.next()); // {value: undefined, done: true}
 ```
+
 `yield*`表达式表示`yield`返回一个遍历器对象，用于在`Generator`函数内部，调用另一个 `Generator`函数。
 
+
 ```javascript
 function* callee() {
     yield 100;
@@ -93,6 +99,7 @@ function f(){
 function success(r1,r2,r3){
     console.log(r1,r2,r3); // 0.11931234806372775 0.3525336021860719 0.39753321774160844
 }
+
 // 成为线性任务而解决嵌套
 function* g(){ 
     var r1 = yield f();
@@ -108,29 +115,20 @@ it = g();
 it.next();
 ```
 
-### 整理
 
-```
-长轮询 https://www.cnblogs.com/wjyz/p/11102379.html
-延迟执行 无限序列 http://www.hubwiz.com/exchange/57fb046ce8424ba757b8206d
-斐波那契数列 https://www.liaoxuefeng.com/wiki/1022910821149312/1023024381818112
-迭代器 https://zhuanlan.zhihu.com/p/24729321?utm_source=tuicool&utm_medium=referral
-线性方式 https://blog.csdn.net/astonishqft/article/details/82782422?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
-```
 
 ## 每日一题
 
-```
-https://github.com/WindrunnerMax/EveryDay
-```
-
+- <https://github.com/WindrunnerMax/EveryDay>
 
 ## 参考
 
-```
-https://www.runoob.com/w3cnote/es6-generator.html
-https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function*
-https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator
-```
-
 
+- <https://www.cnblogs.com/wjyz/p/11102379.html>
+- <https://www.runoob.com/w3cnote/es6-generator.html>
+- <http://www.hubwiz.com/exchange/57fb046ce8424ba757b8206d>
+- <https://www.liaoxuefeng.com/wiki/1022910821149312/1023024381818112>
+- <https://zhuanlan.zhihu.com/p/24729321?utm_source=tuicool&utm_medium=referral>
+- <https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function*>
+- <https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator>
+- <https://blog.csdn.net/astonishqft/article/details/82782422?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task>

JavaScript/JavaScript异步机制.md

@@ -13,41 +13,48 @@ while(--i) { console.log(i); }
 console.log("while 执行完毕我才能执行");
 ```
 ### 异步
-异步执行就是非阻塞模式执行，每一个任务有一个或多个回调函数`callback`，前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。浏览器对于每个`Tab`只分配了一个`Js`线程，主要任务是与用户交互以及操作`DOM`等，而这也就决定它只能为单线程，否则会带来很复杂的同步问题，例如假定`JavaScript`同时有两个线程，一个线程在某个`DOM`节点上添加内容，另一个线程删除了这个节点，这时浏览器无法确定以哪个线程的操作为准。
+异步执行就是非阻塞模式执行，每一个任务有一个或多个回调函数`callback`，前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。浏览器对于每个`Tab`只分配了一个`Js`线程，主要任务是与用户交互以及操作`DOM`等，而这也就决定它只能为单线程，否则会带来很复杂的同步问题。例如假定`JavaScript`同时有两个线程，一个线程在某个`DOM`节点上添加内容，另一个线程删除了这个节点，这时浏览器无法确定以哪个线程的操作为准。
+
+在下面的示例中需要注意的是，`W3C`在`HTML`标准中规定，规定要求`setTimeout`中低于`4ms`的时间间隔算为`4ms`。此外，这与浏览器设定、主线程以及任务队列也有关系，执行时间可能大于`4ms`，例如老版本的浏览器都将最短间隔设为`10`毫秒。对于那些`DOM`的变动尤其是涉及页面重新渲染的部分，通常不会立即执行，而是每`16`毫秒执行一次，这时使用`requestAnimationFrame()`的效果要好于`setTimeout()`。
 
 ```javascript
 setTimeout(() => console.log("我后执行"), 0);
-// 注意：W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms，此外这与浏览器设定、主线程以及任务队列也有关系，执行时间可能大于4ms，例如老版本的浏览器都将最短间隔设为10毫秒。另外，对于那些DOM的变动尤其是涉及页面重新渲染的部分，通常不会立即执行，而是每16毫秒执行一次。这时使用requestAnimationFrame()的效果要好于setTimeout()。
 console.log("我先执行");
 ```
 
 ## 异步机制
-首先来看一个例子，与上文一样来测试一个异步执行的操作
+首先来看一个例子，与上文一样来测试一个异步执行的操作。
+
 ```javascript
 setTimeout(() => console.log("我在很长时间之后才执行"), 0);
 var i = 3000000000;
 while(--i) { }
 console.log("循环执行完毕"); 
 ```
-本地测试，设置的`setTimeout`回调函数大约在`30s`之后才执行，远远大于`4ms`，我在主线程设置了一个非常大的循环来阻塞`Js`主线程，注意我并没有设置一个死循环，假如我在此处设置死循环来阻塞主线程，那么设置的`setTimeout`回调函数将永远不会执行，此外由于渲染线程与`JS`引擎线程是互斥的,`Js`线程在处理任务时渲染线程会被挂起，整个页面都将被阻塞，无法刷新甚至无法关闭，只能通过使用任务管理器结束`Tab`进程的方式关闭页面。  
+
+本地测试，设置的`setTimeout`回调函数大约在`30s`之后才执行，远远大于`4ms`，我在主线程设置了一个非常大的循环来阻塞`Js`主线程，注意我并没有设置一个死循环，假如我在此处设置死循环来阻塞主线程，那么设置的`setTimeout`回调函数将永远不会执行。此外由于渲染线程与`JS`引擎线程是互斥的,`Js`线程在处理任务时渲染线程会被挂起，整个页面都将被阻塞，无法刷新甚至无法关闭，只能通过使用任务管理器结束`Tab`进程的方式关闭页面。  
+
 `Js`实现异步是通过一个执行栈与一个任务队列来完成异步操作的，所有同步任务都是在主线程上执行的，形成执行栈，任务队列中存放各种事件回调（也可以称作消息），当执行栈中的任务处理完成后，主线程就开始读取任务队列中的任务并执行，不断往复循环。  
-例如上例中的`setTimeout`完成后的事件回调就存在任务队列中，这里需要说明的是浏览器定时计数器并不是由`JavaScript`引擎计数的，因为`JavaScript`引擎是单线程的，如果线程处于阻塞状态就会影响记计时的准确，计数是由浏览器线程进行计数的，当计数完毕，就将事件回调加入任务队列，同样`HTTP`请求在浏览器中也存在单独的线程，也是执行完毕后将事件回调置入任务队列。通过这个流程，就能够解释为什么上例中`setTimeout`的回调一直无法执行，是由于主线程也就是执行栈中的代码没有完成，不会去读取任务队列中的事件回调来执行，即使这个事件回调早已在任务队列中。
+
+例如上例中的`setTimeout`完成后的事件回调就存在任务队列中，这里需要说明的是浏览器定时计数器并不是由`JavaScript`引擎计数的。因为`JavaScript`引擎是单线程的，如果线程处于阻塞状态就会影响记计时的准确，计数是由浏览器线程进行计数的，当计数完毕，就将事件回调加入任务队列。同样`HTTP`请求在浏览器中也存在单独的线程，也是执行完毕后将事件回调置入任务队列。通过这个流程，就能够解释为什么上例中`setTimeout`的回调一直无法执行，是由于主线程也就是执行栈中的代码没有完成，不会去读取任务队列中的事件回调来执行，即使这个事件回调早已在任务队列中。
 
 ### Event Loop
-主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为`Event Loop`，`Event Loop`是一个执行模型，在不同的地方有不同的实现，浏览器和`NodeJS`基于不同的技术实现了各自的`Event Loop`。浏览器的`Event Loop`是在`HTML5`的规范中明确定义，`NodeJS`的`Event Loop`是基于`libuv`实现的。  
+主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为`Event Loop`，`Event Loop`是一个执行模型，在不同的地方有不同的实现，浏览器和`NodeJS`基于不同的技术实现了各自的`Event Loop`。浏览器的`Event Loop`是在`HTML5`的规范中明确定义，`NodeJS`的`Event Loop`是基于`libuv`实现的。 
+
 在浏览器中的`Event Loop`由执行栈`Execution Stack`、后台线程`Background Threads`、宏队列`Macrotask Queue`、微队列`Microtask Queue`组成。  
 
 * 执行栈就是在主线程执行同步任务的数据结构，函数调用形成了一个由若干帧组成的栈。  
 * 后台线程就是浏览器实现对于`setTimeout`、`setInterval`、`XMLHttpRequest`等等的执行线程。
-* 宏队列，一些异步任务的回调会依次进入宏队列，等待后续被调用，包括`setTimeout`、`setInterval`、`setImmediate(Node)`、`requestAnimationFrame`、`UI rendering`、`I/O`等操作
-* 微队列，另一些异步任务的回调会依次进入微队列，等待后续调用，包括`Promise`、`process.nextTick(Node)`、`Object.observe`、`MutationObserver`等操作  
-
-当`Js`执行时，进行如下流程
-1. 首先将执行栈中代码同步执行，将这些代码中异步任务加入后台线程中
-2. 执行栈中的同步代码执行完毕后，执行栈清空，并开始扫描微队列
-3. 取出微队列队首任务，放入执行栈中执行，此时微队列是进行了出队操作
-4. 当执行栈执行完成后，继续出队微队列任务并执行，直到微队列任务全部执行完毕
-5. 最后一个微队列任务出队并进入执行栈后微队列中任务为空，当执行栈任务完成后，开始扫面微队列为空，继续扫描宏队列任务，宏队列出队，放入执行栈中执行，执行完毕后继续扫描微队列为空则扫描宏队列，出队执行
+* 宏队列，一些异步任务的回调会依次进入宏队列，等待后续被调用，包括`setTimeout`、`setInterval`、`setImmediate(Node)`、`requestAnimationFrame`、`UI rendering`、`I/O`等操作。
+* 微队列，另一些异步任务的回调会依次进入微队列，等待后续调用，包括`Promise`、`process.nextTick(Node)`、`Object.observe`、`MutationObserver`等操作。
+
+当`Js`执行时，进行如下流程:
+
+1. 首先将执行栈中代码同步执行，将这些代码中异步任务加入后台线程中。
+2. 执行栈中的同步代码执行完毕后，执行栈清空，并开始扫描微队列。
+3. 取出微队列队首任务，放入执行栈中执行，此时微队列是进行了出队操作。
+4. 当执行栈执行完成后，继续出队微队列任务并执行，直到微队列任务全部执行完毕。
+5. 最后一个微队列任务出队并进入执行栈后微队列中任务为空，当执行栈任务完成后，开始扫面微队列为空，继续扫描宏队列任务，宏队列出队，放入执行栈中执行，执行完毕后继续扫描微队列为空则扫描宏队列，出队执行。
 6. 不断往复...
 
 #### 实例
@@ -95,14 +102,16 @@ console.log(7);
 */
 ```
 
-##### Step 1
+#### Step 1
+
 ```javascript
 // 执行栈 console
 // 微队列 []
 // 宏队列 []
 console.log(1); // 1
 ```
-##### Step 2
+#### Step 2
+
 ```javascript
 // 执行栈 setTimeout
 // 微队列 []
@@ -114,7 +123,8 @@ setTimeout(() => {
   });
 }, 0);
 ```
-##### Step 3
+#### Step 3
+
 ```javascript
 // 执行栈 Promise
 // 微队列 [then1]
@@ -127,7 +137,8 @@ new Promise((resolve, reject) => {
 })
 ```
 
-##### Step 4
+#### Step 4
+
 ```javascript
 // 执行栈 setTimeout
 // 微队列 [then1]
@@ -137,23 +148,26 @@ setTimeout(() => {
 }, 0);
 ```
 
-##### Step 5
+#### Step 5
+
 ```javascript
 // 执行栈 console
 // 微队列 [then1]
 // 宏队列 [setTimeout1 setTimeout2]
 console.log(7); // 7
 ```
 
-##### Step 6
+#### Step 6
+
 ```javascript
 // 执行栈 then1
 // 微队列 []
 // 宏队列 [setTimeout1 setTimeout2]
 console.log(5); // 5
 ```
 
-##### Step 7
+#### Step 7
+
 ```javascript
 // 执行栈 setTimeout1
 // 微队列 [then2]
@@ -164,15 +178,17 @@ Promise.resolve().then(() => {
 });
 ```
 
-##### Step 8
+#### Step 8
+
 ```javascript
 // 执行栈 then2
 // 微队列 []
 // 宏队列 [setTimeout2]
 console.log(3); // 3
 ```
 
-##### Step 9
+#### Step 9
+
 ```javascript
 // 执行栈 setTimeout2
 // 微队列 []
@@ -182,18 +198,14 @@ console.log(6); // 6
 
 ## 每日一题
 
-```
-https://github.com/WindrunnerMax/EveryDay
-```
+- <https://github.com/WindRunnerMax/EveryDay>
 
 
 ## 参考
 
-```
-https://www.jianshu.com/p/1a35857c78e5
-https://segmentfault.com/a/1190000016278115
-https://segmentfault.com/a/1190000012925872
-https://www.cnblogs.com/sunidol/p/11301808.html
-http://www.ruanyifeng.com/blog/2014/10/event-loop.html
-https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop
-```
+- <https://www.jianshu.com/p/1a35857c78e5>
+- <https://segmentfault.com/a/1190000016278115>
+- <https://segmentfault.com/a/1190000012925872>
+- <https://www.cnblogs.com/sunidol/p/11301808.html>
+- <http://www.ruanyifeng.com/blog/2014/10/event-loop.html>
+- <https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop>