关于javascript:重学-JavaScript-执行机制

一、为何 try 外面放 return，finally 还会执行，了解其外部机制

1.1 Completion 类型

// return 执行了然而没有立刻返回，而是先执行了 finally
function kaimo() {
  try {return 0} catch (err) {console.log(err)
  } finally {console.log('a')
  }
}

console.log(kaimo()) // a 0

// finally 中的 return 笼罩了 try 中的 return。function kaimo() {
  try {return 0} catch (err) {console.log(err)
  } finally {return 1}
}

console.log(kaimo()) // 1

Completion Record
Completion Record 用于形容异样、跳出等语句执行过程。示意一个语句执行完之后的后果，它有三个字段。

[[type]]：示意实现的类型，有 break、continue、return、throw、normal 几种类型

[[value]]：示意语句的返回值，如果语句没有，则是 empty

[[target]]：示意语句的指标，通常是一个 JavaScript 标签

JavaScript 应用 Completion Record 类型，管制语句执行的过程。

1.2 一般语句

在 JavaScript 中，把不带控制能力的语句称为一般语句。品种能够参考引言的图片。

1、这些语句在执行时，从前到后依次执行（这里先疏忽 var 和函数申明的预处理机制），没有任何分支或者反复执行逻辑。

2、一般语句执行后，会失去 [[type]] 为 normal 的 Completion Record，JavaScript 引擎遇到这样的 Completion Record，会继续执行下一条语句。

3、在 Chrome 控制台输出一个表达式，能够失去后果，然而在后面加上 var，就变成了 undefined。Chrome 控制台显示的正是语句的 Completion Record 的 [[value]]。

1.3 语句块

语句块就是拿大括号括起来的一组语句，它是一种语句的复合构造，能够嵌套。

语句块外部的语句的 Completion Record 的 [[type]] 如果不为 normal，会打断语句块后续的语句执行。

1.3.1 外部为一般语句的一个语句块

// 在每一行的正文中为 Completion Record
{
  var i = 1 // normal, empty, empty
  i++ // normal, 1, empty
  console.log(i) //normal, undefined, empty
} // normal, undefined, empty

在这个 block 中都是 normal 类型的话，该程序会按程序执行。

1.3.2 退出 return

// 在每一行的正文中为 Completion Record
{
  var i = 1 // normal, empty, empty
  return i // return, 1, empty
  i++
  console.log(i)
} // return, 1, empty

在 block 中产生的非 normal 的实现类型能够穿透简单的语句嵌套构造，产生管制成果。

1.4 管制型语句

管制型语句带有 if、switch 关键字，它们会对不同类型的 Completion Record 产生反馈。

管制类语句分成两局部：

对其外部造成影响：如 if、switch、while/for、try。
对外部造成影响：如 break、continue、return、throw。

穿透就是去上一层的作用域或者管制语句找能够生产 break，continue 的执行环境，生产就是在这一层就执行了这个 break 或者 continue

这两类语句的配合，会产生控制代码执行程序和执行逻辑的成果。

1.5 带标签的语句

1、任何 JavaScript 语句是能够加标签的，在语句前加冒号即可：。

firstStatement: var i = 1

2、相似于正文，根本没有任何用途。惟一有作用的时候是：与实现记录类型中的 target 相配合，用于跳出多层循环。

outer: while (true) {console.log('outer')
  inner: while (true) {console.log('inner1')
    break outer
    console.log('inner2')
  }
}
console.log('finished')
// outer  inner1  finished

二、宏工作和微工作别离有哪些

宏工作次要有：script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)。

微工作次要有：Promise.then、MutationObserver、process.nextTick(Node.js 环境)。

三、JavaScript 如何实现异步编程，能够详细描述 EventLoop 机制

在 js 中，工作分为宏工作 (macrotask) 和微工作(microtask)，这两个工作别离保护一个队列，均采纳先进先出的策略进行执行！同步执行的工作都在宏工作上执行。

具体的操作步骤如下：

