一、浏览器页面是怎么生成的？

首先让我们来先了解一下浏览器页面生成的过程

文字解析：

1）HTML解析器将HTML解析成DOM树

2）CSS解析器将CSS解析成CSSOM树

3) 结合两棵树生成渲染树（Render Tree），该过程称为Attachment

4）浏览器会根据补救方式，在屏幕“画”出渲染器的所有节点

5）然后将布局绘制在屏幕上，显示出整个页面

二、什么是重排和重绘？

我们要知道，当浏览器下载完页面所需的元素之后，会生成两棵树：DOM树和渲染树。

DOM树主要是用来表示页面的DOM结构，而渲染树主要是用来表示页面上如何进行渲染的

当DOM的变化影响到了元素的几何属性，会使浏览器重新计算元素的几何属性，同样，其他几何元素的几何属性也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构建渲染器，这个过程称之为重排。完成重排之后，浏览器会重新绘制受影响的元素，这个过程被称之为重绘。

1.什么时候发生重绘？

1）添加或删除可见的DOM元素

2）元素的位置发生变化

3）元素的尺寸发生变化（包括：内、外边距，边框厚度、高度、宽度等属性发生变化）

4）内容发生变化（内容引起高度变化或者图片被另一个不同尺寸的图片替代）

5）页面渲染器进行初始化

6）浏览器窗口尺寸发生改变

2.如何优化重排效率？

1）减少重排范围

尽量以局部布局的形式组织HTML结构，尽可能小的影响重排的范围（BFC）

不使用table布局，在table中可能很小的一个改动会造成整个table的重新布局

2）减少重排次数

样式集中改变

分离度写操作

将要修改的元素离线操作

简单易懂之什么是重排和重绘？相关推荐

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

简单易懂之什么是重排和重绘？

文章目录

一、浏览器页面是怎么生成的？

二、什么是重排和重绘？

1.什么时候发生重绘？

2.如何优化重排效率？

简单易懂之什么是重排和重绘？相关推荐

最新文章

热门文章