位置: IT常识 - 正文

一文教会你何为重绘、回流?

编辑:rootadmin
一文教会你何为重绘、回流? 文章目录css图层图层创建的条件重绘(Repaint)回流触发重绘的属性触发回流的属性常见的触发回流的操作优化方案requestAnimationFrame----请求动画帧写在最后

推荐整理分享一文教会你何为重绘、回流?,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

学习目标:

了解前端Dom代码、css样式、js逻辑代码到浏览器展现过程了解什么是图层了解重绘与回流了解前端层面针对重绘、回流如何优化css图层

浏览器在渲染一个页面时,会将页面分为很多个图层,图层有大有小,每个图层上有一个或多个节点。 也就是我们各种各样的Dom标签 在渲染DOM的时候,浏览器所做的工作实际上是: 1. 获取DOM后分割为多个图层 2. 对每个图层的节点计算样式结果 (Recalculate style–样式重计算) 3. 为每个节点生成图形和位置 (Layout–布局,重排,回流) 4. 将每个节点绘制填充到图层位图中 (Paint–重绘) 5. 图层作为纹理上传至GPU 6. 组合多个图层到页面上生成最终屏幕图像 (Composite Layers–图层重组)

图层创建的条件

Chrome浏览器满足以下任意情况就会创建图层: 1. 拥有具有3D变换的CSS属性 2. 使用加速视频解码的节点 3. 节点 4. CSS3动画的节点 5. 拥有CSS加速属性的元素(will-change)

重绘(Repaint)

重绘是一个元素外观的改变所触发的浏览器行为,例如改变outline、背景色等属性。浏览器会根据元素的新属性重新绘制, 使元素呈现新的外观。重绘不会带来重新布局,所以并不一定伴随回流。

需要注意的是:重绘是以图层为单位,如果图层中某个元素需要重绘,那么整个图层都需要重绘。 所以为了提高性能,我们应该让这些“变化的东西”拥有一个自己一个图层, 不过好在绝大多数的浏览器自己会为CSS3动画的节点自动创建图层。

回流

渲染对象在创建完成并添加到渲染树时,并不包含位置和大小信息。计算这些值的过程称为布局或回流

“重绘"不一定需要"回流”,比如改变某个网页元素的颜色,就只会触发"重绘",不会触发"回流",因为布局没有改变。 “回流"大多数情况下会导致"重绘”,比如改变一个网页元素的位置,就会同时触发"回流"和"重绘",因为布局改变了。

触发重绘的属性 * color* background* outline-color * border-style* background-image* outline * border-radius* background-position* outline-style * visibility* background-repeat* outline-width * text-decoration* background-size* box-shadow触发回流的属性 * width* top* text-align * height* bottom* overflow-y * padding* left* font-weight * margin* right* overflow * display* position* font-family * border-width* float* line-height * border* clear* vertival-align * min-height* white-space常见的触发回流的操作

一文教会你何为重绘、回流?

Reflow(回流) 的成本比 Repaint(重绘) 的成本高很多很多。 一个结点的 Reflow 很有可能导致子结点,甚至父点以及同级结点的 Reflow。 在一些高性能的电脑上也许还没什么,但是如果 Reflow 发生在手机上,那么这个过程是非常痛苦和耗电的。

所以,下面这些动作有很大可能会是成本比较高的。 当你增加、删除、修改 DOM 结点时,会导致 Reflow , Repaint。 当你移动 DOM 的位置 当你修改 CSS 样式的时候。 当你 Resize 窗口的时候(移动端没有这个问题,因为移动端的缩放没有影响布局视口) 当你修改网页的默认字体时。 【获取某些属性时(width,height…)!!!!!】 注:display:none 会触发 reflow,而 visibility:hidden 只会触发 repaint,因为没有发生位置变化。

优化方案

我们已知:浏览器渲染页面时经历了如下“细致”的环节: 1. 计算需要被加载到节点上的样式结果(Recalculate style–样式重计算) 2. 为每个节点生成图形和位置(Layout–重排或回流) 3. 将每个节点填充到图层中(Paint–重绘) 4. 组合图层到页面上(Composite Layers–图层重组) 如果我们需要提升性能,需要做的就是减少浏览器在运行时所需要做的工作,即:尽量减少1234步。

