浏览器下载完页面中的所有组件----HTML标记，Js，CSS，图片等之后会解析并生成两个内部数据结构：

  • DOM树  -------- 表示页面结构
  • 渲染树   -------- 表示DOM节点如何显示
 
      DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点（隐藏的DOM元素在渲染树中没有对应的节点）。
      渲染树中的节点被称为“帧“或者”盒“，符合CSS模型的定义，理解页面元素为一个具体填充(padding)，边距(marging)，边框(borders)和位置(position)的盒子。
      一旦DOM和渲染树构建完成，浏览器就开始显示(绘制"paint")页面元素。

当DOM的变化影响了元素的几何属性(宽和高)，浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。

重排：浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

重绘：完成重排后，浏览器会重新绘制受影响的部分到屏幕中。

  重排何时发生：

  • 添加或删除可见的DOM元素
  • 元素位置的改变
  • 元素尺寸改变
  • 内容改变
  • 页面渲染器初始化
  • 浏览器窗口尺寸的改变

JS性能--DOM编程之重排与重绘的更多相关文章

  1. 160826、浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘

    一.浏览器渲染页过程描述   1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...

  2. 浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘。

    一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DOM树 ...

  3. js 重排和重绘

    1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构--DOM树和渲染树. DOM树表示页面结构,渲染树表示DOM节点如 ...

  4. css 重排与重绘

    css 重绘与重排 我们要知道当浏览器下载完页面的所有资源后,就会开始解析源代码. HTML 会被解析成 DOM Tree,Css 则会被渲染成 CSSOM Tree,最后它们会附加到一起,形成渲染树 ...

  5. 高性能JavaScript 重排与重绘

    先回顾下前文高性能JavaScript DOM编程,主要提了两点优化,一是尽量减少DOM的访问,而把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如length等等,最后介绍了两个新的A ...

  6. 高性能WEB开发：重排与重绘

    DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件——HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构——DOM树和渲染树. D ...

  7. DOM的回流和重绘（重排、重绘）

    什么是DOM回流? 页面渲染时,我们对HTML结构简单的增删查改时,浏览器会对所有的dom进行重新排序,这就i是DOM回流,严重影响浏览器性能 DOM的回流和重绘: **DOM的回流**:当页面中元素 ...

  8. JS之DOM编程

    为什么学dom编程? 通过dom编程,我们可以写出各种网页游戏 dom编程也是我们学习ajax技术的基础,所以我们必需掌握好dom编程.  dom编程简介 DOM=Document Object Mo ...

  9. 前端性能优化--回流(reflow）和重绘(repaint)

    HTML加载时发生了什么 在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 浏览器把所有样 ...

随机推荐

  1. canvas，画个纸飞机

    在浏览器中的效果图: 代码如下: 主要练习下用javascript在canvas画画,至于能不能画的好看,可能看美术细菌,嘿嘿.10分钟搞定

  2. 未注册wang域名批量查询工具

    一.支持规则查询 可自定义生成域名进行查询,可生成任意位数的字母数字域名,根据[声母].[韵母]生成单拼,双拼,三拼等域名,还可根据字典生成,支持全拼.首拼识别,全国城市区号.城市全拼.城市首拼.热门 ...

  3. listView后面加控件，防止被挤

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  4. 我的ORM之示例项目

    我的ORM索引 示例项目 code.taobao.org/svn/MyMvcApp/ 1. 编译 MyTool ,DbEnt, WebApp, 安装JRE. 2. 配置 Web.config 数据库字 ...

  5. STC12C5A60S2笔记6（中断）

    1. 基本特性 1) 中断源 STC12C5A60S2共有十个中断源,每个中断源可设置4类优先级:当相同优先级下各中断优先级由高到低依次如下: 1.1)INT0(外部中断0) 中断向量地址 0003H ...

  6. Spring AOP简述

    使用面想对象(Object-Oriented Programming,OOP)包含一些弊端,当需要为多个不具有继承关系的对象引入公共行为时,例如日志,安全检测等.我们只有在每个对象中引入公共行为,这样 ...

  7. php 润年 星期 天数

    详细: 闰年.星期.天 echo date(|-|L|-|); 今年是否闰年: echo date(|-|l|-|); 今天是:Tuesday echo date(|-|D|-|); 今天是:Tue ...

  8. [ZigBee] 4、ZigBee基础实验——中断

    前言 上一篇介绍了CC2530的IO的基础知识,并用LED的控制来展示如何配置并控制GPIO的输出,用KEY状态的读取实验来展示如何读取GPIO的状态.从上一节的KEY状态读取的代码看出是采用轮训方式 ...

  9. Ubuntu下解决adb devices:???????????? no permissions的方法

    之前一直都是在windows下进行开发的,但是这次由于一个小模块用的东西只能在linux下运行,所以就发生了这么一系列的问题环境:虚拟机Vmware下的Ubuntu12.10事件:连接android手 ...

  10. 博文写作——摘要&摘要图标

    问题描述: 写博文的时候,一个比较好的习惯就是在博文的开头用简短的文字介绍一下本篇博文的大致内容.在博客园系统里面,如果博文没有在指定的地方添加摘要内容,那么系统会自动截取博文的开始部分作为摘要.如下 ...