javascript 计算两个坐标的距离米_javascript（运行时的页面构建过程）

最新推荐文章于 2021-12-03 15:55:54 发布

weixin_39826342

最新推荐文章于 2021-12-03 15:55:54 发布

阅读量105

点赞数

文章标签： javascript 计算两个坐标的距离米

2.1 生命周期概览

典型客户端Web应用的生命周期从用户在浏览器地址栏输入一串URL，或单击一个链接开始。例如我们访问百度网站。首先我们输入了URL, www.baidu.com，过程如图2.1所示

图2.1

客户端Web应用的周期从用户指定某个网站地址(或单击某个链接)开始，其由两个步骤组成：页面构建和事件处理 1．页面构建——创建用户界面； 2．事件处理——进入循环(序号5)从而等待事件(序号6)的发生，发生后调用事件处理器。

2.2 页面构建阶段

当Web应用能被展示或交互之前，其页面必须根据服务器获取的响应(通常是HTML、CSS和JavaScript代码)来构建。页面构建阶段的目标是建立Web应用的UI，其主要包括两个步骤：

1．解析HTML代码并构建文档对象模型(DOM)；

2．执行JavaScript代码。

步骤1会在浏览器处理HTML节点的过程中执行，步骤2会在HTML解析到特殊脚本节点(包含或引用script节点)时执行，两个步骤交替执行多次

HTML解析和DOM构建

面构建阶段始于浏览器接收HTML代码时，该阶段为浏览器构建页面UI的基础。通过解析收到的HTML代码，构建一个个HTML元素，构建DOM。在这种对HTML结构化表示的形式中，每个HTML元素都被当作一个节点。

尽管DOM是根据HTML来创建的，两者紧密联系，但需要强调的是，它们两者并不相同。你可以把HTML代码看作浏览器页面UI构建初始DOM的蓝图。为了正确构建每个DOM，浏览器还会修复它在蓝图中发现的问题。

注意：如果页面中的head元素中错误地包含了一个paragraph元素。head元素的一般用途是展示页面的总体信息，例如，页面标题、字符编码和外部样式脚本，而不是用于类似本例中的定义页面内容。故而这里出现了错误，浏览器会静默修复错误，将段落元素放入了理应放置页面内容的body元素中，会构造正确的DOM

2.2.2 执行JavaScript代码

所有包含在脚本元素中的JavaScript代码由浏览器的JavaScript引擎执行，例如，Firefox的Spidermonkey引擎，Chrome和Opera和V8引擎和Edge的(IE的)Chakra引擎。由于代码的主要目的是提供动态页面，故而浏览器通过全局对象提供了一个API使JavaScript引擎可以与之交互并改变页面内容。

在页面构建阶段执行JavaScript代码

当浏览器在页面构建阶段遇到了脚本节点，它会停止HTML到DOM的构建，转而开始执行JavaScript代码，也就是执行包含在脚本元素的全局JavaScript代码(以及由全局代码执行中调用的函数代码)。

图2.2

上图2.2 显示了在全局JavaScript代码被执行后DOM的状态。首先了一个addMessage函数

function addMessage (element,message){        var messageElement = document.createElement("li")        messageElement.textContent = message        element.appendChild(messageElement)     }     var first = document.getElementById("first")     addMessage(first,"page loading")     document.body.addEventListener("mousemove",function (){         var second = document.getElementById("second")         addMessage(second,"event: mousemove")     })     document.body.addEventListener("click",function (){         var second = document.getElementById("second")         addMessage(second,"event: click")     })复制代码

这个例子中，JavaScript通过创建一个新元素并将其插入DOM节点修改了当前的DOM结构。一般来说，JavaScript代码能够在任何程度上修改DOM结构：它能创建新的接单或移除现有DOM节点。但它依然不能做某些事情，例如选择和修改还没被创建的节点。这就是为什么要把script元素放在页面底部的原因。如此一来，我们就不必担心是否某个HTML元素已经加载为DOM。

