精华内容
下载资源
问答
  • 重排重绘

    2019-01-03 15:32:12
    重排reflow:DOM的变化影响到了元素的宽高,导致浏览器...重排一定会导致重绘重绘不一定导致重排重绘repaint:一个元素的外观发生了改变,但是没有改变元素的宽高,比如改变元素的背景色、outline、visibility...

    重排reflow:DOM的变化影响到了元素的宽高,导致浏览器要重新计算元素的宽高(影响到页面布局),甚至影响到渲染数中的某些部分就需要重新渲染。改变窗口大小、文字大小、内容变化、浏览器窗口大小、style属性的改变等会导致重排。
    重排一定会导致重绘。重绘不一定导致重排。
    重绘repaint:一个元素的外观发生了改变,但是没有改变元素的宽高,比如改变元素的背景色、outline、visibility等会导致重绘。

    会触发reflow重排的属性
    1)盒子模型相关属性
    width/height
    padding/margin
    display
    border/border-width
    min-height

    2)定位属性、浮动
    top/bottom/left/right
    position
    float
    clear

    3)文字相关属性
    text-align/vertical-align
    overflow/overflow-y
    font-weight/font-family/font-size
    white-space
    line-height

    会触发重绘的属性
    -----color
    -----border-style/border-radius
    -----visibility
    ------文本下划线:text-decoration
    -----背景:background/background-image/background-position/background-repeat/background-size
    -----元素周围轮廓线:outline/outline-color/outline-style/outline-width
    -----box-shadow

    展开全文
  • JS 浏览器 重排 reflow 重绘 repaint什么是...我们称之为 重排重绘是指当HTML元素发生任何变化的时候,浏览器窗口的内容需要重新绘制新内容,这个重新绘制的过程我们称之为重绘从此可以看出当HTML元素发生任意变化的...

    JS 浏览器 重排 reflow 重绘 repaint

    什么是重排和重绘

    重排和重绘 是浏览器渲染的常见过程重排是指当HTML元素的位置、大小等发生变化的时候,浏览器需要重新计算它的位置、以及受它影响的所有元素的位置,

    这个重新计算的过程,我们称之为 重排

    重绘是指当HTML元素发生任何变化的时候,浏览器窗口的内容需要重新绘制新内容,这个重新绘制的过程我们称之为重绘

    从此可以看出当HTML元素发生任意变化的时候,都有可能触发浏览器重排和重绘

    重排和重绘有什么问题呢?

    浏览器重排和重绘是非常耗时的过程,也就是说是非常影响性能的一个瓶颈点

    其中会涉及到大量的计算过程、图像绘制过程等

    我们来看下重排和重绘的过程

    我们来看下如下一张图

    6b0e41864fbcc323f3f9c28b91dec667.png

    这张图描绘了浏览器的渲染过程

    HTML 经过HTML解析之后,生成DOM树

    CSS规则 经过CSS解析之后,生成规则树

    DOM树和规则树进行合并处理,生成渲染树

    渲染树经过GUI处理后直接渲染在浏览器窗口

    重排就是重新生成渲染树的过程 Render Tree

    重绘就是把渲染树Render Tree重新绘制到浏览器窗口的过程 Display

    相比而言,重排有更大的计算量,比重绘更耗性能,实际线上产品,重绘是不可避免的,但是重排可以进来减少次数

    哪些变化会引起重排1、HTML第一次加载渲染的时候,第一次生成渲染树,所有元素都需要计算一次

    2、通过拉伸导致浏览器窗口大小发生变化 (如果仅仅是浏览器位置变化,不会重排)

    3、HTML元素的显示和隐藏的变化过程

    4、HTML内容变多或变少的变化过程,因为内容长度变化导致了HTML元素的大小变

    5、等等其他HTML变化过程

    总之,只要影响了HTML元素的大小、位置、显示隐藏状态等,都会触发重排

    哪些变化会引起重绘

    所有HTML变化导致重排的过程,一定会引起重绘,因为需要重新绘制到浏览器

    但是重绘不一定会触发重排

    比如HTML元素的各种颜色变化、visibility的显示与隐藏,会引起重绘,但是不会引起重排

    如何在重排和重绘方面提升性能呢?重排和重绘不可避免,但是我们可以尽量减少重排和重绘的次数

    首先

    我们也知道现代浏览器中对于重排和重绘有一些优化手段,并不会每次发生重排就立即执行,而是

    极短时间内的重排操作会缓冲然后合并执行

    其次

    我们在开发代码的时候,应该有意识到发生重排和重绘的时机

    如一般的代码:1

    2

    3el.style.left = '10px';

    el.style.top = '20px';

    el.style.fontSize = '30px';

    这里有三次对HTML元素的修改,每次都会触发重排(影响了元素的大小和位置)

    优化后的代码:1el.style.cssText += ';left:10px;top:20px;font-size:30px;';

    合并对HTML元素的修改,只触发一次重排和重绘当然第一种写法,游览器也会有一定的优化合并操作的

    展开全文
  • 关于重排重绘

    2020-03-28 16:28:35
    关于重排重绘 domTree + cssTree = randerTree 每一次dom的操作都会引起randerTree的重新加载, 也就是 reflow重排 重排会导致整个页面加载的低效,因此要优化页面加载性能这点是优化热的部分之一 dom操作包括 dom...

    关于重排重绘

    domTree + cssTree = randerTree
    每一次dom的操作都会引起randerTree的重新加载,
    也就是 reflow重排
    重排会导致整个页面加载的低效,因此要优化页面加载性能这点是优化热的部分之一
    dom操作包括 dom节点的增加、删除
    dom的宽高、位置变化,显示隐藏
    以及offsetWidth等
    重绘 也是低效原因之一,但是比重排要好一点,因为重绘是基于cssTree的改变,不会整个页面都重新加载,改变的知识cssTree的这一小部分,比如改变颜色、修改背景图片之类的动作。

    展开全文
  • 重排重绘与GPU加速

    2021-08-26 14:49:58
    重排重绘 我们知道在浏览器渲染过程中存在重排和重绘过程 重排 当出现以下行为时,会引起重排。 添加或删除DOM元素 元素的位置发生变化 元素的尺寸发生变化 浏览器的窗口尺寸变化 重绘 对 DOM 操作简单...

    重排重绘

    我们知道在浏览器渲染过程中存在重排和重绘过程

    重排
    当出现以下行为时,会引起重排。

    • 添加或删除DOM元素

    • 元素的位置发生变化

    • 元素的尺寸发生变化

    • 浏览器的窗口尺寸变化

    重绘
    对 DOM 操作简单修改样式(比如修改元素的 visibility、color、background-color 等)时会引起重绘


    重排一定会引起重绘!

    相比较来看,重拍的花销是比重绘要大得多的。所以我们在优化性能的时候会尽量减少dom操作来减少重排。

    (跟踪重绘:打开Chrome的DevTools中rendering里面的paint flashing选项)

    GPU硬件加速

    之前一直有个疑问,在运行css动画的时候,元素的位置经常改变,岂不是会频繁引起重排?

    直到我了解到了CSS动画的GPU硬件加速

    原理

    当浏览器接收到页面的信息,他会将页面解释成DOM树。DOM树和CSS让浏览器构建渲染树。

    渲染树包含渲染对象——在页面中需要渲染的元素。每一个渲染对象被分配到一个图层中。每一个图层被更新到GPU。通过transform的层会使用GPU渲染,因此不需要重绘,就像3D图形一样。这个转换是单独处理的。

    CSS的transform在GPU直接创建一个新的层。
    (Chrome的DevTools的“Show layer borders”选项可以查看那些是单独的层。)

    场景

    以下几种情况会产生新的层

    • 3D 或者 CSS的transform属性

    • <video> 和 <canvas> 元素

    • CSS的filter属性

    • 覆盖在其它元素之上的元素,比如通过z-index提升层级

    以下css属性会使用GPU加速提升性能

    • transform

    • opacity

    • filter

    存在的问题

    内存:GPU处理过多的内容会导致内存问题。这在移动端和移动端浏览器会导致崩溃。因此,通常不会对所有的元素使用硬件加速。

    字体:在GPU渲染字体会导致抗锯齿无效。这是因为GPU和CPU的算法不同。

    展开全文
  • 浏览器重排重绘

    2019-01-30 23:53:48
    什么是重排重绘 由于某个元素的布局几何属性发生了比变化而导致了其他元素位置的变化,浏览器就会使渲染树中受到影响的部分失效,并重新构造新的渲染树,这个过程就成为浏览器的重排操作; 重排之后必会触发重绘...
  • css改变触发重排重绘的属性和具体改变 以下是基于 Google 的 Blink Web 引擎,css属性改变所对应的重排和重绘改变,是为改变,否为不改变 css属性 重排 重绘 align-content 是 是 align-items 是 是 ...
  • 浏览器的重排重绘导致一定的性能问题,频繁的性能操作会严重导致浏览器卡顿,影响用户体验;因此在开发过程中我们应该尽量的避免浏览器的重排重绘,从而性能与用户体验; 避免重排与重绘的例子 例: 当要改变某个dom...
  • 起因:本菜鸡写的一段代码性能不好,重排重绘开销大,导师让我去改! 菜鸡代码附上 let str = ''; for(let i = 0; i < arr.length; i++){ str = ` <div class="box"> ${arr[i].name}**${arr[i].age} ...
  • 重排重绘 重排:节点信息计算,即根据渲染树计算每个节点的几何信息(大小及位置)。 重绘:渲染绘制,即根据计算好的信息绘制整个页面,渲染出最终的页面。 理论上,每一次的dom更改或者css几何属性更改,都会...
  • 浏览器的重排重绘

    2021-09-12 00:09:54
    完整高频题库仓库地址:https://github.com/hzfe/awesome-interview完整高频题库阅读地址:https://hzfe.github.io/awesome-interview/相关问题如何提升页面渲染性能如何减少页面重排重绘哪些行为会引起重排/重绘...
  • 浏览器重排重绘总结

    2018-12-04 21:53:57
    重排 ...重排是DOM元素的几何属性变化,DOM树的结构变化,渲染树需要重新计算。 也就是一个元素的外观被改变,但是没有改变布局(比如宽高等)的情况下发生的,比如改变visibility、outline、背景颜色之类。...重绘...
  • 图层重排重绘及优化

    2021-09-03 10:21:16
    ###css图层 浏览器在渲染一个页面时,会将页面分为很多个图层,图层有大有小,...4. 将每个节点绘制填充到图层位图中 (Paint–重绘) 5. 图层作为纹理上传至GPU 6. 组合多个图层到页面上生成最终屏幕图像 (Composite
  • 前端问题之重排重绘

    2020-04-10 15:37:07
    重排 在弄明白什么是重排之前,我们要知道:浏览器渲染页面默认采用的是流式布局模型(Flow Based Layout)。 所谓重排,实际上是根据渲染树中每个渲染对象的信息,计算出各自渲染对象的几何信息(DOM对象的位置和...
  • 关于CSS重排重绘的概念,最近看到不少这方面的文章,觉得挺有用,在制作中考虑浏览器的性能,减少重排能够节省浏览器对其子元素及父类元素的重新渲染;避免过分的重绘也能节省浏览器性能;优化动画,使用3D启用GPU...
  • 1.页面的渲染过程 (1)Javascript:通过JS实现...(4)Paint:在多个渲染层上,对新的布局重新渲染(重绘) (5)Composite:将绘制好的多个渲染层合并,显示到页面上 在页面生成时,至少进行一次布局和渲染,...
  • 高性能 DOM & 重排重绘

    2017-06-23 15:50:09
    乍一想,元素的样式改变了三次,每次改变都会引起重排和重绘,所以总共有三次重排重绘过程,但是浏览器并不会这么笨,它会把三次修改“保存”起来(大多数浏览器通过队列化修改并批量执行来优化重排过程),一次完成...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,237
精华内容 3,694
关键字:

重排重绘