• 从宏工作的头部取出一个工作执行；
• 执行过程中若遇到微工作则将其增加到微工作的队列中；
• 宏工作执行结束后，微工作的队列中是否存在工作，若存在，则挨个儿进来执行，直到执行结束；
• GUI 渲染；
• 回到步骤 1，直到宏工作执行结束；

前 4 步形成了一个事件的循环检测机制，即咱们所称的 eventloop。

四、能够疾速剖析一个简单的异步嵌套逻辑，并把握分析方法

能够先把简单的异步写法转换为简略写法。比方 async、await 异步的这种写法，其原理就是回调函数。

而后依照事件的循环机制进行剖析。

五、应用 Promise 实现串行

5.1 概述

最罕用的队列操作就是 Array.prototype.reduce()

let result = [1, 2, 5].reduce((accumulator, item) => {return accumulator + item}, 0) // <-- Our initial value.

console.log(result) // 8

最初一个值 0 是起始值，每次 reduce 返回的值都会作为下次 reduce 回调函数的第一个参数，直到队列循环结束，因而能够进行累加计算。

那么将 reduce 的个性用在 Promise 试试：

function runPromiseByQueue(myPromise) {
  myPromise.reduce((previousPromise, nextPromise) => previousPromise.then(() => nextPromise()),
    Promise.resolve())
}

当上一个 Promise 开始执行（previousPromise.then），当其执行结束后再调用下一个 Promise，并作为一个新 Promise 返回，下次迭代就会持续这个循环。

const createPromise = (time, id) => () =>
  new Promise(setTimeout(() => {console.log('promise', id)
      solve()}, time)
  )

runPromiseByQueue([createPromise(3000, 1),
  createPromise(2000, 2),
  createPromise(1000, 3)
])

5.2 精读

Reduce 是同步执行的，在一个事件循环就会实现，但这仅仅是在内存疾速结构了 Promise 执行队列，开展如下：

new Promise((resolve, reject) => {
  // Promise #1

  resolve()})
  .then(result => {
    // Promise #2

    return result
  })
  .then(result => {
    // Promise #3

    return result
  }) // ... and so on!

Reduce 的作用就是在内存中生成这个队列，而不须要把这个冗余的队列写在代码里！

5.3 更简略的办法

在 async/await 的反对下，runPromiseByQueue 函数能够更为简化：

async function runPromiseByQueue(myPromises) {for (let value of myPromises) {await value()
  }
}

多亏了 async/await，代码看起来如此简洁明了。

不过要留神，这个思路与 reduce 思路不同之处在于，利用 reduce 的函数整体是个同步函数，本人先执行结束结构 Promise 队列，而后在内存异步执行；而利用 async/await 的函数是利用将本人革新为一个异步函数，期待每一个 Promise 执行结束。

六、Node 与浏览器 EventLoop 的差别

6.1 与浏览器环境有何不同

在 node 中，事件循环体现出的状态与浏览器中大致相同。不同的是 node 中有一套本人的模型。node 中事件循环的实现是依附的 libuv 引擎。咱们晓得 node 抉择 chrome v8 引擎作为 js 解释器，v8 引擎将 js 代码剖析后去调用对应的 node api，而这些 api 最初则由 libuv 引擎驱动，执行对应的工作，并把不同的事件放在不同的队列中期待主线程执行。因而实际上 node 中的事件循环存在于 libuv 引擎中。

6.2 事件循环模型

上面是一个 libuv 引擎中的事件循环的模型:

   ┌───────────────────────┐
┌─>│       timers          │
│  └──────────┬────────────┘
│  ┌──────────┴────────────┐
│  │    I/O callbacks      │
│  └──────────┬────────────┘
│  ┌──────────┴────────────┐
│  │    idle, prepare      │
│  └──────────┬────────────┘ ┌───────────────┐
│  ┌──────────┴────────────┐ │ incoming:     │
│  │        poll           │<──connections───│
│  └──────────┬────────────┘ │ data, etc.    │
│  ┌──────────┴────────────┐ └───────────────┘
│  │        check          │
│  └──────────┬────────────┘
│  ┌──────────┴────────────┐
└──┤    close callbacks    │
   └───────────────────────┘

