ThePrinciplesBehindBrowserDisplayandInteraction简介因为作者（热爱编程的光头强）最近在写一本小程序入门的书。其中一章介绍了虚拟DOM，它是Javascript和真实DOM之间的缓存层。为什么推出，为什么火爆，前端三大框架，小程序等等，随处可见。它背后的原理是什么。不从浏览器背后的运行原理出发，很难解释引入虚拟DOM的真正原因和最大的好处。为了搞清楚浏览器运行背后的逻辑，查了很多资料，不得不吐槽一下。网络知识虽然多，但能找到一篇含金量很高的文章，基本是常态。简单的。幸运的是，我确实找到了一篇关于这个问题的文章，这篇文章就是对它的解读。好记性不如烂笔头。注：本文所有网址均经过百度短网址处理，方便排版，美观。原文引用https://dwz.cn/iv59xbaG《前端文摘：深入解析浏览器的幕后工作原理》https://dwz.cn/b72rXXOy《浏览器的工作原理：新式网络浏览器幕后揭秘》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.c??sswg.org/cssom/《CSS Object Model (CSSOM)》https://www.w3.org/TR/css3-co...《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《Chromium的Render进程启动过程分析》https://dwz.cn/siobBJ1k《排版引擎》正文本文相当于一篇读书笔记，我们按照原文的顺序来深入一点。浏览器市场份额：Chrome63.34%Safari15.06%Firefox4.48%SamsungInternet3.77%UCBrowser3.58%Opera2.58%从上面的浏览器份额可以看出chrome占据了绝对的比重，所以我们的测试基于它。1、浏览器引擎通俗的解释就是驱动和引擎。在软件中，它是核心代码，以组件、扩展、包的形式存在，相当于计算机的CPU。维基百科的解释是，浏览器引擎就是布局引擎、排版引擎、渲染引擎等。Chrome和Safari使用Webkit引擎，而Mozilla使用Gecho引擎，有时也称为内核。参考：https://Dwz.Cn/Tr3rrt8m上面的定义对于一般大众来说已经足够了，但是对于那些想了解浏览器运行机制的人来说还不够。显然，它一般将浏览器的几个核心程序（引擎）统称为一个，并以其中一个作为整个核心的代号，容易混淆。果然stackoverflow上有人提到了这样的困惑（https://dwz.cn/7ccPJcX6）。在本文引用的以色列女工程师的文章中，浏览器组件分为7个，用户界面（UI）、浏览器引擎、渲染引擎、网络、UI后端、JavaScript解释器、数据存储等。ui之间的关系,浏览器引擎,渲染引擎等等各个浏览器使用的渲染/布局引擎和js引擎表我觉得这个答案比较靠谱。它的解释是基于chrome浏览器的多进程架构。笔者（热爱编程的光头）用chrome自带的中文翻译翻译了这段，供大家参考：回答1：我不知道如何用“引擎”来解释。先说一下“【浏览器主进程：管理渲染器进程的浏览器主进程。渲染器进程：基本上可以理解为一个标签卡（chrome）”在多进程架构的chrome浏览器上下文中使用.恶意网页内容可能导致整个浏览器崩溃或危及主机系统。为了防止这种情况发生，浏览器进程委托一个单独的渲染进程（Renderer进程（tab进程））来处理每个请求的网页内容，该进程没有用户权限（即对OS系统调用的访问受限）。当请求一个网站时，渲染进程将请求转发给浏览器进程，浏览器进程又发起一个网络请求来浏览该网站。网页内容到达后，浏览器进程将内容转发回渲染器进程。渲染器进程解析HTML、CSS文件，准备DOM、CSSOM，维护JS运行时（V8实例）并将内容以位图格式发送给浏览器进程以在UI上显示。浏览器进程将渲染器进程视为一个黑盒，渲染器进程期望将某种格式的网页内容转换成想要的格式，它包括几个子组件，以及布局引擎(process,layout(chrome)/回流（mozilla）就是其中之一。因此，浏览器进程处理用户特权资源/请求，如访问文件系统、网络等，而沙盒渲染器进程负责将网页转换为浏览器进程可以在操作系统窗口管理器中显示的格式。这里涉及到两个概念，一个是浏览器进程，一个是渲染进程。答案二：我认为答案取决于我们在这里讨论的上下文。上下文1：如果您正在与一位只了解网络基础知识的朋友交谈...在此上下文中，浏览器引擎是指为您的浏览器提供数据并负责在屏幕上显示该内容的软件。如果你在维基百科中搜索浏览器引擎，它会告诉你流行的浏览器引擎包括Webkit、Gecko、Trident等（https://en.wikipedia.org/wiki...）。既然如此，估计很少有人知道有渲染引擎这种东西。上下文2：如果你正在和一个知道浏览器如何工作以及它们背后的所有疯狂魔法的朋友交谈......在这种情况下浏览器引擎指的是浏览器进程，它主要负责管理所有I/O进程和显示UI并与渲染引擎通信等。浏览器引擎：编组UI和渲染引擎之间的操作。这也是事实。如果您查看Chromium的架构，您会发现浏览器进程/引擎使用渲染器进程来协调页面内容。这里的渲染引擎指的是构建DOM、执行JavaScript、布局网页的程序，比如Webkit、Gecko、Trident。渲染引擎由两个主要组件组成：WebCore包含核心布局功能，JavaScriptCore包含JavaScript解释器V8。看来是行家的朋友，肯定也了解负责构建网页的渲染进程。渲染引擎只是渲染过程的关键部分。下图显示了Chromium架构（GoogleChrome的开源版本）的高级架构概述。如果你想了解更多关于现代浏览器背后的魔法，可以查看以下文章：https://medium.com/@zicodeng/...2.渲染引擎（renderingengine）解析文档或其他资源后，它被渲染到浏览器窗口以供显示。它是浏览器的核心部分。通常包括dom解析、css解析、渲染树生成、layout/reflow、repaint，直到呈现给用户。3、内容为8000个chunks（块）。文章中提到“内容的大小一般限制在8000个chunk以内”。解释：当Web服务器生成HTTP响应时，它无法确定标头中消息的大小。一般来说，服务器不会提供Content-Length头部信息，但是body内容的长度是由Chunked编码动态提供的。Chunked编码传输的HTTPResponse会在消息头中设置：Transfer-Encoding:chunked4.渲染过程浏览器请求HTML代码后，在DOM生成开始时，发起css、图片、js的请求平行线。下载CSS文件后，开始构建CSSOM。CSSOM构建完成后，与DOM合并生成RenderTree（附件）。浏览器计算每个节点在屏幕上的位置进行布局。布局完成后，通过显卡将内容绘制到屏幕上。JS修改DOM或CSS属性后，Layout和Paint也会重复执行。图片下载完成后，还需要调用Layout和Paint来更新网页。五、dom+cssom->rendertreedom、cssom到renderingtree（frametree）的过程不同的kerneltree的概念不一样，但是所做的工作是相似的，就是计算并形成几个frame可用于布局矩形框（宽度、高度和位置等几何信息，计算过程在布局或回流阶段实现）、盒模型。Gecko将视觉格式元素树称为“框架树”。每个元素都是一个框架。WebKit使用的术语是“渲染树”，它由“渲染对象”组成。对于元素放置，WebKit使用术语“布局”，而Gecko称之为“回流”。WebKit使用术语“附加”来表示连接DOM节点和视觉信息以创建渲染树的过程。一个细微的非语义差异是Gecko在HTML和DOM树之间还有一个称为“内容槽”的层，它生成DOM元素。6.树和DOM节点树包含DOM节点，这意味着树是由实现某些DOM接口的元素组成的。每个元素都有一个原型链，标准定义了每个DOM节点或元素必须实现的DOM接口（属性、方法、事件）。7、添加defer、async脚本预解析通常在解析html的时候，js会阻塞执行。为了优化体验和速度，采用了延时或者异步的方式。这时候上去就有一个资源预解析或者异步执行的过程。8.共享样式共享样式数据WebKit节点将引用样式对象(RenderStyle)。在某些情况下，这些对象可以由不同的节点共享。节点是兄弟关系并且：元素必须处于相同的鼠标状态（例如，不允许一个处于“：hover”状态而另一个则不允许）任何没有ID标签名称的元素都应该匹配类属性应该匹配map属性集必须完全相同链接状态必须匹配焦点状态必须匹配没有元素应该受到属性选择器的影响，这里的术语“受影响”是指选择器中任何地方使用属性选择的选择器匹配元素不能有任何内联样式属性，也不能使用任何兄弟选择器。当WebCore遇到任何同级选择器并禁用整个文档（如果存在）的样式共享时，WebCore只会引发一个全局开关。这包括+选择器以及像:first-child和:last-child这样的选择器。代码：
- 11
- 22
- 33