一旦JavaScript引擎执行到了脚本元素中,JavaScript代码的最后一行，浏览器就退出了JavaScript执行模式，并继将余下的HTML构建为DOM节点。在这期间，如果浏览器再次遇到脚本元素，那么从HTML到DOM的构建再次暂停，JavaScript运行环境开始执行余下的JavaScript代码。需要重点注意：JavaScript应用在此时依然会保持着全局状态。所有在某个JavaScript代码执行期间用户创建的全局变量都能正常地被其他脚本元素中的JavaScript代码所访问到。其原因在于全局window对象会存在于整个页面的生存期之间，在它上面存储着所有的JavaScript变量。只要还有没处理完的HTML元素和没执行完的JavaScript代码，下面两个步骤都会一直交替执行。

1．将HTML构建为DOM。

2．执行JavaScript代码。

最后，当浏览器处理完所有HTML元素后，页面构建阶段就结束了。随后浏览器就会进入应用生命周期的第二部分：事件处理。

2.3 事件处理

客户端Web应用是一种GUI应用，也就是说这种应用会对不同类型的事件作响应，如鼠标移动、单击和键盘按压等。因此，在页面构建阶段执行的JavaScript代码，除了会影响全局应用状态和修改DOM外，还会注册事件监听器(或处理器)。这类监听器会在事件发生时，由浏览器调用执行。有了这些事件处理器，我们的应用也就有了交互能力。在详细探讨注册事件处理器之前，让我们先从头到尾看一遍事件处理器的总体思想

2.3.1 事件处理器概览

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

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

● 浏览器检查事件队列头；

● 如果浏览器没有在队列中检测到事件，则继续检查；

● 如果浏览器在队列头中检测到了事件，则取出该事件并执行相应的事件处理器(如果存在)。

在这个过程中，余下的事件在事件队列中耐心等待，直到轮到它们被处理。由于一次只能处理一个事件，所以我们必须格外注意处理所有事件的总时间。执行需要花费大量时间执行的事件处理函数会导致Web应用无响应！

图2.3

题注

2.3.2 注册事件处理器

事件处理器是当某个特定事件发生后我们希望执行的函数。为了达到这个目标，我们必须告知浏览器我们要处理哪个事件。这个过程叫作注册事件处理器。在客户端Web应用中，有两种方式注册事件。

● 通过把函数赋给某个特殊属性；

如document.body.onclick = function (){}

● 通过使用内置addEventListener方法。

注意：函数赋值给特殊属性是一种简单而直接的注册事件处理器方式。但是，我们并不推荐你使用这种方式来注册事件处理器，这是因为这种做法会带来缺点：对于某个事件只能注册一个事件处理器。也就是说，一不小心就会将上一个事件处理器改写掉。幸运的是，还有一种替代方案：addEventListener方法让我们能够注册尽可能多的事件，只要我们需要

2.3.3 处理事件

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

在事件处理阶段中，事件循环会检查队列，其发现队列的前面有一个鼠标移动事件，然后执行了相应的事件处理器序号2。当鼠标移动事件处理器处理完毕后，轮到了等待在队列中的单击事件。当鼠标移动事件处理器函数的最后一行代码执行完毕后，JavaScript引擎退出事件处理器函数，鼠标移动事件完整地处理了序号3，事件循环再次检查队列。这一次，在队列的最前面，事件循环发现了鼠标单击事件并处理了该事件。一旦单击处理器执行完成，队列中不再有新的事件，事件循环就会继续循环，等待处理新到来的事件。这个循环会一直执行到用户关闭了Web应用。

图2.4

2.4 小结

● 浏览器接收的HTML代码用作创建DOM的蓝图，它是客户端Web应用结构的内部展示阶段。

● 我们使用JavaScript代码来动态地修改DOM以便给Web应用带来动态行为。

● 客户端Web应用的执行分为两个阶段。- 页面构建代码是用于创建DOM的，而全局JavaScript代码是遇到script节点时执行的。

-在这个执行过程中，JavaScript代码能够以任意程度改变当前的DOM，还能够注册事件处理器——事件处理器是一种函数，当某个特定事件(例如，一次鼠标单击或键盘按压)发生后会被执行。注册事件处理器很容易：使用内置的addEventListener方法。

-事件处理——在同一时刻，只能处理多个不同事件中的一个，处理顺序是事件生成的顺序。事件处理阶段大量依赖事件队列，所有的事件都以其出现的顺序存储在事件队列中。事件循环会检查实践队列的队头，如果检测到了一个事件，那么相应的事件处理器就会被调用。

最后，咱给小编：

1. 点赞+关注

2. 点头像关注后多多评论，转发给有需要的朋友。

谢谢！！