html-什么是重排和重绘？如何减少影响的范围

答：

重排：是引起DOM树重新计算的行为

重绘：一个元素外观的改变（如color）所触发的浏览器行为

减少：

分离读写操作;

样式集中改变;

使用absolute脱离文档流;

使用 display:none；

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

一个页面由两部分组成

DOM：描述该页面的结构

render：描述 DOM 节点 (nodes) 在页面上如何呈现

当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为重绘repaint。

如果变化涉及元素尺寸重新计算 , 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为重排reflow。

重绘不会带来重新布局，并不一定伴随重排

重排一定会引起浏览器的重绘

常见的触发重排的操作：

1.DOM树的结构变化，如节点的增减、移动

2.DOM元素的几何属性变化，如外边距、内边距、边框厚度、宽高、等几何属性)

3.窗口属性的获取和尺寸改变，如offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)

减少影响范围的具体方法：

1.分离读写操作,如

var curLeft=div.offsetLeft;

var curTop=div.offsetTop;

div.style.left=curLeft+1+'px';

div.style.top=curTop+1+'px';

2. 将多次改变样式属性的操作合并成一次操作

3.将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

4. 由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。

5.在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性添加到文档中去，而不是循环添加每一行。

6. 在需要经常取那些引起浏览器重排的属性值时，要缓存到变量，如窗口的offsetTop、offsetLeft事先缓存

html-什么是重排和重绘？如何减少影响的范围相关推荐

java都界面相对布局_浏览器的重排和重绘
浏览器的高层结构 1.用户界面 - 包括地址栏.前进/后退按钮.书签菜单等. 2.浏览器引擎 - 在用户界面和呈现引擎之间传送指令. 3.渲染引擎 - 负责显示请求的内容. 4.网络 - 用于网络调用 ...
160826、浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘
一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...
前端性能优化之重排和重绘
前言,最近利用碎片时间拜读了一下尼古拉斯的另一巨作<高性能JavaScript>,今天写的文章从"老生常谈"的页面重绘和重排入手,去探究这两个概念在页面性能提升上的作用 ...
你真的了解重排和重绘吗？
做过前端开发的小伙伴就算不是非常理解重排与重绘,但是肯定都听过这两个词.那为什么这两个东西这么重要?因为他与我们的页面性能息息相关,今天,我们就来好好研究一下这两个东西. 浏览器的渲染流程在讲解重排 ...
浏览器渲染机制、重排、重绘
前言浏览器的渲染机制.重排.重绘一.页面生成 1. HTML会被HTMl解析器解析成DOM树 2. CSS会被CSS解析器解析成CSSOM树 3. 结合DOM树和CSSOM树生成一颗渲染树 4.将 ...
简单易懂之什么是重排和重绘？
文章目录目录一.浏览器页面是怎么生成的? 二.什么是重排和重绘? 1.什么时候发生重绘? 2.如何优化重排效率? 一.浏览器页面是怎么生成的? 首先让我们来先了解一下浏览器页面生成的过程文字解析 ...
什么是重排和重绘？何时会触发？
重排当dom的变化影响了元素的几何信息(位置),浏览器需要计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排,表现为重新生成布局,重新排列元素. 重绘当一个元素(颜色.字体颜色)的外 ...
重排(reflow) 重绘(repaint)
在页面的生命周期中:至少会发生一次渲染,在用户访问的过程中,还会不断的触发重排(reflow)重绘(repaint) 重绘和重排都会影响性能,尤其是重排,会使我们付出高昂的性能代价. 页面生成的过程( ...
浏览器的重排与重绘是什么意思？
准备为了理解重排与重绘,我们首先需要了解一点浏览器渲染的基础知识 ~ 网页生成分为五步: 1. HTML 被 HTML 解析器解析成 DOM 树 2. CSS 被 CSS 解析器解析成 CSSOM ...
【CSS笔记】CSS修饰表格、表单、CSS重排和重绘
目录一.CSS修饰表格 1.1.CSS表格属性 (1)边框 (2)宽度和高度 (3)对齐方式二.CSS修饰表单 2.1.CSS表单三.CSS重排和重绘 3.1.HTML渲染过程 3.2.重排和重 ...

html-什么是重排和重绘？如何减少影响的范围

html-什么是重排和重绘？如何减少影响的范围相关推荐

最新文章

热门文章