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标准和浏览器实现细节。

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

相关链接以供进一步阅读

• 您知道什么是DOM吗？ 它如何在内部表示？ 事件的目的是什么？ 我向从初学者到经验丰富的开发人员的所有人都强烈推荐DOM Standard 。 “一个事件表示一个事件，而不是一个动作。” -我最喜欢的部分。
• W3C社区的官方网站。
• 四处浏览Chromium代码库 。
• Chromium开发人员发布的设计文件 。
• 像素寿命 -Chrome渲染管道简介。
  

翻译自: https://hackernoon.com/web-standards-101-ku9w3wg7

resnet101网络