注：模型中的每一个方块代表事件循环的一个阶段

这个模型是 node 官网上的一篇文章中给出的，我上面的解释也都来源于这篇文章。我会在文末把文章地址贴出来，有趣味的敌人能够亲自与看看原文。

6.3 事件循环各阶段详解

从下面这个模型中，咱们能够大抵剖析出 node 中的事件循环的程序：

内部输出数据 –> 轮询阶段(poll)–> 查看阶段(check)–> 敞开事件回调阶段(close callback)–> 定时器检测阶段(timer)–>I/O 事件回调阶段(I/O callbacks)–> 闲置阶段(idle, prepare)–> 轮询阶段 …

以上各阶段的名称是依据我集体了解的翻译，为了防止谬误和歧义，上面解释的时候会用英文来示意这些阶段。

这些阶段大抵的性能如下：

• timers: 这个阶段执行定时器队列中的回调如  setTimeout()  和  setInterval()。
• I/O callbacks: 这个阶段执行简直所有的回调。然而不包含 close 事件，定时器和 setImmediate()的回调。
• idle, prepare: 这个阶段仅在外部应用，能够不用理睬。
• poll: 期待新的 I/O 事件，node 在一些非凡状况下会阻塞在这里。
• check: setImmediate()的回调会在这个阶段执行。
• close callbacks: 例如 socket.on(‘close’, …)这种 close 事件的回调。

上面咱们来依照代码第一次进入 libuv 引擎后的程序来具体讲解这些阶段：

6.3.1 poll 阶段

当个 v8 引擎将 js 代码解析后传入 libuv 引擎后，循环首先进入 poll 阶段。poll 阶段的执行逻辑如下：先查看 poll queue 中是否有事件，有工作就按先进先出的程序顺次执行回调。当 queue 为空时，会查看是否有 setImmediate()的 callback，如果有就进入 check 阶段执行这些 callback。但同时也会查看是否有到期的 timer，如果有，就把这些到期的 timer 的 callback 依照调用程序放到 timer queue 中，之后循环会进入 timer 阶段执行 queue 中的 callback。这两者的程序是不固定的，收到代码运行的环境的影响。如果两者的 queue 都是空的，那么 loop 会在 poll 阶段停留，直到有一个 i/o 事件返回，循环会进入 i/o callback 阶段并立刻执行这个事件的 callback。

值得注意的是，poll 阶段在执行 poll queue 中的回调时实际上不会有限的执行上来。有两种状况 poll 阶段会终止执行 poll queue 中的下一个回调：1. 所有回调执行结束。2. 执行数超过了 node 的限度。

6.3.2 check 阶段

check 阶段专门用来执行 setImmediate()办法的回调，当 poll 阶段进入闲暇状态，并且 setImmediate queue 中有 callback 时，事件循环进入这个阶段。

6.3.3 close 阶段

当一个 socket 连贯或者一个 handle 被忽然敞开时（例如调用了 socket.destroy()办法），close 事件会被发送到这个阶段执行回调。否则事件会用 process.nextTick（）办法发送进来。

6.3.4 timer 阶段

这个阶段以先进先出的形式执行所有到期的 timer 退出 timer 队列里的 callback，一个 timer callback 指得是一个通过 setTimeout 或者 setInterval 函数设置的回调函数。

6.3.5 I/O callback 阶段

如上文所言，这个阶段次要执行大部分 I/O 事件的回调，包含一些为操作系统执行的回调。例如一个 TCP 连贯生谬误时，零碎须要执行回调来取得这个谬误的报告。

6.4 推延工作执行的办法

在 node 中有三个罕用的用来推延工作执行的办法：process.nextTick,setTimeout（setInterval 与之雷同）与 setImmediate

这三者间存在着一些十分不同的区别：

