摘要：浏览器的预解析可以减缓渲染被阻塞的情况，例如文档解析过程中预加载器发现了标签，会对文件进行加载并放在浏览器缓存中，这样当解析器遇到这个标记时，由于预加载器已经将文件加载下来了，所以会被立即执行，不需要等待从网络抓取资源，减缓了对渲染的阻塞。
参考资料
浏览器的工作原理
浏览器加载网页时的过程是什么？
HTML渲染过程详解
浏览器的工作原理 一、浏览器的高层结构浏览器的主要组件为：
用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
JavaScript 解释器。用于解析和执行 JavaScript 代码。
数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。
值得注意的是，和大多数浏览器不同，Chrome 浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程。
二、主流程呈现引擎一开始会从网络层获取请求文档的内容，内容的大小一般限制在 8000 个块以内。
然后进行如下所示的基本流程：
呈现引擎将开始解析 HTML 文档，并将各标记逐个转化成“内容树”上的 DOM 节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构：呈现树。
呈现树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。
呈现树构建完毕之后，进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制 - 呈现引擎会遍历呈现树，由用户界面后端层将每个节点绘制出来。
需要着重指出的是，这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。
主流程示例：
脚本
网络的模型是同步的。网页作者希望解析器遇到 标签，会对 last.js 文件进行加载并放在浏览器缓存中，这样当解析器遇到这个
由上面两张截图可以看到，jquery.min.js 脚本文件与 bootstrap.css 等样式文件并行加载，但是由于 chrome 的并发连接数上限为 6 个，因此 bootstrap.min.js 脚本、xxx.css 样式等文件的加载会等待前面的文件加载完成，有可用连接数的时候才开始加载。
了解以上信息之后，我们可以对该页面进行相应优化，例如对CSS文件进行压缩处理、使用 CDN，将资源分布在多个域名下、合并 CSS 文件，减少 HTTP 请求数量等，来提高 CSS 的加载速度，减少 HTML 文档解析和渲染的阻塞时间。
browser only allows six TCP connections per origin on HTTP 1.
浏览器的并发请求数目限制是针对同一域名的。因此可以使用 CDN 加速技术来提高用户访问网站的响应速度，这样使用了 CDN 的资源加载不会占用当前域名下的并发连接数，从而减少阻塞的时间。
网页性能了解 HTML 文档的解析和渲染的过程对于分析网页性能有着重要意义，它可以帮助我们找到影响网页性能的关键因素。例如，我们知道 JS 外部脚本的执行会阻塞文档的解析，那么重量级的第三方插件则会影响首页加载的速度，如果因此影响到了用户体验，我们就需要考虑这个第三方插件的使用成本是不是太高了，能否使用其他轻量级的插件进行替代，或者只使用其中一部分模块。
以 Datatables 为例：
上图是一个项目页面的 Network 截图，红色框中的部分出现了约 700ms 左右的空白，我们需要知道为什么页面的加载会出现这样的情况，这段空白时间浏览器在干什么？
我们分析 Timeline 图，看看浏览器在这段时间的具体信息，如下：
通过 Timeline 图我们可以看到，在 250ms~900ms 时间区间内，浏览器在执行 datatables.min.js 脚本代码，这个脚本的执行阻塞了文档的解析，耗时约 700ms，对应了 Network 图中的空白。
我们继续查看页面总的耗时时间，评估 700ms 耗时的影响，如下：
可以看到，页面总的完成耗时为 1.66s，由此可知 datatables.min.js 的执行耗时占了很大比重，应当慎重考虑是否一定要使用这个插件，能否使用其他轻量级的插件进行替代，或者能否精简插件的不必要模块，或者舍弃插件的使用。
参考资料-1
浏览器接收到html代码，可能是一份完整的文档，也可能是一个chunk，即开始解析。解析过程是先构建dom树，再根据dom树构建渲染树，最后浏览器将渲染树绘制到页面上。
构建dom树的过程即根据html代码自上而下进行构建，当遇到script文件加载／执行会阻塞后面dom树的构建（javascript可能会改变dom树），而遇到css文件则会阻塞渲染树的构建，即dom树依然继续构建（除非遇到script标签并且css文件依旧未加载完成），但不会渲染绘制到页面上。而无论哪个阻塞，该加载的文件还是会加载，例如html文档中的其他css／js／图片文件。
另外javascript被加载后就会被执行，执行的过程也阻塞树的构建。是执行完了才解析其他内容，而不是执行完了才加载其他内容。
作者：加冰
链接：https://www.zhihu.com/questio...
参考资料-2
首先，开源浏览器一般以8k每块下载html页面。
然后解析页面生成DOM树，遇到css标签或JS脚本标签就新起线程去下载他们，并继续构建DOM。
下载完后解析CSS为CSS规则树，浏览器结合CSS规则树和DOM树生成Render Tree。
注意：构建CSS Object Model（CSSOM)会阻塞JavaScript的执行。JavaScript的执行也会阻塞DOM的构建。
JavaScript下载后可以通过DOM API修改DOM，通过CSSOM API修改样式作用域Render Tree。
每次修改会造成Render Tree的重新布局和重绘。只要修改DOM或修改了元素的形状或大小，就会触发Reflow，单纯修改元素的颜色只需Repaint一下（调用操作系统Native GUI的API绘制）。
作者：陈金
链接：https://www.zhihu.com/questio...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54748.html
摘要：每种可被解析的格式必须具有由词汇及语法规则组成的特定的文法，称为上下文无关文法。解析解析器，每个标识都有特定的正则进行解析。开发者可以将脚本标识为，以使其不阻塞文档解析，并在文档解析结束后执行。 浏览器组成 用户界面-地址栏、按钮之类的 浏览器引擎-用来查询及操作渲染引擎的接口 渲染引擎-显示请求的内容 网络-进行网络请求 ui后端-用来沪指选择框、对话框的基本组件 js解析器 数据...
摘要：浏览器的预解析可以减缓渲染被阻塞的情况，例如文档解析过程中预加载器发现了标签，会对文件进行加载并放在浏览器缓存中，这样当解析器遇到这个标记时，由于预加载器已经将文件加载下来了，所以会被立即执行，不需要等待从网络抓取资源，减缓了对渲染的阻塞。 参考资料 浏览器的工作原理 浏览器加载网页时的过程是什么？ HTML渲染过程详解 浏览器的工作原理 一、浏览器的高层结构 浏览器的主要组件为：...
摘要：浏览器的预解析可以减缓渲染被阻塞的情况，例如文档解析过程中预加载器发现了标签，会对文件进行加载并放在浏览器缓存中，这样当解析器遇到这个标记时，由于预加载器已经将文件加载下来了，所以会被立即执行，不需要等待从网络抓取资源，减缓了对渲染的阻塞。 参考资料 浏览器的工作原理 浏览器加载网页时的过程是什么？ HTML渲染过程详解 浏览器的工作原理 一、浏览器的高层结构 浏览器的主要组件为：...
阅读 2956·2021-11-25 09:43
阅读 2223·2021-09-07 10:28
阅读 3393·2021-08-11 11:14
阅读 2751·2019-08-30 13:49
阅读 3494·2019-08-29 18:41
阅读 1142·2019-08-29 11:26
阅读 1954·2019-08-26 13:23
阅读 3338·2019-08-26 10:43
