前端 浏览器渲染引擎
渲染引擎是浏览器最核心的组成部分，也就是我们常说的 浏览器内核,它负责显示页面内容
渲染流程
浏览器主要渲染过程包含3个主要步骤
- 构建DOM树
- 浏览器在接受服务器端发来的Html文档之后，会根据标签之间的嵌套结构，通过词法、语法分析将其解析成一颗DOM树。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>Hello, world!</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
-
浏览器在解析上述html代码，会生成下图所示的结构
-
在这个过程中，有两个重要因素会影响解析生成DOM树的时间 ---> 标签数量和嵌套层级
- 标签数量越多,解析时间越长
- 标签嵌套层级越多，解析时间更长
小总结： 所以此处，应该在开发过程中就要考虑标签结构问题，从而保证性能的消耗
- 构建cssom树
css文件虽然本身并不像 HTML文件一样呈现出明显的层级结构，但也可以按照其样式规则中的选择器的嵌套关系来构造树形结构。 例如
body {font-size: 12px}
p {font-weight: light}
span {color: blue}
p span {color: red}
需要注意的是上图中显示的并非是真正的CSSOM树，实际在浏览器中还会包含浏览器的默认样式，而我们编写的样式只是对默认样式的替换。
- 构建渲染树
接下来浏览器会将两棵树进行合并，形成渲染树，渲染树只包含那些需要被显示的元素。然后浏览器会对渲染树进行布局，调整每个元素的大小和位置，最后对元素进行精确绘制，比如修改颜色和大小等。
在这一步中，有两个地方会影响到构建渲染树的性能： 3.1 样式匹配方式 3.2 布局与绘制 3.3 浏览器渲染引擎 对样式的匹配是从右向左。
因为从左往右的话，某个父元素会有多个子元素，会造成大量的回溯。但是从右向左的话，就会很快。并且，在最右侧的选择器尽可能选择唯一的明确的选择器。
- 小栗子便于理解： 你要买nike的鞋子。你肯定先想到的是哪里有nike店，而不是哪里有商场。你找到店，在一步一步看他是属于那个商场的那一层。你品， 你细品
总结一下渲染页面的大致流程：
- 解析 HTML 标签并生成DOM树
- 解析 CSS 规则并生成CSSOM树
- 将DOM树和CSSOM树合并成一个渲染树
- 根据渲染树进行布局
- 对渲染树上的节点进行绘制
思考： 如何写出一个高性能的代码？（前端如何进行性能优化）
答： 前端性能优化不只涉及渲染引擎，但是就渲染引擎而言有一下几点：
- 避免写复杂的DOM结构，减少DOM层级，从而可以加快DOM树的构建。
- 避免编写复杂的css样式，从而可以加快CSSOM树的构建。
- 避免在选择器的右边使用通用的选择器，加快浏览器匹配样式规则的速度。
- 修改样式的时候，避免引起重新布局。
- 以上内容，均出自通过学习 《了不起的JavaScript》一书中的，学习记录和总结。为了加深自身学习印象。如有不足，欢迎各路大神抡锤。
