基石-初见浏览器（一）：浏览器渲染

浏览器渲染原理

学习浏览器渲染原理是为了可以提升页面性能，避免无心间对性能形成损耗。而且面试过程当中答得比较好的话... 虽然我仍是一名在校生...html

本文讨论的是基于WebKit内核（Chrome和Safair）渲染引擎的内容，渲染引擎在不一样内核实现的浏览器中存在差别。node

概述

从服务端接受到数据后，浏览器将这些字节码转变成渲染的像素这一过程，都经历了什么？了解其中的过程，有助于咱们写出更加精干的代码，这些过程简称为关键选渲染路径。经过优化关键渲染路径，可以为构建高性能交互式操做打下基础。浏览器进行渲染页面前，须要先构建出DOM树和CSSOM树，所以咱们须要确保尽快将HTML代码和CSS代码提供给浏览器。面试

HTML 标记转换成文档对象模型 (DOM),CSS 标记转换成 CSS 对象模型 (CSSOM)
DOM 和 CSSOM 是独立的数据结构

HTML文件转化成DOM树

打开网页，浏览器首先经过网络请求对应的HTML文件，因为计算机硬件是不识别字符串的（HTML、CSS和JS 文件）,因此在网络传输过程当中转化成0和1的字节数据。当浏览器接受收到这些字节数据后，它会将字节数据转化成字符串（characters）。浏览器
浏览器将转换成的字符串，按照W3C的标准规定转化成各类token(令牌),例如<html>标签等其余尖括号内的字符串，每一个token都具备特殊含义以及一组规则。bash

当结束标记化后，这些token会当即转化为Node，同时这些Node会根据不一样Node之间的关系构成一颗DOM树。整个流程的最终输出是咱们访问页面的文档对象模型 (DOM)，浏览器对页面进行的进一步处理都会用到它。 markdown

补充：在node转化为DOM树这一过程当中，是根据每一个token之间的层级嵌套关系，进而肯定DOM的树形结构。而且DOM树的构建是逐步逐步构建的，而不是在整个过程最后构建。以上就是浏览器从网络中接收到HTML文件后一系列的转换过程。网络

在解析HTML文件构建DOM树时，还会遇到CSS和JS文件，这时候浏览器也会去下载并解析这些文件。但请记住在这过程当中若是执行了JS代码，会暂停DOM树的构建，目的是保证可以正确的构建DOM树（JavaScript代码可以修改DOM节点）数据结构

CSS文件转换成CSSOM树

在浏览器构建DOM树时，在文档的head部分会遇到link标记，该标记引用一个外部CSS样式表，因为预测到须要利用该文件来进行渲染页面，他会当即发出对该资源的请求。与处理HTML时同样，咱们须要将收到的CSS文件转换成某种浏览器可以理解和处理的东西。所以咱们会重复建立DOM树的过程来建立CSSOM树。最终造成一颗CSSOM树结构。布局

这一过程当中，浏览器会肯定每个节点的样式，此过程实际是比较消耗资源的。由于在设置样式的时候能够直接设置样式，也能够经过继承得到，因此浏览器就得递归CSSOM树。最终肯定某元素的样式。举例：性能

<div>
      <a> <span></span> </a>
    </div>
    <style>
      span {
        color: red;
      }
      div > a > span {
        color: red;
      }
    </style>
复制代码

对于第一种状况，浏览器须要找到页面中全部的span标签而后设置颜色。对于第二种状况，浏览器首先须要找到全部的span标签，而后找到span标签上的a标签，最后找到div标签，肯定知足条件的span元素后设置颜色，这样的递归过程很复杂。因此要避免写过于具体的CSS选择器，对于HTML来讲尽可能少添加无心义的标签，保持层级扁平化。

生成RenderTree（渲染树）

CSSOM树和DOM树合并成渲染树。但它们都是独立的对象，分别用于网罗文档不一样方面的信息：一个描述内容，另外一个则是描述须要对文档应用的样式规则。

但是咱们应该如何合并两颗树呢？并让浏览器屏幕上渲染像素呢？

为构建渲染树，浏览器大致上完成如下工做

1.从DOM树的根节点开始遍历每一个可见的节点

某些节点不可见（例如脚本标记元标记等）致使他们并不会体如今渲染输出中，因此会忽略
某些节点经过CSS隐藏，所以在渲染树中会被忽略，例如display:none

2.对于每一个可见的节点为他们找到匹配的CSSOM规则并应用他们。最终输出的渲染树包含了屏幕上的全部可见内容及其样式信息。有了渲染树，咱们就能够进入“布局”阶段。

布局(layout)

到目前为止，咱们已经肯定了哪些节点是可见的，以及通过计算后的样式信息，可是咱们并无计算他们在设备视口中的准确位置和大小。这就是在布局阶段须要解决的，同时也称为自动重排 当浏览器通过布局计算后，肯定了每一个元素的大小以及精确的位置，并将全部测量值都转换为屏幕上的绝对像素后，将会把这些信息传递给最后一个阶段，绘制阶段。

小结

上述步骤都须要浏览器完成大量工做，因此至关耗时。执行渲染树构建、布局和绘制所需的时间将取决于文档大小、应用的样式，以及运行文档的设备：文档越大，浏览器须要完成的工做就越多；样式越复杂，绘制须要的时间就越长。咱们提及来可能很简单，实际上浏览器却须要完成至关多的工做。若是 DOM树或 CSSOM树被修改，只能再执行一遍以上全部步骤，以肯定哪些像素须要在屏幕上进行从新渲染。

概述一下浏览器所经历的过程：

处理 HTML 标记并构建 DOM 树。
处理 CSS 标记并构建 CSSOM 树。
将 DOM 与 CSSOM 合并成一个渲染树。
根据渲染树来布局，以计算每一个节点的几何信息。
将各个节点绘制到屏幕上。