读JavaScript忍者秘籍——页面构建过程

客户端web应用的两个生命周期阶段

• 构建阶段
  浏览器根据html生成dom树，根据css生成css规则树。确定页面元素位置的过程称为回流，确定页面元素自身内部样式的过程称为重绘。回流涉及元素自身及其“周围”元素的位置确定，重绘只涉及元素自身的表现，因此，回流的成本高于重绘。
  渲染完毕后，浏览器开始解析并执行js文件，这个过程中就有可能触发回流和重绘。等到全局JS完全执行完毕，页面“真正”确定下来，接下来就等待用户交互。

• 事件循环阶段
  JS引擎会维护一个事件队列，不断检查队首是否有事件需要执行。其逻辑类似如下代码：

    while (true) {
        var eventHandler = eventHandlerQueue.pop()
        eventHandler()
    }

事件来源可以是用户操作，比如点击按钮，为UI添加事件监听的方式如下：

    // 事件目标对象的 addEventListener 方法
    eventTarget.addEventListener('eventName',function handler(){})
    // dom元素的事件属性
    eventTarget.onclick = function handler(){}

    click

或者我们可以自定义事件：

    // 创建事件目标对象，并为 customEvent 添加一个监听器
    var eventTarget = new EventTarget()
    eventTarget.addEventListener('customEvent', function handler(){})
    // 创建一个事件对象，在事件目标对象上分发一个 customEvent 事件
    var event = new Event('customEvent', { value: 'foo' })
    eventTarget.dispatchEvent('customEvent')

也可以是服务器响应：

    var xhr = new XMLHttpRequest()
    xhr.open(method, url)
    xhr.onreadystatechange = function handler() {}
    xhr.send()

当事件触发之后，引擎就会往事件队列队尾添加一个回调函数。

    eventQueue.put(handler)

当回调函数到达队首，则会被执行。基于以上的逻辑，触发事件仅仅是把回调函数放到事件循环队列，事件执行需要等到该回调函数出队。