这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战；
前言
在了解浏览器渲染流程之前，我们需要清楚知道HTML、CSS和JavaScript他们的基本含义。
1.HTML是超文本标记语言。它的内容是由标记和文本组成。我们在编写html中使用的标签（比如div、p等等这些）就是标记。
浏览器在渲染时会根据标签语义来展示HTML内容。 2.CSS被称为层叠样式表。它是由
选择器和属性组成。我们在需要改变HTML的颜色，宽高等信息时就会需要CSS。 浏览器渲染引擎在识别到CSS文件时，会根据属性和标签去改变HTML的内容展示样式。 3.JavaScript简称JS。它可以使我们的网页内容”动“起来。不仅能修改CSS样式，还可以改变HTMl的内容。
搞清楚含义之后，下面，我们就一起来分析一下浏览器是如何渲染的吧。
正文
来看这样一段代码，思考一番，浏览器是如何解析的？
<html>
<head>
<title>掘金<title>
<style>
.nick-name {
font-size: 2em;
color: pink;
}
.level {
font-size: 1.5em;
color: blue;
}
</style>
</head>
<body>
<div class="nick-name">芒果啊</div>
<div class="level">Lv2</div>
</body>
</html>
1.生成DOM树
浏览器会从上到下依次解析HTML代码，但HTML语言浏览器是无法直接理解和使用的，所以浏览器需要将HTML转换成能够理解的结构，也就是DOM树（树结构）。
根据以上代码，浏览器会绘制一个如下图所示的DOM树。
2.样式计算
简单的DOM树生成好之后，就要根据DOM来计算每个元素应有的样式，上面代码中<style></style>标签中的就是我们这次要解析的样式。
同样的，css语法浏览器也无法直接理解和使用的，所以当浏览器的渲染引擎接收到css的文本时，会将这些css文本转换为浏览器可以识别的styleSheets也就是样式表。
拿到样式表之后要做的就是使其标准化，其实就是将一些我们简化的写法转换为浏览器所接受的写法，比如color: pink就会被转化为color: rgb(245, 195, 203)。当这些样式计算好后，就会生成自己的样式树。
3.生成布局树
标准化之后，就可以去计算DOM树中每个节点的具体样式，将DOM树和CSS树合并为一个全新的布局树了。同时进行布局计算，来计算每个DOM的准确位置，当全部完成后，再渲染到页面上。
小结
这一节，我们使每个节点都拥有了自己的样式和布局信息，后面再与小伙伴分享浏览器生成布局树之后，接下来是怎么绘制的。感兴趣的小伙伴可以持续关注后续~
浏览器是如何渲染HTML、CSS、JavaScript的(下)也已经更新完毕，感兴趣的小伙伴，可以直接点击链接跳转过去查看啦。
前端漫漫长途，我们都在路上，希望可以和小伙伴们一起交流，一起进步。持续更新ing.....