process.nextTick()

只管没有提及，然而实际上 node 中存在着一个非凡的队列，即 nextTick queue。这个队列中的回调执行尽管没有被示意为一个阶段，过后这些事件却会在每一个阶段执行结束筹备进入下一个阶段时优先执行。当事件循环筹备进入下一个阶段之前，会先查看 nextTick queue 中是否有工作，如果有，那么会先清空这个队列。与执行 poll queue 中的工作不同的是，这个操作在队列清空前是不会进行的。这也就意味着，谬误的应用 process.nextTick()办法会导致 node 进入一个死循环。。直到内存透露。

那么适合应用这个办法比拟适合呢？上面有一个例子：

const server = net.createServer(() => {}).listen(8080)

server.on('listening', () => {})

这个例子中当，当 listen 办法被调用时，除非端口被占用，否则会立即绑定在对应的端口上。这意味着此时这个端口能够立即触发 listening 事件并执行其回调。然而，这时候 on(‘listening)还没有将 callback 设置好，天然没有 callback 能够执行。为了避免出现这种状况，node 会在 listen 事件中应用 process.nextTick()办法，确保事件在回调函数绑定后被触发。

setTimeout()和 setImmediate()
在三个办法中，这两个办法最容易被弄混。实际上，某些状况下这两个办法的体现也十分类似。然而实际上，这两个办法的意义却大为不同。

setTimeout()办法是定义一个回调，并且心愿这个回调在咱们所指定的工夫距离后第一工夫去执行。留神这个“第一工夫执行”，这意味着，受到操作系统和以后执行工作的诸多影响，该回调并不会在咱们预期的工夫距离后精准的执行。执行的工夫存在肯定的提早和误差，这是不可避免的。node 会在能够执行 timer 回调的第一工夫去执行你所设定的工作。

setImmediate()办法从意义上将是立即执行的意思，然而实际上它却是在一个固定的阶段才会执行回调，即 poll 阶段之后。乏味的是，这个名字的意义和之前提到过的 process.nextTick()办法才是最匹配的。node 的开发者们也分明这两个办法的命名上存在肯定的混同，他们示意不会把这两个办法的名字调换过去 — 因为有大量的 ndoe 程序应用着这两个办法，调换命名所带来的益处与它的影响相比不值一提。

setTimeout()和不设置工夫距离的 setImmediate()体现上及其类似。猜猜上面这段代码的后果是什么？

setTimeout(() => {console.log('timeout')
}, 0)

setImmediate(() => {console.log('immediate')
})

实际上，答案是不肯定。没错，就连 node 的开发者都无奈精确的判断这两者的程序谁前谁后。这取决于这段代码的运行环境。运行环境中的各种简单的状况会导致在同步队列里两个办法的程序随机决定。然而，在一种状况下能够精确判断两个办法回调的执行程序，那就是在一个 I/O 事件的回调中。上面这段代码的程序永远是固定的：

const fs = require('fs')

fs.readFile(__filename, () => {setTimeout(() => {console.log('timeout')
  }, 0)
  setImmediate(() => {console.log('immediate')
  })
})

答案永远是：

immediate

timeout

因为在 I/O 事件的回调中，setImmediate 办法的回调永远在 timer 的回调前执行。

七、如何在保障页面运行晦涩的状况下解决海量数据

如果要在前端出现大量的数据，个别的策略就是分页。前端要出现百万数据，这个需要是很少见的，然而展现千条略微简单点的数据，这种需要还是比拟常见，只有内存够，javascript 必定是吃得消的，计算几千上万条数据，js 效率基本不在话下，然而 DOM 的渲染浏览器扛不住，CPU 略微搓点的电脑必然会卡爆。

策略：显示三屏数据，其余的移除 DOM。

7.1 策略

