写在最前

最近有一种深深的迷茫感，有很多事情要做但是不知道从哪一步开始。最近前端变的越快，自己学习和充电的时间却越来越少，自身所在的业务变更也比较频繁，没有机会和时间深入学习。感觉找个时间梳理一下，从小小的一步开始坚持吧。

基础

• 计算机基础 (TODO)
• 算法 (TODO)
• 计算机网络 (DOING)
• 前端相关 (DOING)

前端相关

• HTML (TODO)
• CSS (TODO)
• JS (DOING)

JavaScript

JavaScript 基础

前端框架原理

前端工程化

TypeScript 相关

Node 基础

常见 Node 工具及原理

后端基础

后端框架原理

移动端相关

web 安全

正则表达式

动画相关

其他

激励着我的 Blog

• http://www.zhangxinxu.com/wordpress/2017/06/ten-question-about-frontend-zhihu/
• https://github.com/jawil/blog
• https://github.com/Aaaaaaaty/blog
• https://github.com/creeperyang

灵感池

• https://github.com/thedaviddias/Front-End-Checklist
• https://github.com/mbeaudru/modern-js-cheatsheet
• https://github.com/bolshchikov/js-must-watch
• https://github.com/bpesquet/thejsway
• https://github.com/getify/You-Dont-Know-JS
• https://github.com/simongong/js-stackoverflow-highest-votes
• https://github.com/ruanyf/es6tutorial
• https://github.com/braziljs/js-the-right-way
• https://github.com/AllThingsSmitty/must-watch-javascript
• https://github.com/denysdovhan/wtfjs

Chromium如何从一个html文件到屏幕上显示

• https://drive.google.com/file/d/1Ky59m-F79ULs4ydMbD4Mp1dBXvs_eDes/view
• https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit#slide=id.p

前言

最近在整理前端技术信息的获取，一方面是发现以前关注的一些博客更新不那么频繁，一方面是发现自己的列表越来越多，平时根本没有时间看完。还有一个原因是刚好同事在我的整理列表下留言了，让我更新一下。于是想要对获取信息流做一下筛选，做一个列表，不求列全，但求能涵盖到高质量的博客和社区文章。

第一步，收集样本

博客类

国外：

• https://css-tricks.com/ 里面有很多经典高质量文章，主要是和 CSS 相关的
• https://www.smashingmagazine.com/articles/ 偶尔搜文章的时候会到这里来，感觉出现频率还挺高的
• https://medium.com/ 这个不多说，可能需要之后单独整理一个 medium 的 follow list
• http://2ality.com/index.html 偶尔会被导向这边

国内：

• https://75team.com/post/list 奇舞团是老牌前端博客团队了，更新频率也很稳定
• http://taobaofed.org/ 最近两年更新频率下降很多，而且比较多是在宣传自家的开源产品
• http://www.alloyteam.com/page/0/ 更新频率也下降了，而且博客内容可能关注内容不够“潮”
• https://techblog.toutiao.com/ 从今年五月份开始频繁发文的博客
• https://github.com/fouber/blog/issues 文章内容不多，但是质量较高，主要关注在前端工程化这一块
• https://github.com/jawil/blog/issues 比较火的 Github 博客，内容比较丰富，也比较激励
• https://github.com/lifesinger/blog/issues 最近不更新了，但是写的文章还是很让人深思的
• https://github.com/lcxfs1991/blog/issues 主要关注在 webpack 这一块
• https://github.com/creeperyang/blog/issues 内容同样比较丰富，之前因为 EventLoop 看过相关的文章
• https://github.com/Aaaaaaaty/blog/issues 主要关注在 Canvas 这一块
• https://github.com/ascoders/blog/issues React 生态源码的分享
• https://github.com/nswbmw/N-blog Node.js 实践
• https://yuque.com/mayiprototeam 阿里团队另外一个博客地址，文章质量还挺不错的

周刊类

国内：

• http://fex.baidu.com/weekly/ 更新很稳定并且来源比较广泛的周刊
• https://zhuanlan.zhihu.com/FrontendMagazine 最近比较火的一个周刊，在知乎上有专栏
• https://zhuanlan.zhihu.com/qianduanzhidian 更新较为稳定的专栏周刊

