浏览器从请求数据到渲染在页面的过程

转载

wx6033148ae7815 2021-03-30 14:07:08

开始解析HTML

浏览器通过网络接收页面的html数据时，它会立即设置解析器将html转换为文档对象模型(DOM).

文档对象模型是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以从程序中对该结构进行访问，从而改变文档的结构、样式和内容。DOM将文档解析成一个由节点和对象组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

解析第一步就是讲HTML分解并表示为开始标记、结束标记及其内容标记，然后它可以构造DOM。
将标签如div、html称为标签分为开始标记、结束标记；块里面的内容称为内容标记

获取外部资源

将解析器遇到外部资源(如css或javascript文件)时，解析器将提取这些文件。解析器在加载css文件时继续运行，此时会阻止页面渲染，直到资源加载解析完。 js文件略有不同，默认情况下，解析器会在加载js文件然后进行解析同时会阻止对html的解析。可以将两个属性添加到脚本标签中以减轻这种情况：defer和async。两者都允许解析器在后台加载js文件的同时继续运行。但是他们的执行方式不同。
defer：表示文件的执行将被延迟，直到文档的解析完成为止。如果多个文件具有defer属性，则将按照页面放置的顺序依次执行。
async:意味着文件将在加载后立即执行，异步执行。这可能实在解析过程中或在解析过程之后执行的，因此不能保证异步脚本的执行顺序。

预加载资源： <link>元素的 rel 属性的属性值preload能够让你在你的html页面中<head>元素内部书写一些声明式的资源获取请求，可以指明那些资源实在页面加载完成后即刻需要的。
对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。

解析css并构建CSSOM

CSS 对象模型 (CSSOM) 是树形形式的所有CSS选择器和每个选择器的相关属性的映射，具有树的根节点，同级，后代，子级和其他关系。CSSOM 与文档对象模型(DOM) 非常相似。两者都是关键渲染路径的一部分，也是正确渲染一个网站必须采取的一系列步骤。 CSSOM 与 DOM一起构建渲染树，浏览器依次使用渲染树来布局和绘制网页。

与html文件和DOM相似，加载CSS文件时，必须将他们解析并转换为树，这就是CSSOM。它描述了页面上的所有css选择器，他们的层次结构和属性。
CSSOM与DOM的不同之处在于它不能以增量的方式构建。因为css规则由于特定性而可以在各个不同的点相互覆盖。这就是CSS阻塞渲染的原因。因为在解析所有css并构建cssom之前，浏览器无法知道元素在屏幕上的位置。

执行javascript

不同的浏览器有不同的 JS 引擎来执行此任务。从计算机资源的角度来看，解析 JS 可能是一个昂贵的过程，比其他类型的资源更昂贵，因此优化它对于获得良好的性能是如此重要。在所有其他内容（例如异步JavaScript，图像等）完成加载后，将触发window.load事件www.hk-ipad.com。

合并DOM和CSSOM来构造渲染树

渲染树是DOM和CSSOM的组合，表示将要渲染到页面上的所有内容。这并不一定意味着渲染树中的所有节点都将在视觉上呈现，例如，将包含opacity: 0或visibility: hidden的样式的节点，并仍然可以被屏幕阅读器等读取，而display: none不包括任何内容。此外，诸如<head>之类的不包含任何视觉信息的标签将始终被忽略。与 JS 引擎一样，不同的浏览器具有不同的渲染引擎。