浏览器从请求数据到渲染在页面的过程
source link: https://my.oschina.net/kxhome/blog/4988553
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
浏览器通过网络接收页面的html数据时，它会立即设置解析器将html转换为文档对象模型(DOM).
文档对象模型是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以从程序中对该结构进行访问，从而改变文档的结构、样式和内容。DOM将文档解析成一个由节点和对象组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
解析第一步就是讲HTML分解并表示为开始标记、结束标记及其内容标记，然后它可以构造DOM。
将标签如div、html称为标签分为开始标记、结束标记；块里面的内容 称为内容标记
将解析器遇到外部资源(如css或javascript文件)时，解析器将提取这些文件。解析器在加载css文件时继续运行，此时会阻止页面渲染，直到资源加载解析完。 js文件略有不同，默认情况下，解析器会在加载js文件然后进行解析同时会阻止对html的解析。可以将两个属性添加到脚本标签中以减轻这种情况：defer和async。两者都允许解析器在后台加载js文件的同时继续运行。但是他们的执行方式不同。
defer：表示文件的执行将被延迟，直到文档的解析完成为止。如果多个文件具有defer属性，则将按照页面放置的顺序依次执行。
async:意味着文件将在加载后立即执行，异步执行。这可能实在解析过程中或在解析过程之后执行的，因此不能保证异步脚本的执行顺序。
解析css并构建CSSOM预加载资源： <link>元素的 rel 属性的属性值preload能够让你在你的html页面中<head>元素内部书写一些声明式的资源获取请求，可以指明那些资源实在页面加载完成后即刻需要的。
对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。
CSS 对象模型 (CSSOM) 是树形形式的所有CSS选择器和每个选择器的相关属性的映射，具有树的根节点，同级，后代，子级和其他关系。CSSOM 与 文档对象模型(DOM) 非常相似。两者都是关键渲染路径的一部分，也是正确渲染一个网站必须采取的一系列步骤。 CSSOM 与 DOM一起构建渲染树，浏览器依次使用渲染树来布局和绘制网页。
与html文件和DOM相似，加载CSS文件时，必须将他们解析并转换为树，这就是CSSOM。它描述了页面上的所有css选择器，他们的层次结构和属性。
CSSOM与DOM的不同之处在于它不能以增量的方式构建。因为css规则由于特定性而可以在各个不同的点相互覆盖。这就是CSS阻塞渲染的原因。因为在解析所有css并构建cssom之前，浏览器无法知道元素在屏幕上的位置。
不同的浏览器有不同的 JS 引擎来执行此任务。从计算机资源的角度来看，解析 JS 可能是一个昂贵的过程，比其他类型的资源更昂贵，因此优化它对于获得良好的性能是如此重要。 在所有其他内容（例如异步JavaScript，图像等）完成加载后，将触发window.load事件。
合并DOM和CSSOM来构造渲染树计算布局和绘制渲染树是DOM和CSSOM的组合，表示将要渲染到页面上的所有内容。 这并不一定意味着渲染树中的所有节点都将在视觉上呈现，例如，将包含opacity: 0或visibility: hidden的样式的节点，并仍然可以被屏幕阅读器等读取，而display: none不包括任何内容。 此外，诸如<head>之类的不包含任何视觉信息的标签将始终被忽略。与 JS 引擎一样，不同的浏览器具有不同的渲染引擎。
现在我们有了完整的渲染树，浏览器知道了要渲染什么，但是不知道在哪里渲染。 因此，必须计算页面的布局（即每个节点的位置和大小）。 渲染引擎从顶部开始一直向下遍历渲染树，计算应显示每个节点的坐标。
完成之后，最后一步是获取布局信息并将像素绘制到屏幕上
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK