resnet101网络_网络标准101

resnet101网络

让我告诉你一个故事。一旦我为我们的设计系统构建了另一个日期选择器组件。它由文本输入和带有日历的弹出窗口组成，单击可显示日历。然后，可以在外部单击或选择日期来关闭弹出窗口。

外部点击逻辑的大多数实现都是通过将实际点击侦听器附加到DOM来完成的。但是，我想构建可访问的日期选择器，因此您可以使用选项卡打开日历并以相同的方式关闭。此外，如果您在页面上放置了多个日期选择器，则单击侦听器可能会彼此冲突。

如果您仅可以依靠本机焦点和模糊事件而不是检测外部点击怎么办？它们自然支持选项卡，触摸和单击事件，并且已经在浏览器中实现。在这种情况下，您需要解决的唯一问题是单击弹出窗口但没有选择日期：焦点转移到日历，在文本输入上触发模糊事件并最终关闭弹出窗口。

在这一点上，我开始怀疑是否可以单击但不转移焦点。快速浏览之后，我找到了一种方法：阻止mouseDown事件对弹出窗口的默认操作。就像一行一样，所有单击均有效，但重点仍然放在文本输入上。

看来这就是解决方案，让我们继续前进，但是我内心的某件事阻止了我。为什么要专门指定mouseDown而不是mouseUp阻止焦点但传播点击？这是生活水平的一部分吗？我们可以依靠吗？它可以跨浏览器工作吗？我们用来进行集成测试的React Testing库也不支持它，我必须更改仿真功能。

什么是网络标准？

好吧，由于Stack Overflow的答案对我来说还不够，因此，与Web标准相比，还有什么地方比Web标准更好地了解浏览器行为？

您可能听说过W3C或万维网联盟。这是一个为Web开发开放标准的国际社区。 W3C确保每个人都遵循相同的准则，并且我们不必支持数十种完全不同的环境。如果您访问他们的网站，则会找到他们正在制定的所有标准的列表。

让我们看一个可能回答我们问题的文档-UI Events Standard 。该文档指定DOM事件流，定义事件列表及其执行顺序。如果您认为标准无聊，晦涩难懂且难以理解，请直接转到DOM Event Architecture部分，该部分说明事件冒泡和捕获并带有漂亮的图片，并且仍然非常标准。它的质量会让您感到惊讶，它的确写得很好，并带有许多示例和建议。

它还定义了mouseDown事件及其默认操作：

“许多实现都使用mousedown事件来启动各种上下文相关的默认操作。如果取消了此事件，则可以防止使用这些默认操作。其中一些默认操作可能包括：开始与图像或链接的拖放交互，开始文本选择等。此外，某些实现提供了鼠标驱动的平移功能，该功能在调度mousedown事件时按下鼠标中键时被激活。”

好的，因此我们的事件具有一些默认操作，但是焦点没有具体说明，因为它实际上取决于浏览器的实现。让我们检查一下。

浏览器引擎简介

现代浏览器是一款非常复杂的软件，其代码库包含数千万行代码。因此，通常将其分为几部分。

为了找到定义焦点事件的地方，我们需要获得每个部分负责的概览。让我们用Chrome及其设计文档开始逛逛Chrome的源代码。如您所见，有许多模块负责不同的逻辑。

让我们简要介绍一下它们，以了解它们如何协同工作。

chrome ：这是具有启动逻辑，UI和所有窗口的基本应用程序。它包含chrome.exe和chrome.dll的项目。您还可以在此处找到诸如图标或光标之类的资源。
content ：它是应用程序的后端，用于处理与子进程的通信。
net ：这是有助于对网站进行查询的网络库。
base ：所有子项目之间共享通用代码的地方。这可能包括字符串操作，通用实用程序等。
眨眼：这是一个渲染引擎，负责整个渲染管道，包括DOM树，样式，事件，V8集成。
v8 ：浏览器的最后一部分-Javascript引擎。它的工作是将JavaScript编译为本地机器代码。

如您所见，浏览器由几个独立的部分组成，这些部分通过API相互通信。对于开发人员来说，最有趣的部分通常是Blink和V8。浏览器定义的默认操作不是V8的一部分，但是Blink应该定义并实现所有这些操作。但是在进入Blink代码库之前，让我们从用户的角度了解Web浏览器的工作方式。

渲染管线

假设您在浏览器中输入域名，然后它会获取并加载一堆资产：HTML，CSS和JS文件，图像，图标。但是接下来会发生什么呢？

第一步，将解析HTML文件并将其转换为DOM树 。 DOM不仅是页面的内部表示形式，还是暴露给Javascript的API，用于通过称为“绑定”的系统查询或修改呈现。

在DOM树之后，下一步是处理CSS样式。为此，浏览器具有一个CSS解析器，可构建样式规则的模型。建立了样式规则模型之后，我们可以将它们与浏览器提供的一组默认样式合并在一起，并为每个DOM元素计算每个样式属性的最终值。此过程称为样式解析（或recalc） 。