上面是我简略勾画的一个草图，咱们把一串数据放到一个容器当中，这串数据的高度（Data List）必定是比 Container 的高度要高很多的，如果咱们一次性把数据都显示进去，浏览器须要破费大量的工夫来计算每个 data 的地位，并且顺次渲染进去，整个过程中 JS 并没有破费太多的工夫，开销次要是 DOM 渲染。

为了解决这个问题，咱们让数据是显示一部分，这一部分是 Container 可视区域的内容，以及高低各一屏（一屏指的是 Container 高度所能包容的区域大小）的缓存内容。如果 Container 比拟高，也可是只缓存半屏，缓存的起因是，在咱们滚动滚动条的时候，js 须要工夫来拼凑字符串（或者创立 Node），这个时候浏览器还来不及渲染，所以会呈现长期的空白，这种体验是相当不好的。

7.2 Demo

<title> 百万数据前端疾速晦涩显示 </title>
<style type="text/css">
#box {position: relative; height: 300px; width: 200px; border:1px solid #CCC; overflow: auto}
#box div {position: absolute; height: 20px; width: 100%; left: 0; overflow: hidden; font: 16px/20px Courier;}
</style>

<div id="box"></div>

<script type="text/javascript">
var total = 1e5
  , len = total
  , height = 300
  , delta = 20
  , num = height / delta
  , data = [];

for(var i = 0; i < total; i++){data.push({content: "item-" + i});
}

var box = document.getElementById("box");
box.onscroll = function(){
    var sTop = box.scrollTop||0
      , first = parseInt(sTop / delta, 10)
      , start = Math.max(first - num, 0)
      , end = Math.min(first + num, len - 1)
      , i = 0;

    for(var s = start; s <= end; s++){var child = box.children[s];
        if(!box.contains(child) && s != len - 1){insert(s);
        }
    }

    while(child = box.children[i++]){var index = child.getAttribute("data-index");
        if((index > end || index < start) && index != len - 1){box.removeChild(child);
        }
    }

};

function insert(i){var div = document.createElement("div");
    div.setAttribute("data-index", i);
    div.style.top = delta * i + "px";
    div.appendChild(document.createTextNode(data[i].content));
    box.appendChild(div);
}

box.onscroll();
insert(len - 1);
</script>

7.3 算法阐明

• 计算 start 和 end 节点

  
  Container 能够包容的 Data 数目为 num = height / delta，Container 顶部第一个节点的索引值为

  var first = parseInt(Container.scrollTop / delta)

  因为咱们高低都有留出一屏，所以

  var start = Math.max(first - num, 0)
  var end = Math.min(first + num, len - 1)

• 插入节点

  通过下面的计算，从 start 到 end 将节点一次插入到 Container 中，并且将最初一个节点插入到 DOM 中。

  // 插入最初一个节点
  insert(len - 1)
  // 插入从 start 到 end 之间的节点
  for (var s = start; s <= end; s++) {var child = Container.children[s]
    // 如果 Container 中曾经有该节点，或者该节点为最初一个节点则跳过
    if (!Container.contains(child) && s != len - 1) {insert(s)
    }
  }

  这里解释下为什么要插入最初一个节点，插入节点的形式是：

  function insert(i){var div = document.createElement("div");
  div.setAttribute("data-index", i);
  div.style.top = delta \* i + "px";
  div.appendChild(document.createTextNode(data[i].content));
  Container.appendChild(div);
  }

  能够看到咱们给插入的节点都加了一个 top 属性，最初一个节点的 top 是最大的，只有把这个节点插入到 DOM 中，能力让滚动条拉长，让人感觉放了很多的数据。

• 删除节点

  为了缩小浏览器的重排（reflow），咱们能够暗藏三屏之外的数据。我这里为了不便，间接给删除掉了，后续须要再从新插入。

  while ((child = Container.children[i++])) {var index = child.getAttribute('data-index')
    // 这里记得不要把最初一个节点给删除掉了
    if ((index > end || index < start) && index != len - 1) {Container.removeChild(child)
    }
  }

  当 DOM 加载结束之后，触发一次 Container.onscroll()，而后整个程序就 OK 了。