好文章推荐系列——Javascript

Js 异步处理演进，Callback=>Promise=>Observer

异步调用就像是接水管，相互缠绕的管道越多，就越容易漏水。如何将水管巧妙连通，使整个系统有足够的弹性，需要去认真思考 🤔
对于 JavaScript 异步的理解，不少人感到过困惑：Js 是单线程的，如何做到异步的呢？实际上，Js 引擎通过混用 2 种内存数据结构：栈和队列，来实现的。栈与队列的交互也就是大家所熟知的 Js 事件循环~~

JavaScript Variables Lifecycle: Why let Is Not Hoisted

ES2015 provides a different and improved mechanism for let. It demands stricter variable declaration practices (you can’t use before definition) and as result better code quality.
Let’s dive into more details about this process.

我用了两个月的时间才理解 let

在 let 刚出来的时候，我就「以为」我理解了 let。然鹅在过去的两个月里，我对 let 的理解发生了一波三折的变化。
我写这篇文章，是希望我的学习过程，能对你自学有帮助。

(建议收藏)原生JS灵魂之问, 请问你能接得住几个？(上)

笔者最近在对原生JS的知识做系统梳理，因为我觉得JS作为前端工程师的根本技术，学再多遍都不为过。打算来做一个系列，一共分三次发，以一系列的问题为驱动，当然也会有追问和扩展，内容系统且完整，对初中级选手会有很好的提升，高级选手也会得到复习和巩固。这是本系列的第三篇。另外两篇：

JS操作小技巧，工作简单了

二十四个 JS 操作小技巧，不仅要会使用，还要了解其原理。

再谈：JavaScript 中的对象是如何进行类型转换的？

最开始我们接触类型转换的时候，有些摸不着头脑，感觉很烦的。其实里面是有规则的，也不多。排除掉规则相对简单的基本类型转换，总结下来，实际困扰我们的核心点有两个：

何时发生隐式类型转换？
还有，对象的类型转换流程又是怎样的？

深入解析你不知道的 EventLoop 和浏览器渲染、帧动画、空闲回调

关于 Event Loop 的文章很多，但是有很多只是在讲「宏任务」、「微任务」，我先提出几个问题：

每一轮 Event Loop 都会伴随着渲染吗？
requestAnimationFrame 在哪个阶段执行，在渲染前还是后？在 microTask 的前还是后？
requestIdleCallback 在哪个阶段执行？如何去执行？在渲染前还是后？在 microTask 的前还是后？
resize、scroll 这些事件是何时去派发的。

这些问题并不是刻意想刁难你，如果你不知道这些，那你可能并不能在遇到一个动画需求的时候合理的选择 requestAnimationFrame，你可能在做一些需求的时候想到了 requestIdleCallback，但是你不知道它运行的时机，只是胆战心惊的去用它，祈祷不要出线上 bug。

这也是本文想要从规范解读入手，深挖底层的动机之一。本文会酌情从规范中排除掉一些比较晦涩难懂，或者和主流程不太相关的概念。更详细的版本也可以直接去读这个规范，不过比较费时费力。

What the f*ck JavaScript?

一个有趣和棘手的 JavaScript 示例列表。

JavaScript 是一种很好的语言。它有一个简单的语法，庞大的生态系统，以及最重要，最伟大的社区。
同时，我们都知道，JavaScript 是一个非常有趣又充满戏法的语言。他们中的有些可以迅速将我们的日常工作变成地狱，有些可以让我们大声笑起来。

见微知著 - 1000字带你掌握nextTick背后的原理

在开发过程中，我们经常遇到这样的问题：我明明已经更新了数据，为什么当我获取某个节点的数据时，却还是更新前的数据？在视图更新之后，怎么基于新的视图进行操作？

What Every JavaScript Developer Should Know About Floating Points

JavaScript numbers are really floating points. Due to inadequecies when representing numbers in base-2, as well as a finite machine, we are left with a format that is filled with rounding errors. This article explains those rounding errors and why those errors occur. Always use a good library for numbers instead of building your own.

undefined vs. null revisited

关于 JS 中的 undefined 和 null 最详细的对比了

Writing a JavaScript Framework

In the last couple of months Bertalan Miklos, JavaScript engineer at RisingStack wrote a next generation client-side framework, called NX: https://nx-framework.com. In the Writing a JavaScript Framework series, Bertalan shares what he learned during the process.

how-javascript-works

本文是翻译介绍 JavaScript 的工作原理的，该系列原文还在更新中，原文见这里。

clean-code-javascript

