读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. html/css
  3. 正文

css渲染流程

2020年07月18日 211点热度 0人点赞 0条评论
css动画渲染的过程中有以下三个步骤:
  1. 布局
  2. 绘制
  3. 合成

css渲染流程插图

布局

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

绘制

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

合成

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

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: CSS
最后更新:2020年09月23日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
随笔 hook mysql CSS Nginx node canvas 小程序 redux taro vue 悦读 flutter git Echarts 阅读 react 闲谈 JavaScript
推荐文章
  1. 微信小程序中自定义导航和地图定位
  2. css关于居中的方式
  3. css水平垂直居中的几种方式
  4. 小程序全局和局部自定义导航栏样式
分类
  • flutter (11)
  • html/css (23)
  • Javascript (23)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (10)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号