前端开发—理解浏览器原理
任何语言都要被解析翻译成机器能读懂的语言，然后表现出我们想要的结果，前端我们熟知的css，javascript，html也需要被解析，然后在屏幕上绘制出我们想要的结果，然而这个过程是怎样去执行的呢？我们了解了这背后的原理对我们写代码有什么优化的效果呢？下面让我们来探讨下。
浏览器的渲染机制首先渲染的一个主流程是如下图：
解析html过程是标记生成器识别标记，传递给树构造器，然后接受下一个字符以识别下一个标记；如此反复直到输入的结束。最后构建成dom树，css解析利用解析器按css规则解析css样式，浏览器会根据css的属性，在dom树基础上构建另一个树结构：呈现树。这是由可视化元素按照其显示顺序而组成的树，也是文档的可视化表示。它的作用是让您按照正确的顺序绘制内容。呈现树中的元素叫作呈现器，呈现器知道如何布局和绘制，其中具体的解析算法可学习。
https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#Render_tree_construction
渲染树中的节点是由一个个渲染对象组成的，渲染对象在被添加到渲染树中，它们并没有位置和大小，计算这些值的过程称为layout或reflow（重排）。
最后就是绘制阶段，遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上，绘制使用UI基础组件
浏览器的TimeLine可以看出整个渲染过程，蓝色的（parse html）和紫色的(parse css)是同时进行的，后面紫色的是update layer tree,最后就是绿色的绘制(paint)
二、从原理看代码
1、重排、重绘
首先我们需要了解一下这两个名词，重排是发生在构建渲染树阶段，因为元素的大小、位置等改变会导致重新计算渲染对象的位置、大小。重绘不会改变渲染树的顺序和矩形区域，一般是由于元素属性的颜色、背景等的改变，所以只会重新调用paint方法绘制在屏幕上。
从这里我们得知，重排一定会导致重绘，重绘不会导致重排，所以在代码开发阶段，我们尽可能的减少重排。
2、css代码规范
在解析css样式的时候，首先会生成一条样式规则树，然后进行规则匹配，规则树如下：
所以庞大的样式文件进行解析也是庞大的工作量，从这里可知样式的规范和复用也是可以优化css的解析速度。html和css解析是同时进行的生成渲染树，解析html时使用一个标志位标识所有顶层样式表都已加载，如果在attch时样式没有完全加载，则放置占位符，并在文档中标记，一旦样式表完成加载就重新进行计算。
3、css属性顺序
渲染树中渲染对象的绘制顺序从依照如下顺序：
1. outline
2. children
3. border
4. 背景图
5 背景色
所以在写css属性时可以按如下规则，也可以达到优化渲染速度，虽然效果可能不是很明显。