Software engineering principles, from Robert C. Martin’s book Clean Code, adapted for JavaScript. This is not a style guide. It’s a guide to producing readable, reusable, and refactorable software in JavaScript.

The JavaScript Call Stack - What It Is and Why It’s Necessary

This article is aimed at explaining what the call stack is and why it is needed. An understanding of the call stack will give clarity to how “function hierarchy and execution order” works in the JavaScript engine.

JavaScript’s Memory Management Explained

非常详尽的一篇文章，对 JS 中的内存管理作了解释和讲解

JavaScript 对象转换之 toString 和 valueOf

JS 中的对象转换一直是面试重点，同时在实际工作中也会遇到因为对象转换带来的各种“坑”，比如这个例子：

parseInt(0.0000004)  // 4
![]==[] //true
['x','y'] == 'x,y' //true
alert({name:'mofei'})  //"[object Object]"

时区与JS中的Date对象

非常详细的介绍了时区、时间标准等概念和规范，同时结合 JS 中的使用和常见问题可以更深刻地理解 Date 对象与时区。

深拷贝的终极探索

深拷贝和浅拷贝是面试高频题目，作者首先列举了一些深拷贝的实现方案，同时通过这些方案存在的问题引出他所理解的最终解决方案

WebAudio Deep Note, part 2: play a sound

介绍了 iOS 上关于音频的一些知识

你不知道的 JSON.stringify() 的威力

作者详细介绍了JSON.stringify()的九大特性，同时还介绍了JSON.stringify()中经常被人忽略的第二个和第三个参数，相信看完之后对JSON.stringify()会有更深入的理解。

忍者代码

过去的程序员忍者使用这些技巧，来使代码维护者的头脑更加敏锐。
代码审查大师在测试任务中寻找它们。
一些新入门的开发者有时候甚至比忍者程序员能够更好地使用它们。
仔细阅读本文，找出你是谁 —— 一个忍者、一个新手、或者一个代码审查者？

《编程时间简史系列》JavaScript 模块化的历史进程

模块化是前端绕不开的话题，而本篇文章不涉及任何前端代码，只谈历史故事，可以作为模块化开发的了解材料

深入理解 TypeScript

《TypeScript Deep Dive》的中文翻译版

【动画演示】：事件循环形象深动(JavaScript)

通过几张动图 + 讲解非常生动形象的讲解了 JS 中的事件循环这一重要概念。

一次弄懂Event Loop（彻底解决此类面试问题）

Event Loop 即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。本文内容较长，通过实例对事件循环概念和应用进行了讲解，图文并茂，看起来其实并不枯燥。

统一回复《怎么学JavaScript？》

作者通过自己的经历告诉大家：如何学习前端。这是一篇很不错的前端入门文章，作者推荐了一些前端方面的书籍，同时还注明了这些书籍适合什么时候阅读以及适合怎样阅读，建议仍然不知道如何学前端的你好好看一下这篇文章

javascript 的 12 个怪癖（quirks）

实际上 javascript 是一个相当简洁的语言，但是也难免会有一些怪癖（quirks）。这是作者翻译的国外一个开发者的系列文章，同时在我发布之前（2017-8-7），作者还没有翻译团队，如果有英语比较好的前端小伙伴，欢迎加入翻译的队伍中，像我这种英语“战五渣”表示只能“拿来”了。。

80% 应聘者都不及格的 JS 面试题

从最简单的 setTimeout() 执行队列，到自执行函数产生闭包，再到 ES6 中的 promise 以及 ES7 中的 async 和 await，作者通过一道不断延伸出来的js面试题讲解了在面试中经常遇到的问题，同时对以上的这些知识点进行了概括总结

[翻译] We have a problem with promises

promise 一直是被认为判断一名“前端工程师”是否仍然处在“初级”的利器，而这篇文章通过 promise 相关的四段代码对 promise 进行了深入剖析，这是一篇译文，英文原文可以点击这里查看

学用 JavaScript 设计模式

设计模式的概念很早之前就有了，而 JS 虽然之前一直被认为是“做网页”的语言，但是JS中也有设计模式的思想，相信看完这个系列的文章之后，你会对 JS 有更加深入的理解，该系列文章对于没有“面向对象”语言基础的童鞋来说可能会有些难度，建议在看的过程中及时查阅其他资料。

ajax跨域，这应该是最全的解决方案了

看题目就很屌，恩。。

jQuery的document ready与 onload事件——你真的思考过吗？

虽然题目看似和 jQuery 关系很大，但其实作者探究了很多 JS 相关问题，包括加载顺序以及 load 事件的产生原因，内容短小精悍，值得一看。下面这些问题是作者在文中所阐述探索的：