在下一个布局部分，我们需要确定所有元素的视觉几何形状。在此阶段，每个元素都会获得其坐标（x和y），宽度和高度。布局引擎计算并保留所有溢出区域的记录-哪些部分可见，哪些不可见。

当我们获得了所有元素的所有坐标时，就该绘画了 。对于此操作，我们使用上一步中的坐标和样式规则中的颜色，并将它们组合为绘画说明列表。重要的是，以正确的顺序绘制元素，以便在重叠时正确堆叠它们。您可以通过z-index样式规则修改订单。

让我们执行绘画指令列表，并将其转换为颜色值的位图。这个阶段称为光栅。此刻，我们还拍摄图像并将其解码为位图。

稍后，栅格化的位图将存储在GPU内存中。此阶段包括提取硬件的库，并在Windows上发出对OpenGL和DirectX的调用。 GPU收到显示位图的指令时，会在屏幕上绘制像素。

现在，我们有了渲染管线中最重要的部分。但是，如果滚动页面或应用某些动画会发生什么？实际上，渲染不是静态的。变化通过动画帧表示。每个帧都是在特定时间点的内容状态的完整呈现。在此过程中，真正的挑战是其性能。流畅的动画需要每秒至少生成60帧。几乎不可能在一秒钟内完成60条完整的流水线，特别是在速度较慢的设备上。

如果不是总是重新渲染所有内容，而是提供一种在特定阶段使元素无效的方法，该怎么办？例如，如果您动态更改按钮的颜色，浏览器会将该节点标记为无效，并将在下一个动画帧上重新渲染该节点。如果什么都没有改变，我们可以重用旧框架。

这是优化内容中较小动态变化的好方法。让我们考虑一下大内容区域的变化。例如，如果滚动页面，则所有像素现在必须都不同。为此，页面被分解为独立栅格化的图层。一层可能很小，仅代表一个DOM节点。然后，这些层将在另一个称为合成器线程的线程上组合在一起。通过此优化，您无需重新栅格化所有内容，而只需对较小的图层进行栅格化，然后将它们正确组合在一起即可。

现在，我们对Blink的功能以及渲染管道的外观有了一些概述。让我们深入研究代码。

导航眨眼代码库

看来我们终于到了终点线。让我们打开Blink存储库，环顾四周。

我们很快就能意识到，尽管我们从最初的问题中缩小了很多范围，但仍然无法手动找到负责防止焦点的特定代码行。

让我们尝试通过Google中的活动名称进行搜索：

mousedown site:https://chromium.googlesource.com/chromium/blink/+/master/Source

它将我们引至EventHandler文件，您可以在其中找到许多输入事件的实现细节。包括对我们来说最重要的一行：

bool swallowEvent = !dispatchMouseEvent(EventTypeNames::mousedown, mev.innerNode(), m_clickCount, mouseEvent);

dispatchMouseEvent返回值的意思是“继续默认处理”，因此在使用preventDefault情况下swallowEvent为true 。

在下面，有一个对焦点事件的调用，只有在swallowEvent == false才会触发该事件。

swallowEvent = swallowEvent || handleMouseFocus(MouseEventWithHitTestResults(mouseEvent, hitTestResult), sourceCapabilities);

除了焦点处理之外，您还可以浏览鼠标按下事件的所有默认操作，包括选择，拖放和滚动条大小写。它还实现了鼠标释放和双击事件-一切都在那里。

壁虎和WebKit

至此，我们已经花了一些时间来发现浏览器的源代码，并且对它们的结构有了很好的了解，所以为什么不一起检查Firefox和Safari。 Firefox的浏览器引擎称为Gecko，而Safari的-WebKit。

Gecko还为开发人员提供了概述页面，因此您可以了解它的主要概念。根据Chrome的经验，您可以找到整齐的6000行代码EventStateManager文件，其中包含事件的默认操作和行为。我在链接中包含了特定的行，因此您不必全部经历。

WebKit是Safari和其他Apple产品中使用的Apple浏览器引擎。 Chrome浏览器的Blink是从WebKit派生的，因此它们有很多共同点，并且在EventHandler文件的版本中查找事件实现不是问题。

现在，由于我们确定可以安全地阻止mousedown事件，因此我可以退后一步，并使用日期选择器完成PR。

结论

我们一起走过了一个简单的问题，开始介绍Web标准和浏览器实现细节。

即使是浏览器或编译器，也不必担心现有模块的隐藏复杂性。最后，这将是一次有趣的旅程。您有机会轻松找到需要改进的地方，更重要的是，获得对事情实际运行方式的独特见解。在这次深入学习中，我学到了很多东西，并鼓励每个人都做同样的事情。在我不确定为什么还需要其他任何内容的过程中，浏览器会提供出色的文档。