The browser displays and interactive principle behind

The browser displays and interactive principle behind

Primer

Because the author ( strong love programming head ) recently wrote a small program on introductory books. One chapter is to introduce virtual DOM, which is a layer of buffer layer between the real and Javascript DOM. Why introducing it and why it is so popular, the three front-end framework, applets, you can see its shadow. What is the principle behind yes. Not based on the operating principle behind the browser, it is difficult to make it clear that the real reason for the virtual DOM and the maximum benefit was introduced.

In order to understand the logic behind the browser running, I checked a lot of information, have to Tucao look, despite knowledge of the Internet and more, mixed, uneven, flawed, fundamental is the norm, you can find a very high gold content of the article is not Easy. Luckily, on this issue, I really found one, it is the interpretation of this article. A good memory as bad written.

NOTE: This is after all URLs Baidu short URL treated, and to facilitate layout appearance.

(Verbatim)

• https://dwz.cn/iv59xbaG  "front-end Abstract: Insights browser work behind the scenes"

• https://dwz.cn/b72rXXOy  "browser works: Behind the scenes of modern web browsers."

• https://dwz.cn/tn00LUqY 《How browsers work-Behind the scenes of modern web browsers》

• https://dwz.cn/bb84qh4a 《HTMLLiving Standard — Last Updated 9 August 2019》

• https://drafts.csswg.org/cssom/ 《CSS Object Model (CSSOM)》

• https://www.w3.org/TR/css3-conditional《CSS Conditional Rules Module Level 3》

• https://fetch.spec.whatwg.org/ 《Fetch Living Standard — Last Updated 9 August 2019》

• https://dom.spec.whatwg.org/《DOM Living Standard — Last Updated 9 August 2019》

• http://t.cn/AiTQEiZr《Explore the Magic Behind Google Chrome》

• https://dwz.cn/LtqlF3Qn 《The Security Architecture of the Chromium Browser》

• https://dwz.cn/hfEtd7H7  "Render process started in the Chromium Process Analysis"

• https://dwz.cn/siobBJ1k  "layout engine"

text

This article is equivalent to a reading notes, we follow the original order of a little bit of depth. Market share accounting for the browser: Chrome 63.34% Safari 15.06% Firefox 4.48% Samsung Internet 3.77% UC Browser 3.58% Opera 2.58% share of the browser from the above, it can be seen, chrome than absolute, so we based it on the test.

First, the browser engine

Popular explanation is that the engine driver, the engine, the core code is a set of components, or extension, of the presence in the software package, corresponding to the computer's CPU. Wikipedia's explanation is that the browser engine that is the layout engine, layout engine, rendering engine and so on. Chrome, Safari using the Webkit engine, Mozilla using Gecho engine, sometimes called the kernel. Reference: Https://Dwz.Cn/Tr3rrt8m

Above definition of the public is sufficient, but for those who want to find out the operating mechanism of the browser, it is not enough. Obviously, it's generally a few core browser program (engine) collectively referred to as a up and use one of them as the core of all in lieu of that, it is very confusing.

