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

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

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

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

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

重排何时发生：

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

js 性能篇--dom 重绘 重排 节流的更多相关文章

  1. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  2. Dom 重绘重排

    https://juejin.im/entry/590801780ce46300617c89b8   DOM 重绘重排

  3. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  4. DOM 操作成本究竟有多高，HTML、CSS构建过程 ，从什么方向出发避免重绘重排）

    前言: 2019年!我准备好了 正文:从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM.尤其是React.vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQ ...

  5. JS性能优化——DOM编程

    浏览器中的DOM  天生就慢 DOM是个与语言无关的API,它在浏览器中的接口却是用JavaScript实现的.客户端脚本编程大多数时候是在个底层文档打交道,DOM就成为现在JavaScript编码中 ...

  6. DOM重绘对focus的影响

    在处理获取焦点时一直不能获取到. 搜索了下资料是因为 当DOM的变化影响了元素的几何属性(宽和高),浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响. 重排:浏览器会使渲 ...

  7. 【 js 性能优化】throttle 与 debounce 节流

    在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...

  8. js基础篇(dom操作，字符串，this等)

    首先我们来看这样一道题 <div id='foo' class='aa bb cc'></div>写出如何判断此div中是否含有aa(注:aa成立,aaa不成立) 首先,我们一 ...

  9. 浏览器渲染详细过程：重绘、重排和 composite 只是冰山一角

    https://juejin.im/entry/590801780ce46300617c89b8 渲染 这张很经典的图许多人都看过,其中的概念大家应该都很熟悉,也就是这么几个步骤:js修改dom结构或 ...

随机推荐

  1. 【转载】C#防SQL注入过滤危险字符信息

    不过是java开发还是C#开发或者PHP的开发中,都需要关注SQL注入攻击的安全性问题,为了保证客户端提交过来的数据不会产生SQL注入的风险,我们需要对接收的数据进行危险字符过滤来防范SQL注入攻击的 ...

  2. js 1.变量提升 2.条件语句 3.循环语句 4.加号+的使用

    1.变量提升 变量提升是浏览器的一个功能,在运行js 代码执行前,浏览器会给js一个全局作用域叫 window,window 分两个模块,一个叫运营模块,内存模块找到当前作用域下的所有带var和fun ...

  3. SpringBoot 之集成邮件服务.

    一.前言 Spring Email 抽象的核心是 MailSender 接口,MailSender 的实现能够把 Email 发送给邮件服务器,由邮件服务器实现邮件发送的功能. Spring 自带了一 ...

  4. MySQL添加新用户、为用户创建数据库、为新用户分配权限

    登录MySQL [root@VM_0_2_33_centos /]#mysql -u root -p 添加新用户 允许本地 IP 访问 localhost, 127.0.0.1 mysql>'; ...

  5. js内置对象-Object

    1)Object构造函数的方法 返回指定对象的原型对象 Object.getPrototypeOf(mymap); /*{featureStyle: {…}, selfLayersCount: nul ...

  6. CSS样式—— 字体、元素的垂直水平居中

    1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...

  7. iOS----------关于UDID和UUID的一些理解

    一.UDID(Unique Device Identifier)  UDID是Unique Device Identifier的缩写,中文意思是设备唯一标识. 在很多需要限制一台设备一个账号的应用中经 ...

  8. Git 常用命令及操作总结

    Git常用命令及操作总结 By:授客 QQ:1033553122 利用TortoiseGit克隆源码库到本地 1.安装TortoiseGit 2.打开Git,进入到源码库,点击图示红色选框框选按钮,弹 ...

  9. RobotFramework RobotFramework官方demo Quick Start Guide浅析

    RobotFramework官方demo Quick Start Guide浅析   by:授客 QQ:1033553122     博客:http://blog.sina.com.cn/ishouk ...

  10. Java中数组定义的三种方式

    方法一: 1.先声明 2.分配空间 3.赋值 public class arr{ public static void main(String[] args){ int[] arr; //先声明 ar ...