关注互联网应用及运维技术的个人博客

css中经常遇到的渲染流程

css动画渲染的过程中有以下三个步骤:

  1. 布局
  2. 绘制
  3. 合成

布局

浏览器会先计算每一个元素在屏幕上占有多少空间大小。所以在这个“布局”过程中,与元素的width和height、位置有着很大的联系。在任何时候,只有改变元素的宽高,或者元素属性【top/left】,浏览器对元素布局都会重新计算一次。就算是使用JavaScript在DOM添加或者删除元素,都会导致浏览器重新计算元素的布局,浏览器必须重新渲染一次页面。

绘制

这个过程就是填充像素:描绘文本、着色图片、边框和阴影。绘制的过程是在内存发生的,页面中的各个部分形成很多图层。若是修改元素的背景颜色,那么浏览器就会重新绘制它。

合成

浏览器将所有绘制完成的图层,提取为屏幕上的图像。opacity和transform两个属性值发生改变的时候,元素渲染的时间非常少。这时候,浏览器会将元素提升到自己的绘制图层并使用GPU【计算机图形处理器】加速。因为元素是存在浏览器自己的绘制图层内,所以在整个图像变化中主图层不会发生变化,也无须重新绘制。

赞(0)
未经允许不得转载:飞天狒狒 » css中经常遇到的渲染流程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址