网络浏览器如何工作？- 体系结构以及不同组件如何协同工作
- 渲染引擎的工作原理
- 下图说明了 Web 浏览器的各个部分以及它们如何相互交互。
用户界面：这是浏览器的用户界面。它包括地址栏，后退按钮，书签选项，刷新按钮等。 浏览器的用户界面没有在任何正式规范中指定，而是来自数十年经验（以及浏览器相互复制）形成的做法。 因此，所有浏览器的 UI 彼此非常相似。 浏览器引擎：浏览器引擎在浏览器的用户界面和浏览器的呈现引擎之间封送操作。 当您键入新网站并按 Enter 键时，浏览器 UI 将告知浏览器引擎，然后浏览器引擎将与呈现引擎进行通信。 渲染引擎：呈现引擎负责显示请求的内容。 渲染引擎将从网络层获取所请求文档的内容开始。 它接收 HTML 代码并对其进行分析以创建 DOM（文档对象模型）树。 然后，呈现引擎将解析 CSS 以构建 CSSOM（CSS 对象模型）。它就像DOM，但用于CSS而不是HTML。 在解析 CSS 和创建 CSSOM 时，浏览器会通过网络层下载其他资产，如 JavaScript 文件。 渲染引擎与 JavaScript 引擎通信以执行 JavaScript 代码并操作 DOM 和 CSSOM。 然后，渲染引擎采用 DOM 和 CSSOM，并将它们组合在一起以创建渲染树。 [url=https://res.cloudinary.com/practicaldev/image/fetch/s--oM2wbBCn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrtozqco4fros4qiij00.png] 然后，呈现引擎使用 UI 后端在屏幕上布置网站，最后在屏幕上绘制像素。 渲染引擎经历的整个过程称为关键渲染路径。 渲染引擎的示例包括：下面更详细地介绍 WebKit 的流程 [url=https://res.cloudinary.com/practicaldev/image/fetch/s--UQLd01kM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr56lckpiwg5hij1o8ty.png] 网络层网络层负责进行网络调用以获取资源。 它施加了正确的连接限制，格式化请求，处理代理，缓存等等。 您可以在此处阅读有关网络层的更多信息。 JavaScript EngineJavaScript 引擎用于在 DOM 或 CSSOM 上解析和执行 JavaScript 代码。JavaScript代码由Web服务器提供，也可以由Web浏览器（浏览器扩展或浏览器的功能，如自动广告拦截）提供。 早期的浏览器使用 JavaScript 解释器，但现代 JavaScript 引擎使用即时编译来提高性能。 JavaScript Engine 的例子包括用户界面后端：此图层负责绘制基本微件，如选择或输入框和窗口。在它下面使用操作系统 UI 方法。 呈现引擎在布局和绘制阶段使用 UI 后端层在浏览器上显示网页。 数据存储：浏览器需要在本地保存数据（Cookie、缓存等），因此数据存储组件会处理此部分。 现代浏览器还支持本地存储、IndexedDB 和 FileSystem 等存储机制
| 
发表于 2022-3-8 12:29:02