前端性能优化（二）渲染优化

一.浏览器渲染流程

初次渲染—浏览器渲染流程
二次渲染主要是这五个步骤：

JavaScript：指的是用js可以实现页面上的视觉变化，比如动画等；除此之外我们还可以用css做动画过渡等，这里只是统一代表，改变页面视觉变化的一系列操作

Style：浏览器对样式就行重新的计算，选择器重新的匹配，计算那些css收到了影响，新的规则是什么样的。这样每个元素是什么样子就清楚了

Layout：布局，把元素按照说的样式绘制到页面上，我们需要知道大小和位置

Paint：绘制，把元素绘制到页面上，画文字图片阴影等

Composite：复合，按照图层绘制，最后把各个图层绘制的合成在一起，类似于ps那种感觉

二.布局和绘制的优化

布局，绘制很耗资源，我们可以尽量避免这两个阶段进行优化

1.影响回流的操作

第一次叫做布局，当修改一些内容再布局，我们称为回流，其实和布局本质是一样的

①添加/删除元素
②display：none
③移动元素位置
④操作style
⑤读取offsetLeft，scrollTop࿰