之前，我们介绍了多进程架构和导航流程。 在这篇文章中，我们将看看渲染器进程内部发生了什么。 渲染进程涉及Web性能的诸多方面。 由于渲染进程中发生了很多事情，因此本文不能一一赘述。...渲染器进程处理Web内容 渲染器进程负责选项卡内发生的所有事情。 在渲染器进程中，主线程处理你为用户编写的大部分代码。...渲染器进程的核心工作是将HTML、CSS和JavaScript转换为用户可以与之交互的网页。 ?...图1：渲染器进程内部有主线程、工作线程、排版线程和栅格线程 解析 构建DOM 当渲染器进程收到导航的提交消息并开始接收HTML数据时，主线程开始解析文本字符串（HTML）并将其转换为文档对象模型（DOM—Document...然后通过IPC将合成器帧提交给浏览器进程。这时可以从UI线程添加另一个合成器帧以用于浏览器UI更改，或者从其他渲染器进程添加扩充数据。 这些合成器帧被发送到GPU用来在屏幕上显示。
使用webContents模块将信息从主进程发送到呈现器进程，并使用ipcRenderer模块为来自主进程的消息设置监听器 在前一章中，我们为第一个Electron项目打下了基础，这是一个笔记应用程序...---- 促进进程间通信 我们已经编写了用于在主进程中选择和读取文件的所有代码。但是我们如何将文件的内容发送到渲染器进程呢?如何从UI中触发主进程中的getFileFromUser()函数?...---- 将内容从主进程发送到渲染器进程 remote模块促进了渲染器进程访问主进程的能力,但是它不允许主进程访问渲染器进程。...---- 发送文件内容到渲染器进程 我们当前实现是读取用户选择的文件并打印到终端上，mainWindow.webContents.send()将文件的内容发送到渲染器进程中。...remote模块为主进程模块和函数提供代理，并使该功能在渲染器进程中可用。 我们可以使用webContents.send ()命令将消息从主进程发送到渲染器进程。
：实现Web平台规范，HTML规范(DOM、CSS、Web IDL) JavaScript：嵌入V8并运行JavaScript 网络：从底层网络堆栈请求资源 渲染：构建DOM树，计算样式和布局，嵌入合成器并绘制图形...提交导航 现在数据和渲染器进程已准备就绪，IPC将从浏览器进程发送到渲染进程以提交导航。渲染进程确认提交完成，导航完成。文档加载开始。...6) 创建合成器帧：收集绘制四边形的图块信息，通过IPC将合成器框架提交给浏览器进程 7) 浏览器UI合成：UI线程添加另一个合成器框架以用于浏览器UI更改，或者从其他渲染器进程添加扩展。...8) GPU展示：合成器帧被发送到GPU以在屏幕上显示。...2) 通过获取此信息，合成器线程可以确保在该区域中发生事件时将输入事件发送到运行JavaScript的主线程。如果输入事件来自该区域之外，则合成器线程在不等待主线程的情况下继续合成新帧。
渲染器进程涉及到 Web 性能相关的多个方面，由于渲染器进程中处理了很多的逻辑，不是一篇文章可以全面讲解的，因此本文仅作为一个概述。...#渲染器进程处理Web内容 所有选项卡内发生的逻辑，都由渲染器进程负责。在渲染器进程中，主线程处理了服务器发送给用户的大部分代码。...渲染器进程的核心工作是将 HTML，CSS 和 JavaScript 转换为用户可以与之交互的网页。...#解析 #构建 DOM 当渲染器进程收到一个导航请求，并开始接收 HTML 数据，主线程将开始处理文本字符串（HTML），将其解析成 DOM（Document Object Model）。...然后通过 IPC 将合成帧提交给浏览器进程。此时，可以从 UI 线程添加另一个合成帧用于浏览器的 UI 更新，或者从其他渲染器进程中添加扩展。这些合成帧被发送到 GPU 中，用以在屏幕上显示。
这个文档从底层描述了Chromium是如何展示网页的。请确认你已经读过多进程架构这篇文章。你会特别想要了解主要组件的框架。你也可能对多进程资源加载感兴趣，以了解网页是如何从网络中获取到的。...它易于嵌入，允许多进程将HTML绘制成View。查看content module pages以获得更多信息。 Browser: 代表浏览器窗口，包含多个WebContent。...渲染线程是主要的对象，比如RenderView和所有的WebKit代码运行的地方。当它与浏览器交流时，消息一开始发送到主线程，主线程轮流分发消息给浏览器进程。...在其他情况里，这允许我们从渲染器同步发送消息到浏览器。当一个来自浏览器的结果是用于后续操作时，这可以用于小量的操作。一个例子是，JavaScript从网页请求cookie。...渲染器线程会阻塞，主线程会让所有的接收到的消息排队，直到得到正确的响应。此时任何接收到的消息会突然发送给渲染器线程以执行普通的处理。 浏览器进程 ?
本章主要内容: 使用JavaScript Set数据结构跟踪多个窗口 促进主进程和多个渲染器进程之间的通信 使用Node APIs检查应用程序运行在那个平台上 现在，当Fire Sale启动时，它为...我们还将探讨在将一个主进程配置为与一个渲染器进程通信，并对其进行重构以管理可变数量的渲染器进程时出现的问题的解决方案。本章末尾的完整代码可以在http://tinyurl.com/y4z9oj69。...它在dialog.showOpenDialog()中引用，以在macOS中将对话框显示为工作表。最重要的是，在从文件系统读取文件内容并将其发送到窗口之后，openFile()中引用了它。...图5.3 要确定要将文件的内容发送到那个窗口，渲染器进程在与调用getFileFromUser()的主进程通信时必须发送对自身的引用。...}; ---- 将对当前窗口的引用传递给主进程 从文件系统读取文件内容之后，我们将文件的路径和内容作为第一个参数传入并发送到窗口。
如果导航重定向跨站点，则可能不会使用此备用进程，在这种情况下可能需要不同的进程。 第4步：提交导航 现在数据和渲染器进程已准备就绪，IPC将把导航从浏览器进程发送到渲染器进程以进行提交。...然后，它经历与浏览器进程启动导航相同的过程。 唯一的区别是导航请求从渲染器进程发送到浏览器进程。...如果将service worker设置为从缓存加载页面，则无需从网络请求数据。 要记住的重要一点是Service Worker是在渲染器进程中运行的JavaScript代码。...图11：浏览器进程中的UI线程启动渲染器进程以处理Service Worker; 然后，渲染器进程中的工作线程从网络请求数据 导航预加载 可以看到，如果Service Worker最终决定从网络请求数据...在下一篇文章中，我们将深入探讨浏览器如何处理HTML/ CSS/JavaScript来呈现页面。 求分享 如果你觉得这篇文章对你有帮助，请点击右下角的 “?好看” 并分享给小伙伴们↘️↘️↘️??
在 Chrome 中，地址栏同时具备搜索查询的功能，因此 UI 线程需要解析并确定是将请求发送到搜索引擎，还是发送到待请求的网站。 2....如果判断是HTML文件，那么下一步就是将数据，传递给渲染器进程，但如果它是 zip 文件或其他文件，则表示这是下载请求，因此需要将数据传递给下载管理器。...提交导航 现在数据和渲染器进程已经准备就绪，为了提交导航，IPC 将从浏览器进程发送一个数据流到渲染器进程。因为此处传递的是一个数据流，渲染器进程可以继续从数据流中接收 HTML 数据。...如果导航是从渲染器进程发起的，例如用户点击超链接或JavaScript代码执行 window.location="https://newsite.com"，则渲染器进程首先检查 beforeunload...在下一篇文章中，我们将深入探讨浏览器如何处理 HTML/CSS/JavaScript 并呈现在页面上。 如果本文有帮助，留言、点赞和转发，是最大的支持，谢谢！
所有BrowserWindow实例都有一个web content属性，该属性具有几个有用的特性，比如将HTML文件加载到渲染器进程的窗口中、从主进程向渲染器进程发送消息、将页面打印为PDF或打印机等等。...我们将以下代码添加到app/main.js中，以告诉渲染器进程在我们之前创建的窗口中加载这个HTML文档。 列表2.6 将HTML文档加载到主窗口: ....从渲染进程加载代码 从渲染器进程加载的HTML文件中，我们可以像在传统的基于浏览器的web应用程序中一样加载可能需要的任何其他文件－即和标签。...在渲染器进程中添加样式 当我们在Electron应用程序中引用样式表时，很少会发生意外。稍后，我们将讨论如何使用Sass而不是Electron。...在电子应用程序中添加样式表与在传统web应用程序中添加样式表没有多大不同。尽管如此，一些细微差别还是值得讨论的。 让我们从将style.css文件添加到应用程序目录开始。
本章主要内容: 介绍我们将在接下来的几章中构建的应用程序 配置我们的CSS样式表，使其看起来更像一个本机应用程序 回顾在Electron中主进程和渲染器进程之间的关系 为我们的主进程和渲染器进程实现基本功能...我们的应用程序将由两个窗格组成，用户可以编写或编辑Markdown和一个右窗格，该窗格以HTML形式呈现用户的Markdown。...[figure34.jpg] 图3.4 主进程将创建一个渲染器程序进程并告诉它加载index.html。然后，它将像在浏览器中一样加载CSS和JavaScript。...box-sizing属性在CSS中处理一个历史上的奇怪现象，在一个宽度为200像素的元素中添加50个像素的填充将导致它的宽度为300像素(每边添加50个像素的填充)，对于边框也是一样。...Chrome开发工具在所有渲染器进程中都可用，可以从默认的电子应用程序、键盘快捷键或主进程触发。 此时Electron中还没有完全支持Node Inspector检查器。
本章主要内容: 介绍我们将在接下来的几章中构建的应用程序 配置我们的CSS样式表，使其看起来更像一个本机应用程序 回顾在Electron中主进程和渲染器进程之间的关系 为我们的主进程和渲染器进程实现基本功能...我们的应用程序将由两个窗格组成，用户可以编写或编辑Markdown和一个右窗格，该窗格以HTML形式呈现用户的Markdown。...图3.4 主进程将创建一个渲染器程序进程并告诉它加载index.html。然后，它将像在浏览器中一样加载CSS和JavaScript。...box-sizing属性在CSS中处理一个历史上的奇怪现象，在一个宽度为200像素的元素中添加50个像素的填充将导致它的宽度为300像素(每边添加50个像素的填充)，对于边框也是一样。...Chrome开发工具在所有渲染器进程中都可用，可以从默认的电子应用程序、键盘快捷键或主进程触发。 此时Electron中还没有完全支持Node Inspector检查器。
大多数消息通过主渲染线程从浏览器发送给WebKit线程，反之亦然。这个额外的线程是用于支持同步的渲染器到浏览器的消息（参考下面的“同步消息”）。...消息是否是独立类型在于，消息是从浏览器发送到渲染器，还是从渲染器到浏览器。从浏览器到渲染器的被称为View消息，因为它们被发送给RenderViewHost。...插件也有独立的进程。像渲染消息那样，PluginProcess消息（从浏览器发送到插件进程）和PluginProcessHost消息（从插件进程发送到浏览器）。...RenderProcessHost安装一个RenderMessageFilter对象执行这种过滤。 同步消息 有些消息应该从渲染器的角度来同步。...这种消息的例子是拼写检查以及在javaScript中获取cookie。同步浏览器到渲染器的IPC是不允许的，以此避免在一个潜在的片段渲染器中阻塞用户界面。 警告: 不要在UI线程处理任何同步消息！
页面导航前面我们介绍了一个 HTTP 的请求过程，该部分内容更倾向于将浏览器当成一个完整的对象，来介绍浏览器与外界的交互过程。...当数据和渲染器进程都准备好后，HTML 数据通过 IPC 从浏览器进程传递到渲染器进程中。渲染器进程接收 HTML 数据后，将开始加载资源并渲染页面。...页面渲染前面说过，渲染器进程负责选项卡内部发生的所有事情，它的核心工作是将 HTML、CSS 和 JavaScript 转换为可交互的页面。...解析渲染器进程的主线程会解析以下内容：解析 HTML 内容，产生一个 DOM 节点树解析 CSS，产生 CSS 规则树解析 Javascript 脚本。...合成器线程通过 IPC 提交给浏览器进程，这些合成器帧被发送到 GPU 进程处理，并显示在屏幕上。合成的真正目的是，在移动合成层的时候不用重新光栅化。
它处理从web服务器获取和呈现HTML、加载任何引用的CSS和JavaScript、相应地设计页面样式并执行JavaScript。 考虑Chromium最简单的方法是考虑它没有做什么。...除非特殊情况(例如，您正在构建一个聊天客户机)，否则电子应用程序可以像其他应用程序一样离线工作。 Electron如何工作 Electron由主进程和渲染器进程所组成。...如果你想要显示对话框去打开或者保存文件，可以从主进程中执行。 渲染进程 主进程可以使用Electron浏览器窗口模块创建和销毁渲染器进程，渲染器进程可以加载web页面来显示用户界面。...电子还包括自动下载更新和错误崩溃上报，NW.js不支持。 NW.js应用程序从HTML页面启动，每个浏览器窗口共享一个Node 进程。如果打开多个窗口，它们都共享同一个Node进程。...Electron将Node和浏览器进程分开。在Electron,你从Node启动一个主进程。这个主进程可以打开浏览器窗口，每个都有自己的进程。电子提供了主进程和浏览器窗口之间的通讯接口，在这本书。
背景知识 所有网络交流都是在主浏览器进程处理的。这样浏览器进程不仅可以控制每个渲染器的网络访问，还可以在进程间维持session状态一致性，像cookie和缓存数据。...概述 我们的多进程应用程序可以从三个层面来看。在最底层是WebKit库，用来渲染页面。在它上面是渲染器进程（简单地，每个标签页对应一个进程），每个进程包含一个WebKit实例。...管理所有渲染器的是浏览器进程，控制所有的网络访问。 ? Blink（刷新器） Blink有一个ResourceLoader对象，负责获取数据。每个加载器有一个WebURLLoader以展现真实的请求。...浏览器 浏览器中的RenderProcessHost对象从每个渲染器接收IPC请求。...::Receiver和request ID会被用于将通知发送给正确的RenderProcessHost，以将其发回给渲染器。
我们把运行UI、管理标签页和插件进程的主进程称为“浏览器进程”或“浏览器”，把特定标签页进程称为“渲染进程”或“渲染器”。渲染进程使用开源布局引擎 Blink 来解释和布局 HTML。...译者注：为了突出“进程”的概念，译文中统一使用“浏览器进程”和“渲染进程”。在日常表述中，用“浏览器”和“渲染器”更多些。 ?...从浏览器进程到特定内容标签页的通信是由 RenderViewHost完成负责的，它知道如何通过 RenderProcessHost将消息发送到 RenderProcess，再到 RenderView。...目前，我们会显示一个哭脸标签页，以通知用户渲染器已经崩溃。你可以按 reload 按钮重新加载此页面，也可以在此页签中打开一个新导航。当发生这种情况时，我们会创建一个新进程。...站点隔离项目旨在为渲染进程提供更多的隔离，此项目的一个早期版本可以在隔离进程中运行 Chrome 的 HTML/JavaScript 内容扩展。
浏览器Browser是「主进程」，代表所有的用户界面和I/O 负责运行用户界面并管理渲染器Renderer和其他进程 也称为"浏览器进程"或简称为浏览器Browser 渲染器Renderer是由浏览器进程...Browser Process驱动的「子进程」 渲染器使用Blink开源布局引擎来解释和布局HTML。...❝可以看到「一个真实的网页是由数千行HTML、CSS和JavaScript代码的纯文本形式的所组成」 网页的「源代码是渲染器Renderer的输入」 ❞ ---- 何为像素Pixels ❝像素Pixels...HTML/CSS/JavaScript等数据类型进行转换，并且输入到 OpenGL 以被调用，以显示像素。...绘制操作被发送到GPU进程进行光栅化。「GPU进程可以发出真正的OpenGL调用」。
简介 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。...通过预加载脚本从渲染器访问Node.js。 现在，最后要做的是输出Electron的版本号和它的依赖项到你的web页面上。 在主进程通过Node的全局 process 对象访问这个信息是微不足道的。...然而，你不能直接在主进程中编辑DOM，因为它无法访问渲染器 文档 上下文。 它们存在于完全不同的进程！ 注意：如果您需要更深入地了解Electron进程，请参阅 进程模型 文档。...这是将 预加载 脚本连接到渲染器时派上用场的地方。 预加载脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。...额外：将功能添加到您的网页内容 此刻，您可能想知道如何为您的应用程序添加更多功能。 对于与您的网页内容的任何交互，您想要将脚本添加到您的渲染器进程中。
# 简介 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。... html> 注意：在这个HTML文本中，您会发现主体文本中丢失了版本编号。 稍后我们将使用 JavaScript 动态插入它们。...# 通过预加载脚本从渲染器访问Node.js。 现在，最后要做的是输出Electron的版本号和它的依赖项到你的web页面上。...在主进程通过Node的全局 process 对象访问这个信息是微不足道的。 然而，你不能直接在主进程中编辑DOM，因为它无法访问渲染器 文档 上下文。 它们存在于完全不同的进程！...注意：如果您需要更深入地了解Electron进程，请参阅 进程模型 (opens new window) 文档。 这是将 预加载 脚本连接到渲染器时派上用场的地方。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
