浏览器架构

浏览器的主要功能是从服务器上获取文件，并将其显示在屏幕上。它基本上以有序的布局显示包含图像、PDF、视频、Flash等的HTML文件。浏览器是一组结构化的代码，执行一组任务来显示网页。这些代码根据其执行的任务被分成不同的组件。

用户界面 这个组件允许终端用户与网页上的所有视觉元素进行互动。这些视觉元素包括地址栏、主页按钮、下一个按钮，以及所有其他获取和显示最终用户要求的网页的元素。

浏览器引擎 它是每个网络浏览器的核心组成部分。浏览器引擎的功能是作为用户界面和渲染引擎之间的中间人或桥梁。它根据从用户界面收到的输入，查询并处理渲染引擎。

渲染引擎 顾名思义，这个组件负责在用户的屏幕上渲染用户要求的特定网页。它解释HTML和XML文档，以及使用CSS进行风格化或格式化的图像，并生成最终的布局，显示在用户界面上。

注意：每个浏览器都有自己独特的渲染引擎。对于不同的浏览器版本，渲染引擎也可能有所不同。

常见浏览器所使用的浏览器引擎： 谷歌浏览器和Opera v.15+: Blink Internet Explorer： 三叉戟 火狐浏览器： Gecko iOS版Chrome浏览器和Safari浏览器： WebKit

• Trident：IE浏览器引擎
• Gecko：Firefox浏览器引擎
• Presto：Opera浏览器引擎
• Webkit：Safari，Google Chrome浏览器引擎。

1. Chromium：基于webkit，08年开始作为Chrome的引擎，Chromium浏览器是Chrome的实验版，实验新特性。
2. Webkit2：2010年随OS X Lion一起面世。WebCore层面实现进程隔离与Google的沙箱设计存在冲突。
3. Blink：基于Webkit2分支，13年谷歌开始作为Chrome 28的引擎集成在Chromium浏览器里。Android的WebView同样基于Webkit2。

网络 该组件负责管理使用HTTP或FTP等标准协议的网络调用。它还负责处理与互联网通信有关的安全问题。

JavaScript 解释器 顾名思义，它负责解析和执行嵌入网站的JavaScript代码。一旦解释的结果产生，它们将被转发给渲染引擎，以便在用户界面上显示。

UI后端 这个组件使用底层操作系统的用户界面方法。它主要用于绘制基本的小部件（窗口和组合框）。

数据存储/持久化 它是一个持久性层。网络浏览器需要在本地存储各种类型的数据，例如，cookies。因此，浏览器必须与数据存储机制兼容，如WebSQL、IndexedDB、FileSystem等。 Chrome的多进程架构

图片来源：Mariko Kosaka的《Inside look at modern web browser》

渲染进程

The first step of this parsing process is to break down the HTML into tokens that represent start tags, end tags, and their contents. From that it can construct the DOM.

When the parser comes across an external resource like a CSS or JavaScript file, it goes off to fetch those files. The parser will continue as a CSS file is being loaded, although it will block rendering until it has been loaded and parsed (more on that in a bit).

JavaScript files are a little different - by default they block parsing of the HTML whilst the JavaScript file is loaded and then parsed. There are two attributes that can be added to script tags to mitigate this: defer and async. Both allow the parser to continue whilst the JavaScript file is loaded in the background, but they operate differently in the way that they execute. More on that in a bit too, but in summary:

defer means that the execution of the file will be delayed until the parsing of the document is complete. If multiple files have the defer attribute, they will be executed in the order that they were discovered in the HTML.

<script type="text/javascript" src="script.js" defer>

async means that the file will be executed as soon as it loads, which could be during or after the parsing process, and therefore the order in which async scripts are executed cannot be guaranteed.

<script type="text/javascript" src="script.js" async>

Preloading resources

As an aside, modern browsers will continue to scan the HTML whilst blocked and 'look ahead' to what external resources are coming up and then download them speculatively. The manner in which they do this varies between different browsers so cannot be relied upon to behave a certain way. In order to mark a resource as important and therefore more likely to be downloaded early in the rendering process, a link tag with rel="preload" can be used.

<link href="style.css" rel="preload" as="style" />

Where the CSSOM differs to the DOM is that it cannot be built incrementally, as CSS rules can overwrite each other at various different points due to specificity. This is why CSS blocks rendering, as until all CSS is parsed and the CSSOM built, the browser can't know where and how to position each element on the screen.

How and when the JavaScript resources are loaded will determine exactly when this happens, but at some point they will be parsed, compiled and executed. Different browsers have different JavaScript engines to perform this task. Parsing JavaScript can be an expensive process in terms of a computer's resources, more-so than other types of resource, hence why optimising it is so important in achieving good performance. Check out this fantastic post for a deeper dive into how the JavaScript engine works.

Load events

Once synchronously loaded JavaScript and the DOM are fully parsed and ready, the document.DOMContentLoaded event will be emitted. For any scripts that require access to the DOM, for example to manipulate it in some way or listen for user interaction events, it is good practice to first wait for this event before executing the scripts.

document.addEventListener('DOMContentLoaded', (event) => {
    // You can now safely access the DOM
});

After everything else like async JavaScript, images etc. have finished loading then the window.load event is fired.

window.addEventListener('load', (event) => {
    // The page has now fully loaded
});

来源：starkie.dev/blog/how-a-…

跨端容器

webview 小程序 RN WeeX Lynx Flutter