游览器中javascript的执行过程(图文)_javascript技巧

1. 大多数游览器的组件构成如图

在最底层的三个组件分别是网络，UI后端和js解释器。作用如下：
（1）网络－ 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作
（2）UI 后端－ 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口
（3）JS解释器－ 用来解释执行JS代码

ps：上图和知识点主要来自《HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN WEB BROWSERS》 想深入了解的同学可以重点看下。
2. 大多数游览器（比如chrome）让一个单线程共用于执行javascrip和更新用户界面。这个线程通常被称为“游览器UI线程”， 每个时刻只能执行其中一种操作，这意味着当Javascript代码正在执行时用户界面无法响应输入，反之亦然。这样做是因为javascript代码的作用就是操作DOM更新用户界面，用同一个线程来做负责这两件事情可以更高效
3. 游览器UI线程的工作基于一个简单的队列系统，任务会被保存到队列中直到进程空闲。一旦空闲，队列中的下一个任务就被重新提取出来并运行。这些任务要么是运行javascript代码，要么执行UI更新，包括重绘和重排。
4. 重点再强调下，javascript是单线程运行，千万别被setTimeout()和setInterVal()这种函数迷惑而误以为它是多线程。
ok，基础点讲解完毕，让我们进入正题，来讲解在游览器中javascript的执行过程。
一、原理
一般而言，