【具体优化方案如下】: 1.元素位置移动变换时尽量使用CSS3的transform来代替对top left等的操作 变换(transform)和透明度(opacity)的改变仅仅影响图层的组合 2.【使用opacity来代替visibility】 (1).使用visibility不触发回流,但是依然重绘。 (2).直接使用opacity即触发重绘,又触发回流(GPU底层设计如此!)。 (3).opacity配合图层使用,即不触发重绘也不触发回流。 原因: 透明度的改变时,GPU在绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果,并不需要整体的重绘。 不过这个前提是这个被修改opacity本身必须是一个图层。 3.【不要使用table布局】 table-cell 4.将【多次改变样式属性的操作合并成一次】操作 不要一条一条地修改DOM的样式,预先定义好class,然后修改DOM的className 5.【将DOM离线后再修改】 由于display属性为none的元素不在渲染树中,对隐藏的元素操作不会引发其他元素的回流。 如果要对一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示。这样只在隐藏和显示时触发2次回流。 6.【利用文档碎片】(documentFragment)------vue使用了该种方式提升性能。 7.【不要把获取某些DOM节点的属性值放在一个循环里当成循环的变量】 当你请求向浏览器请求一些 style信息的时候,就会让浏览器flush队列,比如: 1. offsetTop, offsetLeft, offsetWidth, offsetHeight 2. scrollTop/Left/Width/Height 3. clientTop/Left/Width/Height 4. width,height 当你请求上面的一些属性的时候,浏览器为了给你最精确的值,需要刷新内部队列, 因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关, 浏览器都会强行刷新渲染队列。 8.动画实现过程中,启用GPU硬件加速:transform: tranlateZ(0) 9.为动画元素新建图层,提高动画元素的z-index 10.编写动画时,尽量使用如下的API

requestAnimationFrame----请求动画帧

1.window.requestAnimationFrame() 说明:该方法会告诉浏览器在下一次重绘回流之前调用你所指定的函数 1.参数:该方法使用一个回调函数作为参数,这个回调函数会在浏览器下一次重绘之前调用。 回调函数会被自动传入一个参数,DOMHighResTimeStamp,标识requestAnimationFrame()开始触发回调函数的当前时间

2.返回值: 一个 long 整数,请求 ID ,是回调列表中唯一的标识。是个非零值,没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

备注:若你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用window.requestAnimationFrame()

2.window.cancelAnimationFrame(requestID) 取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求。 requestID是先前调用window.requestAnimationFrame()方法时返回的值,它是一个时间标识,用法与定时器的id类似。

写在最后

✨原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}评论,你的意见是我进步的财富!

文章看完了,参与个投票吧,前端目前比较火的三大框架你更喜欢哪个?

本文链接地址:https://www.jiuchutong.com/zhishi/293738.html 转载请保留说明!

上一篇:冰川湾国家公园里的兰普鲁冰川,美国阿拉斯加州 (© Andrew Peacock/Getty Images)(冰川湾国家公园的冰川不止有白色一种)

