参考资料浏览器是如何工作的浏览器加载网页的过程是怎样的？HTML渲染过程详解浏览器的工作原理1.浏览器的高层结构浏览器的主要组成部分有：用户界面——包括地址栏、前进/后退按钮、书签菜单等。对于在主浏览器窗口中显示的您请求的页面，显示的所有其他部分都属于用户界面。浏览器引擎-在用户界面和呈现引擎之间传递指令。渲染引擎——负责显示请求的内容。如果请求的内容是HTML，则负责解析HTML和CSS内容，并将解析后的内容显示在屏幕上。网络-用于网络调用，例如HTTP请求。它的接口与平台无关，并为所有平台提供低级实现。用户界面后端-用于绘制组合框和窗口等基本小部件。它公开了一个通用的独立于平台的接口，同时在底层使用操作系统的用户界面方法。JavaScript解释器。用于解析和执行JavaScript代码。数据存储。这是持久层。浏览器需要在其硬盘上存储各种数据，例如cookie。新的HTML规范(HTML5)定义了一个“网络数据库”，它是一个完整的（但轻量级的）浏览器内数据库。值得注意的是，与大多数浏览器不同，Chrome浏览器的每个选项卡对应一个渲染引擎实例。每个选项卡都是一个独立的进程。2、主进程渲染引擎会先从网络层获取请求文档的内容，内容的大小一般限制在8000块以内。基本流程如下：渲染引擎??将开始解析HTML文档并将每个标记转换为“内容树”上的DOM节点。它还解析外部CSS文件以及样式元素中的样式数据。这种带有HTML视觉指令的样式信息用于创建另一个树结构：渲染树。渲染树由多个具有视觉属性（例如颜色和大小）的矩形组成。这些矩形排列的顺序就是它们出现在屏幕上的顺序。渲染树构建完成后，进入“布局”处理阶段，即为每个节点分配一个它应该出现在屏幕上的精确坐标。下一阶段是绘画——渲染引擎遍历渲染树，每个节点都由用户界面后端层绘制。需要指出的是，这是一个渐进的过程。为了获得更好的用户体验，渲染引擎会争取尽快将内容显示在屏幕上。它不必等到整个HTML文档被解析后才开始构建渲染树和设置布局。在不断接收和处理来自网络的其余内容的同时，渲染引擎解析并显示部分内容。主要流程示例：3.顺序处理脚本和样式表脚本网络的模型是同步的。网页作者希望解析器在遇到标签时，它会加载last.js文件并将其放入浏览器缓存中，当parser遇到这个标签时，会立即解析并执行该脚本，而HTML文档的解析将被阻塞，直到脚本执行完毕。如果脚本是外部的，解析过程会停止，直到资源从网络中获取并解析执行，然后再继续解析后续内容。理论上，应用样式表不会改变DOM树，因此似乎没有必要等待样式表并停止文档解析。但是这涉及到一个问题，就是脚本在文档解析阶段会请求样式信息。如果当时还没有加载和解析样式，脚本会得到一个错误回复，这显然会产生很多问题。这可能看起来像一个非典型案例，但实际上很常见。Firefox在样式表加载和解析期间阻止所有脚本。对于WebKit，如果脚本试图访问的样式属性可能受到尚未加载的样式表的影响，它只会禁止脚本。但是不管是哪种情况造成阻塞，该加载的外部资源还是会加载，比如外部脚本、样式表、图片等。HTML文档的解析可能会被阻止，但外部资源的加载不会。加载CSS外部样式表会阻塞外部脚本的执行，但不会阻塞外部脚本的加载。这个可以通过chrome调试工具中的Network-Waterfall来验证，但是需要注意的是chrome的并发连接数（同域名）限制为6个。从上面两张截图可以看出，jquery.min.js脚本文件和bootstrap.css等样式文件是并行加载的，但是由于chrome的并发连接数限制为6，所以bootstrap.min.js脚本、xxx.css样式等待加载file会等待上一个文件加载完毕，当有可用的连接时开始加载。了解以上信息后，我们可以对页面进行相应的优化，比如压缩CSS文件、使用CDN、多域名下资源分发、合并CSS文件、减少HTTP请求次数等，提高CSS加载速度，以减少HTML文档解析和渲染的阻塞时间。浏览器在HTTP1上只允许每个来源有六个TCP连接。浏览器对并发请求数的限制是针对相同的域名。因此，可以利用CDN加速技术来提高用户访问网站的响应速度，使使用CDN加载资源不会占用当前域名下的并发连接数，从而减少阻塞时间。网页性能了解HTML文档解析和渲染的过程对于分析网页性能具有重要意义，可以帮助我们找出影响网页性能的关键因素。比如我们知道JS外部脚本的执行会阻塞文档的解析，重量级的第三方插件会影响首页的加载速度。如果这样影响了用户体验，我们就需要考虑使用这个第三方插件的成本是不是太高了，能不能改用其他的轻量级插件，或者只使用其中的部分模块。以Datatables为例：上图是Network项目页面的截图。红框部分有700ms左右的间隙。我们需要知道为什么在页面加载时会发生这种情况。这段空白时间浏览器在做什么？我们分析Timeline图，看看浏览器在这段时间的具体信息，如下：通过Timeline图，我们可以看到浏览器在250ms~900ms的时间间隔内执行datatables.min.js脚本代码。执行阻塞文档的解析大约需要700ms，对应网络图中的空白。我们继续查看页面总耗时，评估700ms耗时的影响，如下：可以看出页面总耗时完成为1.66s，可见执行时间datatables.min.js的占比很大，你要慎重考虑是否一定要使用这个插件，是否可以使用其他轻量级插件来替代，或者是否可以精简插件不需要的模块,或放弃使用该插件。Reference-1浏览器收到html代码，可能是一个完整的文档，也可能是一个chunk，开始解析。解析过程是先构建dom树，然后根据dom树构建渲染树，最后浏览器将渲染树绘制到页面上。dom树的构建过程就是根据html代码自上而下构建。当加载/执行脚本文件时，会阻塞后面dom树的构建（javascript可能会改变dom树），遇到css文件时，会阻塞渲染树的构建，也就是domtree继续构建（除非遇到script标签，css文件还没有加载），但是不会在页面上渲染绘制。而且无论屏蔽哪一个，加载的文件还是会被加载，比如html文档中的其他css/js/图片文件。另外，javascript加载后就会执行，执行过程也会阻塞树的构建。是执行完再解析其他内容，而不是执行完再加载其他内容。作者：贾炳链接：https://www.zhihu.com/questio...Reference-2首先，开源浏览器一般下载html页面8k/block。然后解析页面生成DOM树，遇到css标签或者JSscript标签就另开一个线程去下载，继续构建DOM。下载后CSS被解析成CSS规则树，浏览器将CSS规则树和DOM树结合生成RenderTree。注意：构建CSS对象模型(CSSOM)会阻止JavaScript的执行。JavaScript的执行也会阻止DOM构建。下载JavaScript后，可以通过DOMAPI修改DOM，通过CSSOMAPI修改样式作用域RenderTree。每次修改都会导致RenderTree重新布局和重绘。只要修改DOM或者修改元素的形状或大小，就会触发Reflow。简单修改元素的颜色只需要重绘（调用操作系统NativeGUI的API进行绘制）。作者：陈进链接：https://www.zhihu.com/questio...
