精华内容
下载资源
问答
  • 重绘和回流的区别

    2020-11-04 10:23:26
    1、回流:元素大小或者位置发生改变(当页面布局发生改变时候),触发了重新布局导致渲染树重新...2、重绘:只改变自身样式,不会影响到其他元素 元素样式改变(但宽高、大小、位置不变) eg: visibility、color、

    1、回流:元素的大小或者位置发生改变(当页面布局发生改变的时候),触发了重新布局导致渲染树重新计算布局和渲染

    ​如添加或删除可见的DOM元素;
    元素的位置发生变化;
    元素的尺寸发生变化、
    内容发生变化(如文本变化或图片被另一个不同尺寸的图片所代替);
    页面一开始渲染的时候(无法避免);
    

    ​ 因为回流是根据视口大小来计算元素的位置和大小的,所以浏览器窗口尺寸变化也会引起回流

    2、重绘:只改变自身样式,不会影响到其他元素

    元素样式的改变(但宽高、大小、位置不变)
    eg:   visibility、color、background-color等
    

    注意:回流一定会触发重绘,而重绘不一定会回流

    优化:限制回流和重绘的范围
    在这里插入图片描述

    展开全文
  • 重绘 当渲染树中元素外观(如:颜色)发生变化,不影响布局时,产生重绘. 回流 当渲染树中元素布局(如:尺寸,位置,隐藏/状态)发生改变时,产生重绘回流. ...
    重绘
    • 当渲染树中的元素外观(如:颜色)发生变化,不影响布局时,产生重绘.
    回流
    • 当渲染树中的元素的布局(如:尺寸,位置,隐藏/状态)发生改变时,产生重绘回流.
    展开全文
  •  4)没有deferasync标签script会立即加载并执行  5)有async标签js,js加载执行html解析渲染并行  6)有defer标签js,js加载html解析渲染并行,但会在html解析完成后

    1.解析html文件,创建DOM树
      自上而下解析,遇到任何样式(link、style)和脚本(script)都会阻塞
      1)css加载不会阻塞html文件的解析,但会阻塞dom的渲染
      2)css加载会阻塞后面js语句的执行
      3)js会阻塞html的解析和渲染
      4)没有defer和async标签的script会立即加载并执行
      5)有async标签的js,js的加载执行和html的解析和渲染并行
      6)有defer标签的js,js的加载和html的解析和渲染并行,但会在html解析完成后执行,在触发DOMContentLoaded事件前执行
      7)DOMContentLoaded和onload的区别:DOMContentLoaded在html解析完毕后执行,loload在页面完全加载完成后执行(包括样式和图片)
    2.解析css,生成CSSOM,css对象模型
    3.dom和css合并,构建渲染树(Render Tree)
    4.布局(Layout)和绘制(Paint),重绘(repaint)和重排(reflow/回流)
      1)重绘:根据元素的新属性重新绘制,使元素呈现新的外观
      2)重排:当渲染树中的一部分因为元素的规模尺寸,布局,隐藏等改变而需要重新构建
      3)重排必定会引发重绘,但重绘不一定会引发重排

    重绘和回流的区别

    1. 什么是回流

      当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建render tree。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。

    2. 什么是重绘

      当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。

    区别:
    回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不会引起回流
    当页面布局和几何属性改变时就需要回流
    比如:添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变——边距、填充、边框、宽度和高度,内容改变

    补充:
    监听资源加载完成有四种方式
      1. window.onload = function(){…}
      2. window.addEventListener(“load”,function(){…});
      3. document.body.onload = function(){…}
      4.

    参考:
    1.http://www.cnblogs.com/bibiafa/p/9364986.html
    2.https://blog.csdn.net/yuhk231/article/details/53581212

    展开全文
  • 重绘和回流(重排)的区别和关系 重绘:当渲染树中的元素外观(如:颜色)发生改变,不影响布局时,产生重绘 回流:当渲染树中的元素的布局(如:尺寸、位置、隐藏/状态状态)发生改变时,产生重绘回流 注意:JS ...

    重绘和回流(重排)的区别和关系

    • 重绘:当渲染树中的元素外观(如:颜色)发生改变,不影响布局时,产生重绘
    • 回流:当渲染树中的元素的布局(如:尺寸、位置、隐藏/状态状态)发生改变时,产生重绘回流
    • 注意:JS 获取 Layout 属性值(如:offsetLeft、scrollTop、getComputedStyle 等)也会引起回流。因为浏览器需要通过回流计算最新值
    • 回流必将引起重绘,而重绘不一定会引起回流

    如何最小化重绘(repaint)和回流(reflow)?

    • 需要要对元素进行复杂的操作时,可以先隐藏(display:"none"),操作完成后再显示
    • 需要创建多个 DOM 节点时,使用 DocumentFragment 创建完后一次性的加入 document
    • 缓存 Layout 属性值,如:var left = elem.offsetLeft; 这样,多次使用 left 只产生一次回流
    • 尽量避免用 table 布局(table 元素一旦触发回流就会导致 table 里所有的其它元素回流)
    • 避免使用 css 表达式(expression),因为每次调用都会重新计算值(包括加载页面),而且,css表达式是IE独有的,不建议使用

          关于css 表达式写法,如下示例,动态的计算top值:

    top:expression(body.scrollTop + 50 + "px");
    • 尽量使用 css 属性简写,如:用 border 代替 border-width, border-style, border-color 批量修改元素样式:elem.className 和 elem.style.cssText 代替 elem.style.xxx

     

    展开全文
  • 重绘回流

    2020-12-27 21:18:27
    重绘与回流浏览器的渲染过程重绘回流重绘和回流的区别浏览器的渲染过程生成渲染树重绘回流重绘和回流的区别何时发生回流重绘 浏览器的渲染过程 重绘 回流 重绘和回流的区别 浏览器的渲染过程 本文先从浏览器的渲染...
  • 重绘和回流

    2021-02-20 14:47:04
    重绘和回流(重排)的区别和关系?# 重绘:当渲染树中的元素外观(如:颜色)发生改变,不影响布局时,产生重绘 回流:当渲染树中的元素的布局(如:尺寸、位置、隐藏/状态状态)发生改变时,产生重绘回流 注意:JS ...
  • 什么是重绘和回流?一、行内元素:二、块级元素:二、使用步骤1.回流:2.重绘:3.区别: 一、行内元素:   共占一行,与其他行内元素并排,不能设置宽高,默认宽度就是文字宽度,行内元素只能嵌套包括自己在内...
  • 回流和重绘的区别

    2020-11-19 17:22:55
    回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。 2、如何减少回流、重绘 减少回流、重绘其实就是需要减少对...
  • 回流和重绘回流重绘区别如何避免 回流 当元素尺寸、结构等属性改变时,浏览器重新渲染部分或者全部文档过程称为回流 首次加载页面 浏览器窗口大小改变 元素尺寸或者位置改变 元素内容改变 字体大小改变 添加...
  • 回流和重绘

    2021-06-11 10:58:31
    3.重绘和回流的区别是什么? 回流一定会重绘,重绘不一定会回流 4.什么会引起回流呢? 这个问题其实很简单,看定义就知道了,笼统的来说:只要页面的布局和DOM元素的几何属性发生变化的时候就会引起回流,比如一下的...
  • 什么是重绘? 当render tree中一些元素需要更新属性,而这些属性只是影响元素外观,风格,而不会影响布局,比如...回流必将引起重绘,而重绘不一定会引起回流。 比如:只有颜色改变时候就只会发生重...
  • 回流和重绘,有什么区别

    千次阅读 2019-07-21 17:30:48
    什么是回流 当render tree中的一部分(或全部)因为元素的...在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。 ...
  • 1、重绘和回流的区别? 重绘:当渲染树中的元素外观(如:颜色)发生变化,产生重绘; 回流:当渲染树中的元素布局(如:尺寸、位置、隐藏/显示)发生变化时,产生重绘与回流; 回流必将引起重绘,而重绘不一定会...
  • 重绘和重排的区别

    2020-05-08 20:45:53
    重绘是指一个元素外观改变所触发浏览器行为,浏览器会根据元素新属性重新绘制,使元素呈现新外观。重绘发生在元素可见外观被改变,但并没有影响到布局时候。比如,仅修改DOM元素字体颜色(只有...
  • 讲述回流以及重绘之前需要先了解页面在文档加载完成之后到完全显示中间过程:1.根据文档生成DOM树(包括display:none节点)2.在DOM树基础上根据节点几何属性(margin/padding/width/height等)生成render树(不...
  • 什么是回流,什么是重绘,有什么区别? 1、浏览器渲染过程 浏览器把获取到html代码解析成1个Dom树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加元素等 浏览器把所有样式(主要包括css...
  • 1.浏览器重绘与重排的区别? 重排: 部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算,表现为重新生成布局,重新排列元素 重绘: 由于节点的几何属性发生改变或者由于样式发生改变,例如改变元素...
  • 要理解回流和重,首先 我们要了解html加载过程中发生了什么下面我们先来分析一下htm加载过程 在页面加载时候,浏览器回话吧获取到html代码解析成一个DOM树,DOM树里包含了所有html标签(包含display:none隐藏...
  • 什么是回流,什么是重绘,有什么区别? html 加载时发生了什么 在页面加载时,浏览器把获取到HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加元素等。 浏览器把...
  • 1.总结 reflow(回流):对DOM树进行渲染,只要修改DOM或修改元素形状大小,就会触发reflow。 display显示/隐藏元素,显示时占据空间,隐藏时元素不占据空间,隐藏...单纯改变字体颜色,背景只需要repaint(重绘),不...
  • 在页面加载时,浏览器把获取到HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none...DOM Tree 样式结构体组合后构建render tree, render tree类似于DOM tree,但区别很大,因为render tre...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 140
精华内容 56
关键字:

重绘和回流的区别