理解浏览器

114 阅读1分钟

理解浏览器

图 浏览器架构&Node.js架构

事件处理器概览

浏览器执行环境的核心思想基于:同一时刻只能执行一个代码片段,即所谓的单线程执行模型。

所有已生成的事件(无论是用户生成的,例如鼠标移动或键盘按压,还是服务器生成的,例如Ajax事件)都会放在同一个事件队列中,以它们被浏览器检测到的顺序排列。如图中部所示,事件处理的过程可以描述为一个简单的流程图。

  • 浏览器检查事件队列头;
  • 如果浏览器没有在队列中检测到事件,则继续检查;
  • 如果浏览器在队列头中检测到了事件,则取出该事件并执行相应的事件处理器(如果存在)。在这个过程中,余下的事件在事件队列中耐心等待,直到轮到它们被处理。

注册事件处理器

在客户端Web应用中,有两种方式注册事件。

  • 通过把函数赋给某个特殊属性window.onload = function(){};
  • 通过使用内置addEventListener方法。

处理事件

事件处理背后的的主要思想是:当事件发生时,浏览器调用相应的事件处理器。如前面提到的,由于单线程执行模型,所以同一时刻只能处理一个事件。任何后面的事件都只能在当前事件处理器完全结束执行后才能被处理!