前端性能优化之重排、重绘与合成

前言

在项目的交互评审中,前端同学常常会对一些交互效果质疑,提出这样做不好那样做不好。这是因为这些效果通常会产生一系列的浏览器重绘和重排,需要付出非常昂贵的性能代价。
本文期待可以部分解释以下两个问题。

  • 什么是浏览器的重绘和重排呢?
  • 二者发生时都引发哪些渲染流程?

reflow

重绘(也称回流),指的是浏览器为了重新计算文档中元素的位置和几何结构而重新渲染部分或全部文档的过程。也就是说通过JavaScript或者CSS修改元素的几何位置属性,例如改变元素的宽度、高度等就会引发reflow。

以下行为会引发reflow:

  • 页面渲染器初始化
  • 添加或删除可见的DOM元素
  • 盒模型相关的属性改变
  • 定位属性及浮动相关的属性的改变
  • 改变节点内部文字结构也会触发回流
  • 浏览器窗口大小发生改变

repaint

重绘,指的是当页面中元素样式的改变并不影响它在文档流中的位置时,例如通过JavaScript更改了字体颜色,浏览器会将新样式赋予给元素并重新绘制的过程。

以下行为会引发repaint:

  • 页面中的元素更新样式风格相关的属性。

如想知道还有哪些属性会引发reflow或者repaint请查看

reflow和repaint的渲染过程

先看看渲染流程线:

有了图中介绍的渲染流水线基础(看不懂的可以看我之前的文章),来看看reflow和repaint分别引发的渲染流程的哪些步骤。

1、 更新了元素的几何属性(reflow)
通过JavaScript或者CSS修改元素的几何位置属性,例如改变元素的宽度、高度等,那么浏览器会触发重新布局,解析之后的一系列子阶段。无疑,重排需要更新完整的渲染流水线,所以开销也是最大的。如下图所示:

2、 更新元素的绘制属性(repaint)
通过JavaScript或者CSS修改元素的背景颜色,那么布局阶段将不会被执行,因为并没有引起几何位置的变换,所以就直接进入了绘制阶段,然后执行之后的一系列子阶段,。相较于重排操作,重绘省去了布局和分层阶段,所以执行效率会比重排操作要高一些

3、直接合成阶段
可能都注意到了tiles后面的阶段不是在主线程上执行,也就是更改一个既不要布局也不要绘制的属性,这样的效率是最高的。比如使用CSS的transform来实现动画效果,这可以避开重排和重绘阶段,直接在非主线程上执行合成动画操作。这样的效率是最高的,因为是在非主线程上合成,并没有占用主线程的资源,另外也避开了布局和绘制两个子阶段,所以相对于重绘和重排,合成能大大提升绘制效率。

总结

在开发过程中要尽量减少重排,适当使用重绘,尽量使用合成。

原文链接:juejin.im

上一篇:requestAnimationFrame 再理解
下一篇:Vue组件通信方式

相关推荐

  • 🚩四年前端带你理解路由懒加载的原理

    前言 说起路由懒加载,大家很快就知道怎么实现它,但是问到路由懒加载的原理,怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载,最常用的是通过im...

    2 个月前
  • 🔥手写大厂前端知识点源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    4 个月前
  • 🔥前端面试大厂手写源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    4 个月前
  • 🎸 一篇文章搞懂前后端路由及前端路由的实现

    一、WEB 开发中的路由(以下简称路由)是指什么 路由简单来说根据网页 url 的改变来转发给对应控制器处理的应用程序,控制器就是我们俗称的Controller,一般是一个函数,所以路由也可以看作是u...

    19 天前
  • (立下flag)每日10道前端面试题-15 关于【高级技巧】十问

    (/public/upload/4dc64bf14f4bd714fcd87e98b6a10373) 第一问:安全类型检测——typeof和instanceof 区别以及缺陷,以及解决方案 这两...

    3 个月前
  • (本人)2019前端校招经历

    我是一个想要找前端工作的妹纸,最近电话面了挺多企业,在每次面试中都会发现自己的不足或者没涉及到的方面,一边被拒一边学习新知识。想要在这里记录、分享前端校招遇到的问题,希望每一次都有提升,下一次不会再犯...

    2 年前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇开发环境搭建 私人管家包管理器 待续 点击查看源网页(/public/upload/7b9b054b364e1627547...

    2 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇开发环境搭建 私人管家包管理器 待续 点击查看源网页(/public/upload/fde96d7941fadecf7f3...

    3 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 点击查看源网页(/public/upload/4b3364dbda7cb152b15a01d33da483ed) 包管理器 在很久很久...

    3 个月前
  • (初级前端)面试如何写出一个满意的深拷贝

    前言 已经有很多关于深拷贝与浅拷贝的文章,为什么自己还要写一遍呢💯 ❝ 学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。

    1 个月前

官方社区

扫码加入 JavaScript 社区