window.onload 到底是什么加载完触发？
body 为什么会有 onload 事件？
为什么是 window.onload，而不是 document.onload？
document ready到底是什么 ready，DOM 渲染完成？
jQuery 怎么实现 $(document).ready？
jQuery 的 ready，还能 ready 什么？
jQuery 的 document ready 就一定比 window.onload 快吗？
为什么外部 script 文件放页面内容后面好，是一定的吗？

10 分钟了解 JS 堆、栈以及事件循环的概念

作者通过 JS的内存机制以及事件机制和大量的（例子）来讲解栈、堆究竟是个什么玩意。概念比较多，不用死读，把所有的实例代码手敲一遍就很清楚了，作者讲的很透彻，该文章来自于薄荷前端周刊，该周刊发布的文章都蛮不错的，建议阅读~

7 分钟理解 JS 的节流、防抖及使用场景

防抖和节流是两个很重要也经常会用到的知识点，这篇文章的重点并不是介绍它们的实现原理，而是着眼于它们的应用效果和应用场景，文中对于防抖和节流产生效果的总结很通俗易懂：

函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条。
函数节流就是 fps 游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。

精读 The Cost of JavaScript

Addy 在 The Cost of JavaScript In 2018一文中分享了在保证用户友好交互体验的前提下如何高效分发 JavaScript 的开发经验，而我现在推荐的这篇文章是一篇导读文章，原文作者首先将全文的内容压缩成几条观点总结出来，之后从用户体验为 Web 带来的变化开始说起，到 JavaScript 的成本有哪些、它们为何如此高昂、如何降低开销以及持续集成，全文形成一个非常完整的优化流程：

写在开头的话
膨胀的 JavaScript 与 Web 现状
JavaScript 的成本所在
页面交互性解释与建议
处理 JavaScript 成本为何如此昂贵
千差万别的移动用户与应对策略
分发更少 JavaScript 的常见技巧
持续集成四部曲

深入理解javascript原型和闭包系列

本系列有 16 篇文章，外加两篇后补的，一共 18 篇文章。将原型和闭包相关知识都进行了讲解，知识点很全，图文并茂。

JavaScript 模块化七日谈

作者以 slide 的形式讲解了 JS 模块化的发展历程，目录：

第一日上古时期 Module? 从设计模式说起
第二日石器时代 Script Loader 只有封装性可不够，我们还需要加载
第三日蒸汽朋克 Module Loader 模块化架构的工业革命
第四日号角吹响 CommonJS 征服世界的第一步是跳出浏览器
第五日双塔奇兵 AMD/CMD 浏览器环境模块化方案
第六日精灵宝钻 Browserify/Webpack 大势所趋，去掉这层包裹！
第七日王者归来 ES6 Module 最后的战役

看书有啥好处
看什么书
怎么看书
看书的层次
利用源码进行学习
时间、兴趣等问题

展现形式：由于是属于系统梳理型，就没有由浅入深了，而是从头到尾的梳理知识体系，重点是将关键节点的知识点串联起来，而不是仅仅剖析某一部分知识。
内容是：从浏览器进程，再到浏览器内核运行，再到 JS 引擎单线程，再到 JS 事件循环机制，从头到尾系统的梳理一遍，摆脱碎片化，形成一个知识体系
目标是：看完这篇文章后，对浏览器多进程，JS 单线程，JS 事件循环机制这些都能有一定理解，有一个知识体系骨架，而不是似懂非懂的感觉。
另外，本文适合有一定经验的前端人员，新手请规避，避免受到过多的概念冲击。可以先存起来，有了一定理解后再看，也可以分成多批次观看，避免过度疲劳。

大纲：

区分进程和线程
浏览器是多进程的
- 浏览器都包含哪些进程？
- 浏览器多进程的优势
- 重点是浏览器内核（渲染进程）
- Browser进程和浏览器内核（Renderer进程）的通信过程
梳理浏览器内核中线程之间的关系
- GUI渲染线程与JS引擎线程互斥
- JS阻塞页面加载
- WebWorker，JS的多线程？
- WebWorker与SharedWorker
简单梳理下浏览器渲染流程
- load事件与DOMContentLoaded事件的先后
- css加载是否会阻塞dom树渲染？
- 普通图层和复合图层
从Event Loop谈JS的运行机制
- 事件循环机制进一步补充
- 单独说说定时器
- setTimeout而不是setInterval
事件循环进阶：macrotask与microtask
写在最后的话

关于 Promise 的 9 个提示

通过 9 个鲜活的案例，我们可以加深对 Promise 的理解