当前位置: 首页 > news >正文

19.请介绍一下重绘和回流

渲染流程

在这里插入图片描述

重绘

触发条件

当DOM的修改导致了样式的变化,并且没有影响几何属性的时候,会导致重绘

重绘过程

由于没有导致DOM几何属性的变化,因此元素的位置信息不需要更新,从而省去布局的过程。
跳过了生成布局树和建图层树的阶段,直接生成绘制列表,然后继续进行分块、生成位图等后面一系列操作。
所以重绘不一定导致回流,但回流一定发生了重绘
在这里插入图片描述

回流

触发条件

当DOM结构的修改引发DOM几何尺寸变化的时候,具体情况比如
1. 一个DOM元素的几何属性变化,常见的几何属性有width height padding margin left top border等等
2.使DOM节点发生增减或者移动
3.读写offset族、scroll族和client族属性的时候
4.调用window.getComputedStyle方法

回流过程

触发回流的时候,如果DOM结构发生改变,则重新渲染DOM树,然后将后面的流程(包括主线程之外的任务)全部走一遍。
相当于将解析和合成的过程重新又走了一遍,开销是非常大的
在这里插入图片描述

合成

利用CSS3的transform opacity filter这些属性可以实现合成的效果,也就是常说的GPU加速。
GUP加速的原因:
在合成的情况下,会直接跳到布局和绘制流程,直接进入非主线程处理的部分,即直接交给合成线程处理,交给它处理有两大好处:
能够充分发挥GPU的优势。合成线程生成位图的过程中会调用线程池,并在其中使用GPU进程加速生成,而GPU是擅长处理位图数据的
没有占用主线程的资源,即使主线程卡住啦,效果依然能够流畅地展示

相关文章:

  • Flink / Scala - AllWindowFunction 与 KeyedProcessFunction 处理 TopK 问题
  • C++20之Concpet(概念部分,之二)
  • 【Spirng】@Component和@Configuration和@Bean的区别
  • 跟着江南一点雨学习springmvc(3)
  • 安卓手机使用Tasker实现应用级功能,屏幕翻译v9,翻译复制贴图
  • 一篇文章吃透 CSS3 属性: transition过渡 与 transform动画
  • 通讯录的动态版本
  • Docker搭建Kafka集群
  • WPS增加正则处理函数,简直如虎添翼
  • opencloudos容器镜像优化
  • 二.go语言条件与循环
  • 高阶函数1
  • 电子信息考研择校
  • 互联网数据管理平台
  • 本科行政管理毕业论文什么题目好写点?
  • [分享]iOS开发 - 实现UITableView Plain SectionView和table不停留一起滑动
  • 《Java8实战》-第四章读书笔记(引入流Stream)
  • eclipse(luna)创建web工程
  • JS笔记四:作用域、变量(函数)提升
  • mockjs让前端开发独立于后端
  • Mysql优化
  • Vim Clutch | 面向脚踏板编程……
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 从地狱到天堂,Node 回调向 async/await 转变
  • 开发基于以太坊智能合约的DApp
  • 前端每日实战 2018 年 7 月份项目汇总(共 29 个项目)
  • 让你成为前端,后端或全栈开发程序员的进阶指南,一门学到老的技术
  • 腾讯优测优分享 | Android碎片化问题小结——关于闪光灯的那些事儿
  • 学习笔记DL002:AI、机器学习、表示学习、深度学习,第一次大衰退
  • 移动互联网+智能运营体系搭建=你家有金矿啊!
  • elasticsearch-head插件安装
  • 阿里云ACE认证之理解CDN技术
  • 从如何停掉 Promise 链说起
  • 大数据全解:定义、价值及挑战
  • 曜石科技宣布获得千万级天使轮投资,全方面布局电竞产业链 ...
  • ###51单片机学习(1)-----单片机烧录软件的使用,以及如何建立一个工程项目
  • #每日一题合集#牛客JZ23-JZ33
  • (10)STL算法之搜索(二) 二分查找
  • (2/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (附源码)springboot 个人网页的网站 毕业设计031623
  • (经验分享)作为一名普通本科计算机专业学生,我大学四年到底走了多少弯路
  • (三十五)大数据实战——Superset可视化平台搭建
  • (十六)串口UART
  • (原創) 如何優化ThinkPad X61開機速度? (NB) (ThinkPad) (X61) (OS) (Windows)
  • (转)Oracle存储过程编写经验和优化措施
  • (转)Scala的“=”符号简介
  • (转)利用PHP的debug_backtrace函数,实现PHP文件权限管理、动态加载 【反射】...
  • (转载)PyTorch代码规范最佳实践和样式指南
  • .dat文件写入byte类型数组_用Python从Abaqus导出txt、dat数据
  • .FileZilla的使用和主动模式被动模式介绍
  • .net core 微服务_.NET Core 3.0中用 Code-First 方式创建 gRPC 服务与客户端
  • .net core 依赖注入的基本用发
  • .Net CoreRabbitMQ消息存储可靠机制
  • .net 前台table如何加一列下拉框_如何用Word编辑参考文献
  • .sh 的运行