咱们可能都知道浏览器含有一个渲染引擎，用来渲染窗口所展现的内容。默认状况下，渲染引擎能够显示html、xml文档及图片，它也能够借助插件（一种浏览器扩展）显示其余类型数据，例如使用PDF阅读器插件，用于显示PDF格式。可是其具体的渲染原理和流程估计也有不少人都不知道或者不清楚吧。这些天研究了一下浏览器的渲染原理，有了些心得，在这里跟你们分享一下。css
网页浏览器的排版引擎也被称为页面渲染引擎，它负责取得网页的内容（HTML、XML、图象等等）、整理信息（例如加入CSS等），以及计算网页的显示方式而后会输出至显示器或打印机。全部网页浏览器、电子邮件客户端以及其它须要编辑、显示网络内容的应用程序都须要排版引擎。html
渲染引擎在取得内容以后的基本流程：浏览器
解析HTML构建dom树—>构建render树—>布局render树—>绘制页面。缓存
一、构建dom树 HTML文档中的全部内容都是节点，各节点之间拥有层级关系，如父子关系，兄弟关系等等，彼此相连构成dom树，dom树中节点和HTML文档存在一一对应的关系。网络
须要注意的是：在构建dom树期间，若是遇到JS，会阻塞dom树的构建，优先加载JS文件，加载完毕后在继续构建dom树。dom
在构建dom树的同时，浏览器还会构建一个CSSOM。当遇到css文件时，先加载css文件，而后构建CSSOM，可是会阻塞render树的构建。若是将css文件放在底部，render树在以前就已经构建完了，所以用户可能会看到无样式的页面或者闪屏。布局
二、渲染树（render树） 渲染树又dom树和CSSOM构成，但并非必须等dom树及CSSOM加载完成后才开始合并构建render树，三者的构建并没有前后条件，亦非彻底独立，所以会造成一边加载，一边解析，一边渲染的现象。构建render树，根据render树计算每一个可见元素的布局，并输出到绘制流程上，将像素渲染到屏幕上。字体
三、布局render树 有了render树，浏览器已经能知道网页中有哪些节点，各个节点的css定义以及他们的从属关系，从而去计算出每一个节点在屏幕中的位置。动画
四、绘制 绘制包括重绘和重排两个过程。插件
4.一、重绘：屏幕的一部分重绘，render树节点发生改变，但不影响该节点在页面中的空间位置及大小，好比说某个div标签的背景颜色、内容发生变化，但几何属性没有发生变化，此时就会触发浏览器重绘。触发重绘的操做主要有：vidibility、outline、背景色等属性的改变。
4.二、重排：也叫回流。当render树节点发生变化，影响了节点的几何属性，致使该节点的位置发生变化，此时就会致使浏览器须要从新布局，这个过程就叫作浏览器的重排。
须要注意的是：重排必将会引发重绘，而重绘不必定须要重排！触发重排的几何因素主要有如下几点：
4.2.一、页面第一次渲染。在页面发生首次渲染的时候，全部组件都要进行首次布局，这是开销最大的一次重排。
4.2.二、浏览器窗口尺寸改变。
4.2.三、元素位置和尺寸发生改变的时候。
4.2.四、新增和删除可见元素。
4.2.五、内容发生改变（文字数量或图片大小等等）。
4.2.六、元素字体大小变化。。
4.2.七、激活CSS伪类（例如：:hover）。
4.2.八、设置style属性。
4.2.九、查询某些属性或调用某些方法。好比说：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight。除此以外，当咱们调用getComputedStyle方法，或者IE里的currentStyle时，也会触发重排，原理是同样的，都为求一个“即时性”和“准确性”。
如何减小重绘和重排？
一、直接改变className。
二、让要操做的元素进行“离线处理”，处理完后一块儿更新。
三、不要常常访问会引发浏览器flash队列的属性，若是确实须要，能够利用缓存。
四、让元素脱离动画流，减小render树的规模。