Sure enough, stackoverflow someone mentions this confusion ( https://dwz.cn/7ccPJcX6),  Israeli women engineers who cited article, the browser component is divided into 7, the user interface (UI), browser engine, rendering engine, networking, back-end user interface, JavaScript interpreter and data storage.

ui, the browser engine, such as the relationship between the map rendering engine

Rendering each browser used / layout engine and engine js table

Here's what it means the browser engine in the end, it is clear that it is not in the public wikipedia explanation, stackoverflow answer, I think there is a more reliable, based on its interpretation of multi-process architecture chrome browser, I ( love programming bald strong ) use of chrome comes in Chinese, translated this for your reference:

Answer one:

I do not know how to use the "engine" to explain. Let me by using the chrome browser in the context of having a multi-process architecture in "[

The main browser process: the main browser process management renderer process. Renderer process: basically understood as a label card (chrome).

Probably because malicious Web content, resulting in the entire browser to crash or compromise the host system, in order to prevent this from happening, the browser process commissioned a separate rendering process (Renderer process (tab processes)) Web content processing each request, it no user rights (ie limited access to the OS system calls).

当请求网站时，渲染进程将请求转发到浏览器进程，进而发起对导航网站的网络请求。在Web内容到达之后，浏览器进程将内容发送回渲染进程。渲染器进程解析HTML，CSS文件，准备DOM，CSSOM，维护JS运行时（V8实例）并将内容作为位图格式发送到浏览器进程以在UI上显示它。

浏览器进程将渲染器进程视为黑盒子，期望渲染器进程将某种格式的Web内容转换为所需格式，其中包括几个子组件，布局引擎（进程，layout(chrome)/reflow(mozilla)是其中一个。

因此，浏览器进程处理用户特权资源/请求，例如访问文件系统，网络等，其中沙盒渲染器进程负责将网页转换为浏览器进程可以将其显示在OS窗口管理器中的格式。

这其中涉及到两个概念，一个是浏览器进程，一个是渲染进程。

#####回答二：

我认为答案取决于我们在这里讨论的背景。

背景1：如果你正在和一个只知道网络基本知识的朋友交谈......

此上下文中的浏览器引擎是指为您的浏览器提供内容并负责在屏幕上显示内容的软件。如果您在维基百科中搜索浏览器引擎，它会告诉您流行的浏览器引擎包括Webkit，Gecko，Trident等（https://en.wikipedia.org/wiki/Browser_engine）。

在这种情况下，估计很少有人知道有渲染引擎这个东西存在。

背景2：如果你正在和知道浏览器如何工作的朋友以及他们背后的所有疯狂魔法交谈......

此上下文中的浏览器引擎是指浏览器进程，主要负责管理所有I/o进程和显示UI及跟渲染引擎通信等。

浏览器引擎：在UI和渲染引擎之间编组操作。

这也是正确的。如果你看一下Chromium的架构，你会发现浏览器进程/引擎使用渲染进程来协调页面内容。

此上下文中的渲染引擎是指构造DOM，执行JavaScript和布局网页的程序，例如Webkit，Gecko，Trident。渲染引擎由两个主要组件组成：WebCore包含核心布局功能，JavaScriptCore包含JavaScript解释器V8。

您的朋友似乎是专家，还必须了解渲染过程，该过程负责构建网页。渲染引擎只是渲染过程中的关键部分。

下图显示了Chromium体系结构的高级体系结构概述（Google Chrome开源版本）。如果您想了解更多有关现代浏览器背后的魔力的信息，可以查看以下文章：https://medium.com/@zicodeng/explore-the-magic-behind-google-chrome-c3563dbd2739

二、渲染引擎（呈现引擎）

对文档或其他资源进行解析后，渲染到浏览器窗口显示。它是浏览器的核心部分。通常包含dom解析，css解析，生成render树，layout/reflow，repaint，直至呈现给用户。

三、内容8000个chunck（块）

文中提到“内容的大小一般限制在 8000 个chunck块以内”，解释：Web服务器生成HTTP Response时无法在Header就确定消息大小的，这时一般来说服务器将不会提供Content-Length的头信息，而采用Chunked编码动态的提供body内容的长度。进行Chunked编码传输的HTTP Response会在消息头部设置： Transfer-Encoding: chunked

四、渲染过程

浏览器请求到HTML代码后，在生成DOM的开始阶段，并行发起css、图片、js的请求。CSS文件下载完成后开始构建CSSOM。CSSOM构建完成后和DOM合并生成Render Tree（attachment）。浏览器计算出每个节点在屏幕的位置进行布局。布局完成后，通过显卡，将内容画到屏幕上。JS修改了DOM或者CSS属性后，Layout和Paint也会被重复执行。图片下载完成后也需要调用Layout和Paint来更新网页。

五、dom+cssom -> render tree

从dom，cssom到渲染树（frame树）的过程不同的内核树的概念不太一样的，不过所做的工作都大同小异，就是计算形成若干能用于布局的矩形盒子（宽度、高度和位置等几何信息，该计算过程具体实现在layout或reflow阶段），box模型。

Gecko 将视觉格式化元素组成的树称为“框架树”。每个元素都是一个框架。WebKit 使用的术语是“呈现树”，它由“呈现对象”组成。对于元素的放置，WebKit 使用的术语是“布局”，而 Gecko 称之为“重排”。对于连接 DOM 节点和可视化信息从而创建呈现树的过程，WebKit 使用的术语是“附加”。有一个细微的非语义差别，就是 Gecko 在 HTML 与 DOM 树之间还有一个称为“内容槽”的层，用于生成 DOM 元素。

六、树及DOM节点

树包含 DOM 节点，指的树是由实现了某些DOM 接口的元素构成的。每个元素都有一条原型链，标准定义了每个DOM节点或元素必须要实现的DOM接口（属性，方法，事件）。

七、添加defer，async的脚本预解析

通常html被解析的时候遇到js会阻塞执行，为了优化体验和速度，采用延迟或异步的方式，此时就存在了资源的预解析或异步执行的过程了。

八、共享样式

共享样式数据 WebKit 节点会引用样式对象 (RenderStyle)。这些对象在某些情况下可以由不同节点共享。这些节点是同级关系，并且：

这些元素必须处于相同的鼠标状态（例如，不允许其中一个是“:hover”状态，而另一个不是） 任何元素都没有 ID 标记名称应匹配 类属性应匹配 映射属性的集合必须是完全相同的 链接状态必须匹配 焦点状态必须匹配 任何元素都不应受属性选择器的影响，这里所说的“影响”是指在选择器中的任何位置有任何使用了属性选择器的选择器匹配 元素中不能有任何 inline 样式属性 不能使用任何同级选择器。WebCore 在遇到任何同级选择器时，只会引发一个全局开关，并停用整个文档的样式共享（如果存在）。这包括 + 选择器以及 :first-child 和 :last-child 等选择器。

代码：

<div>
	<ul>
		<li>11</li>
		<li>22</li>
		<li>33</li>
	</ul>
</div>

div ul li{	color: red;	width: 100px;	height: 36px;
}

以上代码就属于符合要求的公共样式。

Dirty 位系统

为避免对所有细小更改都进行整体布局，浏览器采用了一种“dirty 位”系统。如果某个呈现器发生了更改，或者将自身及其子代标注为“dirty”，则需要进行布局。

There are two marks: "dirty" and "children are dirty". "Children are dirty" means that although the renderer itself does not change, but it needs to have at least one offspring layout.

In the browser level we have considered the case for some slight changes to occur globally recalculated and layout. So there are virtual DOM just to avoid a lot of unnecessary human behavior led to the rearrangement, so as to enhance performance.

Optimization and optimization of base virtual DOM

If the layout is "resize" or renderer position (and not size) changes triggered, you can get the size renderer from the cache, without having to recalculate. In some cases, only a sub-tree has been modified, there is no need to start from the root layout. This applies to a case where changes without affecting the surrounding elements locally, such as inserting text in a text field (otherwise every time the keyboard will trigger layout starting from the root).

Tali Garsiel this article and Paul Irish's very long, very deep, suitable for repeated reading, several times it is difficult to fully understand, and knowledge involved are very wide, thoroughly understand, at least a half has become browser layout experts and expert. But this makes sense. This article is for some of the doubt to do further reading, there are a lot of places do not understand, then take the time to dabble in depth.

Author: Love bald strong programming (JM20110222)

Copyright: please indicate the source, author codeword hard to understand, thank you!