news / 社区类

国外：

• http://www.echojs.com/ 用户活跃度非常一般。但是资讯质量有些很高
• https://www.reddit.com/r/javascript/ 内容丰富
• https://news.ycombinator.com/ HN 谨慎订阅
• https://developers.google.com/web/ Google 开发者博客

国内：

• https://cnodejs.org/
• https://www.w3ctech.com/

第二步，建立标准

如何筛选出好的博客和社区？以下列了几个维度参考：

• 活跃度：更新时间是否及时，每个月更新一次为及格线。断更扣五分，每周更新一次加五分。
• 关注数：留言数，Medium 鼓掌数，知乎点赞数等。这个数量计算时间为一个月之前，留言数两位数留言起，点赞鼓掌数三位数起及格。不及格扣五分，留言三位数，点赞鼓掌四位数加五分。
• 文章质量：这个维度的评分较为主观，目前先不纳入计算。
• 被转发数：每被其他文章索引一次加五分。

第三步，评分筛选

TBD...

部分参考来自 https://www.zhihu.com/question/29940477

Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014 是一篇很经典的关于 event loop 的文章，通俗易懂地解释了 JavaScript Runtime 和外部 web API (DOM, HTTP Request, setTimeout) 是如何通过 EventLoop 连接起来的。

什么是 EventLoop ?

在讲 EventLoop 之前讲一下几个概念，分别是

• JavaScript 是单线程的，除非特殊情况
• JavaScript 调用栈 (Call Stack)
• Web API (DOM, HTTP Request, setTimeout)

JavaScript Call Stack

• JavaScript Runtime
  可以简单的理解为 Heap 和 Stack 的结合，其中 Heap 用来管理内存 (memory allocation)，Stack 用来管理上下文的调用 (execution contexts)，记录当前代码运行的数据结构。

The Call Stack is a data structure which records basically where in the program we are.

• 一个简单的例子

If we step into a function, we put it on the top of the stack. If we return from a function, we pop off the top of the stack. That’s all the stack can do.

当我们进入函数时，我们将其推入栈中。如果我们从函数里返回，我们就会将这个函数弹出。这就是函数调用栈所做的事情。

• RangeError

如果我们调用的一个函数不停的调用自身，就会导致栈里的函数不断暴增直至报错。

• 同步调用 API

假如我们同步发起 HTTP 请求的话，假设这个时候网络状况不好，需要等待很久（例如三秒）才能完成所有的 HTTP 请求，那么此时这个 HTTP 请求的执行方法就会一直在 JS 的调用栈里。我们会发现这个时候整个网页都停止了响应，既不能渲染，也无法响应任何事件（因为调用栈里这个函数还没有执行完，未清空）。直到这个 HTTP 请求结束之后，才会继续执行下面的 JS 程序。

显然如果在一直同步调用一些阻塞进程的复杂运算代码并不会带来好的用户体验，怎么做才能避免这种情况呢，于是就有了异步回调。

• 异步回调

那如果我们用 setTimeout 做一个异步操作的话，思考下面的代码，会发生什么？

调用栈里面神奇的消失了？

Web API

• 什么是 Web API

在 JavaScript Runtime 里面是没有所谓 DOM，HTTP Request，setTimeout 这些方法的实现的，也就是说这些 API 都是由宿主环境（浏览器，NodeJS）提供的。那么这些 API 是怎么通过 JS 调用的呢？

EventLoop

那么究竟 EventLoop 在里面扮演什么样的角色呢？

JavaScript 确实是单线程，且只有一个调用栈，但是 JavaScript 可以通过任务队列将异步的回调管理起来，并且在堆栈清空的时候，逐步处理异步的回调，如同上面的图一样。

进一步深入

由于视频是在 2014 年出来的，之后在 ES6 ES7 引入各种新的 API，假如 Promise 也参与进来之后会发生什么呢？还记的 Web API 调用时有没有优先级呢？

先来看 HTML 5规范 是怎么定义的