下一篇:【python模块】python解析json文件详解(python模块怎么写)

  • 你一定也遇过网络推广这些问题(你一定会遇到我,只要你还在路上)

    你一定也遇过网络推广这些问题(你一定会遇到我,只要你还在路上)

  • vivox70pro+怎么取卡槽(vivox70pro怎么取卡槽)

    vivox70pro+怎么取卡槽(vivox70pro怎么取卡槽)

  • 怎么查看私密相册里的照片(怎么查看私密相册里的照片realme)

    怎么查看私密相册里的照片(怎么查看私密相册里的照片realme)

  • airpods整个丢了怎么找回来(airpods整个丢了查找没有显示位置)

    airpods整个丢了怎么找回来(airpods整个丢了查找没有显示位置)

  • 淘宝回忆录在哪看(淘宝回顾在哪看)

    淘宝回忆录在哪看(淘宝回顾在哪看)

  • 关闭蚂蚁森林(关闭蚂蚁森林再开启之前树还在吗)

    关闭蚂蚁森林(关闭蚂蚁森林再开启之前树还在吗)

  • 腾讯会议一页能显示几个人(腾讯会议一页能显示个数可以改吗)

    腾讯会议一页能显示几个人(腾讯会议一页能显示个数可以改吗)

  • 淘宝新开店铺标志什么时候去掉(淘宝新开店铺标签有多久)

    淘宝新开店铺标志什么时候去掉(淘宝新开店铺标签有多久)

  • 网易云扫一扫在哪里iphone(网易云扫一扫在哪里ipad)

    网易云扫一扫在哪里iphone(网易云扫一扫在哪里ipad)

  • 京东的plus是什么意思(京东中的plus什么意思)

    京东的plus是什么意思(京东中的plus什么意思)

  • 12306消费密码是啥(12306消费密码是登录密码吗)

    12306消费密码是啥(12306消费密码是登录密码吗)

  • 红米k20钢化膜能指纹解锁吗(红米k20钢化膜能撕掉吗)

    红米k20钢化膜能指纹解锁吗(红米k20钢化膜能撕掉吗)

  • 苹果11丢了关机怎么找(苹果11丢了关机了报警有用吗)

    苹果11丢了关机怎么找(苹果11丢了关机了报警有用吗)

  • 红米与小米的区别(红米小米的区别)

    红米与小米的区别(红米小米的区别)

  • iOS13低数据模式是什么意思(iphone低数据模式开关在哪)

    iOS13低数据模式是什么意思(iphone低数据模式开关在哪)

  • 数据库系统的核心是(数据库系统原理)

    数据库系统的核心是(数据库系统原理)

  • 局域网的层次分为什么(局域网的层次分为哪几类)

    局域网的层次分为什么(局域网的层次分为哪几类)

  • 360朋友专享网络是什么意思(360朋友专享网络是别人用自家网络?)

    360朋友专享网络是什么意思(360朋友专享网络是别人用自家网络?)

  • 信号满格网速太慢是什么原因(信号满格网速太慢怎么解决)

    信号满格网速太慢是什么原因(信号满格网速太慢怎么解决)

  • 菜鸟垫付账户在哪(菜鸟垫付账户在哪查询)

    菜鸟垫付账户在哪(菜鸟垫付账户在哪查询)

  • 电脑auto什么意思(电脑中auto是什么意思啊)

    电脑auto什么意思(电脑中auto是什么意思啊)

  • 华为nova5pro怎么录屏(华为nova5pro怎么升级鸿蒙系统)

    华为nova5pro怎么录屏(华为nova5pro怎么升级鸿蒙系统)

  • 苹果远程管理是什么意思(苹果远程管理是什么干嘛的)

    苹果远程管理是什么意思(苹果远程管理是什么干嘛的)

  • 华为授权体验店可以贴膜吗(华为授权体验店可以免费贴膜吗)

    华为授权体验店可以贴膜吗(华为授权体验店可以免费贴膜吗)

  • iphone7微信文件在哪里(iphone7微信文件夹储存在什么位置)

    iphone7微信文件在哪里(iphone7微信文件夹储存在什么位置)

  • ps智能对象怎么取消(ps智能对象怎么取消关联)

    ps智能对象怎么取消(ps智能对象怎么取消关联)

  • wps格式刷快捷键(wps格式刷快捷键用不了怎么办)

    wps格式刷快捷键(wps格式刷快捷键用不了怎么办)

  • 电脑取消共享文件夹教程(电脑取消共享文件夹)

    电脑取消共享文件夹教程(电脑取消共享文件夹)

  • 企业所得税更正申报要交滞纳金吗
  • 融资租赁印花税怎么交
  • 免抵退税退的是什么税
  • 汇算清缴申报的时候资产总额带不出来
  • 可明确区分的商品
  • 当月个税申报的是几月的工资表
  • 超市小规模纳税人会计难吗
  • 补交土地使用税到大厅怎么申报
  • 企业前期开办费没有发票怎么入账
  • 无货源发货如何填写物流单
  • 长期股权投资的交易费用计入哪里
  • 房产证印花税如何计算
  • 企业所得税汇算清缴账务处理
  • 冲销成本结转需要什么凭证
  • 去年漏记了收入,可以记今年吗
  • 企业资产负债表图片
  • 增值税和消费税申报对比不符怎么处理
  • 非盈利组织一般纳税人应交的税
  • 企业一般每个月几号上工伤保险
  • 最新最全的消费软件
  • 过路费发票可以抵扣增值税吗
  • 发票没有存根联怎么办
  • 取得运输单位开具的普通发票
  • 研发过程中材料费计入
  • 香港公司的法人叫什么
  • win11开机后
  • 定金算营业收入吗
  • psr.exe是什么意思
  • 收据和发票的区别图片
  • 自由职业者如何交五险一金
  • 安博塞利国家公园狮子
  • php symlink
  • 最小的电池是多大
  • php如何实现
  • 前端promise封装
  • tensorflow gpu安装
  • PHP HTTP 认证实例详解
  • c语言二级指针详解
  • calc下载
  • 织梦怎么采集文章
  • 单位上社保需要个人提供什么资料
  • PostgreSQL教程(五):函数和操作符详解(1)
  • 社保是当月计提当月交吗
  • 增值税发票红冲的相关规定
  • 对公转账房租如何填写备注
  • 固定资产改造的配件怎么入账
  • 单位食堂账目
  • 以长期股权投资换入存货
  • 付给第三方的差额是什么
  • 损益类科目结转本年利润方向
  • 电子发票报销如何处理
  • 开一般户需要什么理由
  • 改制后企业是否可以剥离资产管理
  • sql server利用触发器向表中输入时间
  • mysql怎么取消密码
  • windows录音机录音文件格式
  • windows2003怎么修改用户密码
  • mscorsvw.exe是什么进程
  • macpro教程
  • RunClubSanDisk.exe是什么程序? 闪迪U盘广告推介程序
  • xp系统怎么改文件类型
  • windows7如何开启游戏模式
  • win7只能上qq不能上网页
  • 如何汉化游戏
  • win7访问共享文件夹没有权限访问
  • jquery 使用
  • jQuery扩展+xml实现表单验证功能的方法
  • css写文字
  • python redis hmset
  • js编程中要使用到函数,分为哪几步?
  • JavaScript中的NaN代表什么
  • 如何进行前后端交互
  • javascript Window及document对象详细整理
  • 脚本 python
  • android中的webview
  • python2编码问题
  • 河北省税务局云平台运维
  • 诺诺开票软件怎么领用发票
  • 龙华医院怎么网上预约
  • 税局签三方
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设