前端面试之DOM操作成本高在哪？

文章借鉴博客DOM操作成本高在哪，文章用以记录

要想清楚DOM成本，首先需要了解HTML的渲染过程：
1、渲染引擎读取HTML，生成DOM树
2、渲染引擎读取CSS，生成CSS规则树，
3、合并DOM和CSS规则树，生成render树，
4、根据render树布局（计算布局和大小），
5、绘制render树，绘制页面信息
6、浏览器通知GPU（图像处理器）绘制页面

需要注意的是：在每次进行了DOM操作后，一定会进行布局与绘制，消耗GPU，但是绘制不一定导致布局，因为可能是改变颜色而已。