resnet101网络
我来告诉你个故事吧。 如果为我们的设计系统构建另一个日期选择器组件。 由文本输入和带有日历的弹出窗口组成，单击以显示日历。 然后，可以在外部单击或选择日期以关闭弹出窗口。
大多数外部单击逻辑的实现都是通过将实际的单击侦听器附加到DOM来实现的。 但是，因为想构建可访问的日期选择器，所以可以使用选项卡打开日历，并以相同的方式关闭。 此外，如果在页面上放置了多个日期选择器，则单击监听程序可能会发生冲突。
如果我只能依靠本地焦点和模糊事件而不是检测外部点击，该怎么办？ 它自然支持选项卡，触摸并单击事件，并在浏览器中实现。 在这种情况下，唯一需要解决的问题是，单击弹出窗口没有选择日期。 焦点将转移到日历上，文本输入将触发模糊事件，最终关闭弹出窗口。
在这一点上，我开始怀疑是否可以点击，但没有转移焦点。 在快速游览之后，我找到了一种方法来阻止mouseDown事件对弹出窗口的默认操作。 所有点击都有效，例如一行，但重点是文本输入。
这似乎就是解决办法，让我们继续前进，但我心中的某件事阻止了我。 为什么指定mouseDown而不是mouseUp来阻止焦点，但要传播单击？ 这是生活水平的一部分吗？ 我们可以依靠吗？ 可以在浏览器之间工作吗？ 也不支持用于集成测试的React Testing库。 需要变更模拟功能。
什么是网络标准？
那么，堆栈概述的答案对我来说还不够，所以有什么地方比Web标准更了解浏览器的行为呢？
你可能听说过W3C或全球网络联盟。 这是一个为网络开发开放标准的国际社区。 W3C保证每个人都遵循相同的准则，不需要支持几十种截然不同的环境。 访问他们的网站，就会找到他们制定的所有标准的列表。
查看可能回答我们问题的文档- ui事件标准。 本文档指定DOM事件流，并定义事件列表及其执行顺序。 如果您认为标准无聊、难以理解和难以理解，请直接转至DOM Event Architecture部分。 在此部分中，事件会冒泡、捕获和显示漂亮的图像，但仍然是标准的。 它的质量令人吃惊。 它确实写得很好，附有很多例子和建议。
它还定义mouseDown事件及其默认操作。
“许多实现都使用mousedown事件来启动各种上下文相关的默认操作。 取消此事件可以防止使用这些默认操作。 默认操作包括：拖动图像和链接&； 包括开始放下操作、开始文本选择等。 此外，一些实现还提供了鼠标驱动平移功能，在调度mousedown事件时按鼠标中键可以激活该功能。 ”
是的。 因此，我们的事件有一些缺省操作，但实际上取决于浏览器的实现，因此没有具体说明焦点。 检查一下吧。
浏览器引擎概述
现代浏览器是一个非常复杂的软件，代码库包含数千万行代码。 因此，通常分为几个部分。
要找到定义焦点事件的位置，必须获取每个部分负责的摘要。 让我们使用Chrome及其设计文档来查看Chrome的源代码。 如你所见，有很多模块负责各种逻辑。
让我简单说明一下它们是如何协同工作的。
chrome:这是具有启动逻辑、UI和所有窗口的基本APP应用程序。 包含chrome.exe和chrome.dll项目。 图标和光标等资源也在这里。content:处理与子进程通信的APP应用程序的后端。net:这是一个有助于联系网站的网站库。base:所有子项目之间共享公共代码的位置。 这可能包括字符串操作、通用实用程序等。眨眼:这是一个渲染引擎，负责整个渲染管道，包括DOM树、样式、事件和V8集成。v8:浏览器的最后一部分-Javascript引擎。 它的工作是将JavaScript编译成本地计算机代码。
如您所见，浏览器由几个独立的部分组成，这些部分通过API相互通信。 对于开发人员来说，dsdsb的部分通常是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中的活动名称进行搜索：
它将我们引至EventHandler文件，您可以在其中找到许多输入事件的实现细节。 包括对我们来说最重要的一行：
bool swallowEvent = !dispatchMouseEvent(EventTypeNames::mousedown, mev.innerNode(), m_clickCount, mouseEvent);
dispatchMouseEvent返回值的意思是“继续默认处理”，因此在使用preventDefault情况下swallowEvent为true 。
在下面，有一个对焦点事件的调用，只有在swallowEvent == false才会触发该事件。
除了焦点处理之外，您还可以浏览鼠标按下事件的所有默认操作，包括选择，拖放和滚动条大小写。 它还实现了鼠标释放和双击事件-一切都在那里。
壁虎和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网络