Macrotasks and microtasks in JavaScript

异步运行机制

关于JavaScript的异步运行机制，参照Philip Roberts在JSConf上的演讲视频，在视频中他对JavaScript的异步运行机制做了可视化讲解，最初在看到这个视频时简直被惊艳到（那时我还是一个小萌新），我们也可以在他写的可视化工具中运行自己的代码以分析JavaScript的运行机制。遗憾的是他不支持Promises，也未涉及到Macrotasks and microtasks，所以不足以让我们从中窥见Macrotasks and microtasks的奥秘。

从Philip Roberts的演讲中我们还是可以了解到：JavaScript主线程拥有一个执行栈以及一个回调队列，主线程会依次执行代码，当遇到函数时，会先将函数 入栈，函数运行完毕后再将该函数 出栈，直到所有代码执行完毕。当遇到 WebAPI（例如：setTimeout, AJAX）这些函数时，这些函数会立即返回一个值，从而让主线程不会在此处阻塞。而真正的异步操作会由浏览器执行，浏览器会在这些任务完成后，将事先定义的回调函数推入主线程的回调队列中。而主线程则会在 清空当前执行栈后，按照先入先出的顺序读取回调队列里面的任务。

temporal dead zone

使用var声明变量

在es6定义let和const声明符之前，我们声明一个变量通常使用var：

1
var a = 1

我们可以在变量被声明之前访问变量：

1
2
3
4
5
function fun() {
    console.log(a) //undefined
    var a = 1
}
fun()

我们可以在变量被声明之前给变量赋值或者访问该变量，当我们给变量赋值时，如果在当前作用域的赋值操作后面声明了该变量，赋值操作为正常进行。如果在当前作用域未声明改变量，在当前作用域的父级或祖级作用域也未声明该变量，那么JavaScript会帮我们在全局作用域使用var创建一个变量然后进行赋值。如果在当前作用域的父级或祖级作用域中声明了该变量，我们知道引擎会将变量赋值给父级或祖级作用域中的变量。

FED Interview

  • 定位
    position的值：
    absolute, relative, fixed, static, sticky, inherit.
值 描述
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位.
relative 生成相对定位的元素，相对于其正常位置进行定位。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）.
sticky(css3草案) 盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下，该元素定位均不对后续元素造成影响。

Just For Fun

Just For Fun

写在前面：

希望以后每年都能够写一篇年终总结，放到年终总结这个分类下面，我也不贪，写个七八十篇就OK了。

技术上的成长

去年的这个时候，还在重构Twitter的个人页，那时候还不会写Js,冬令营10天（如果我没记错的话），前几天写完了静态页面，最后几天开始做些Js的交互，那时候实现一个很小的功能，比如写一个点击+1，点击改变背景颜色都要很久，写一个toast，可能需要一个下午。

4月份，参加百度IFE，做了一些练习，那期间也在刷红宝书，慢慢“找到一点写Javascript的感觉”，我还记得我在进度里写出这句话的愉悦感。也是这段时间，我发出了“CSS怎么这么神奇，不同特性搭配起来产生千奇百怪的效果”这种感叹，前段时间想起来很好笑，问前端的新人学妹是不是这个感觉，她很激动的告诉我是！

▲ ▼