【Render】如何将数据渲染到页面？渲染数据的流程

之前我们了解了什么是渲染

即：将我们想要表达的东西表达出去，就是渲染。表达后，呈现出来我们想表达的东西，叫渲染成功。

今天研究一下渲染的机制，到底浏览器是怎么进行渲染的？

我们知道HTML与 JavaScript 和 CSS 共同构成了我们所看到的网页，其中：

• HTML 用来定义网页的内容，例如标题、正文、图像等；
• CSS 用来控制网页的外观，例如颜色、字体、背景等；
• JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。

生动的说：html制造了一个人，css给一个人穿了衣服，可这时候这个人还不会动，是“植物人”。JavaScript让这个人就有了动作，这个人就是一个完整的人了。 

所以学会JavaScript，首先要干的事情就是搞明白渲染的逻辑。不然写一堆数据不知道怎么渲染，浏览器中没有任何显示，还经常报错，会让学习的人没有心情，没有动力，甚至止步于此。

我们简单的做一个换位思考：如果我们自己是浏览器，现在接收到了一个html文件，我们应该怎么样去解析，执行？

浏览器在做这件事的时候，是有自己的逻辑和顺序的。

1.首先，下载并打开这个html文件，从第一行开始解析html中的代码。

2.浏览器在解析HTML的过程中，如果发现 HTML 文本里面有一些外部的资源链接，比如 CSS、JS ，图片和Canvas画布等，会立即启用别的线程下载这些静态资源。

3.在 head 中遇到 JS 文件时，HTML 的解析会停 下来，等 JS 文件下载结束并且执行完，HTML 的解析工作再接着来，防止 JS 修改已经完成的解析结果。

4.接着，创建DOM树。什么是DOM树？DOM 的全称是：文档对象模型(Document Object Model)，在 HTML 解析时，浏览器自带的解析器会把解析完的 HTML转化成 DOM 对象，再进一步构建 DOM 树。

5.当 CSS 下载完，CSS 解析器就开始对 CSS 进行解析，把 CSS 解析成 CSS 对象，然后把这些 CSS 对象组装成一颗 CSSOM 树。

6.当DOM 树和 CSSOM 树都构建完成以后，浏览器会根据这两棵树构建出一棵渲染树。

7.紧接着，就到了渲染树构建完成之后。这个时候所有元素的位置关系和需要应用的样式就确定了。这时候浏览器会计算出所有元素的大小，尺寸，位置，以及各种样式。

8.布局计算完成以后，浏览器就可以在页面上渲染元素了，经过渲染引擎的处理后，整个页面就显示在了屏幕上。

 有人会问，如果我css文件引入到html时，写错了，没有成功引入，浏览器解析器咋办？

很简单，如果出现这种情况，浏览器没找到css文件，就不会识别，解析器反而省事了。