• 每个浏览器环境，至多有一个 event loop。
• 一个event loop可以有1个或多个 task queue。
• 一个 task queue 是一列有序的 task，用来做以下工作：Events task，Parsing task， Callbacks task， Using a resource task， Reacting to DOM manipulation task等。

每个 task 都有自己相关的 document，比如一个 task 在某个 element 的上下文中进入队列，那么它的document 就是这个 element 的 document。

每个 task 定义时都有一个 task source，从同一个 task source 来的 task 必须放到同一个 task queue，从不同源来的则被添加到不同队列。

每个(task source对应的) task queue 都保证自己队列的先进先出的执行顺序，但 event loop 的每个 turn，是由浏览器决定从哪个 task source 挑选task。这允许浏览器为不同的 task source 设置不同的优先级，比如为用户交互设置更高优先级来使用户感觉流畅。

Promise

来看下面这段代码

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

输出结果为

script start
script end
promise1
promise2
setTimeout

前面两行同步执行的代码并没有问题，奇怪的是同样都是异步代码，为什么看起来 Promise 的优先级会比 setTimeout 高呢？

为了理解这个问题，我们引入了 tasks 和 Microtasks 的概念。

• Tasks，确保一些从内部到 JavaScript/DOM 这些操作顺序进行。在 tasks 之间，浏览器可能会 render updates。从鼠标点击到事件 callback 需要 schedule task，解析 html，setTimeout 等等这些也一样。
• Microtasks，通常是为需要直接在当前脚本执行完后立即发生的事，比如 reacting to a batch of actions，make something async without taking the penalty of a whole new task。一旦没有其它 JS 在执行并且在每个 task 之后，microtask queue 立马在回调之后执行。microtask 中添加的 microtask 也被添加到 microtask queue 的末尾并处理。microtask 包括 mutation observer callbacks 和 promise callbacks。

Once a promise settles, or if it has already settled, it queues a microtask for its reactionary callbacks. This ensures promise callbacks are async even if the promise has already settled. So calling .then(yey, nay) against a settled promise immediately queues a microtask. This is why promise1 and promise2 are logged after script end, as the currently running script must finish before microtasks are handled. promise1 and promise2 are logged before setTimeout, as microtasks always happen before the next task.

所以一旦 promise 开始 settles，马上就进入 Microtasks 队列中，这样就保证了 Promise 是异步执行的。所以调用 .then() 的时候实际上是进入 Microtasks 的队列里。这也就是为什么 promise1 promise2 要比 script end 出现的晚。因为当前脚本还没执行完毕，microtasks 还未开始执行。而 promise1 promise2 要比 setTimeout 快，则是因为 microtasks 总是在下一个 tasks 之前就开始执行。

小结：

• JS 栈里先执行 script start
• Tasks 里推入 run script
• Log 输出 script start
• Tasks 里推入 setTimeout callback
• Microtasks 里推入 Promise then
• Log 输出 script end
• Tasks 里 run script 执行完毕
• 执行到当前 task 的末尾，在执行下一个 task 之前开始执行 Microtasks 里的队列回调
• Log 输出 promise1 promise2
• 开始执行下一个 task
• Log 输出 setTimeout

总结

其他参考：

• Tasks, microtasks, queues and schedules
• How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with async/await
• creeperyang/blog#21

之前偶然看到 event loop 相关的东西，我们说 JavaScript 自身是单线程的，但是为了处理异步任务，有了所谓 event loop 的东西，而在 Node.js 里，为了满足特定的需求和浏览器又有不一样的实现方法。简单来讲：

• Node.js 的 event 是基于 libuv，而浏览器的 event loop 则在 html5 的规范中明确定义。
• libuv 已经对 event loop 作出了实现，而 html5 规范中只是定义了浏览器中 event loop 的模型，具体实现留给了浏览器厂商。

参考：

• https://medium.com/the-node-js-collection/what-you-should-know-to-really-understand-the-node-js-event-loop-and-its-metrics-c4907b19da4c
• https://cnodejs.org/topic/57d68794cb6f605d360105bf
• https://cnodejs.org/topic/5a9108d78d6e16e56bb80882
• https://nodejs.org/zh-cn/docs/guides/event-loop-timers-and-nexttick/