为什么要写高性能DOM?

一个网站,在页面上承载最多内容的就是DOM,而且无论是我们通过加载JS、加载图片,他们也是通过写HTML标签来实现的。而我们性能优化要做的无非就是几大块:

  1. 站点的网络消耗
  2. DOM的初始化过程(浏览器)
  3. DOM的结构以及动态操作(人为)
  4. JS执行过程(浏览器)
  5. JS逻辑组织(人为)

站点的网络消耗我们基本上没法控制的,而且网络环境非常复杂,我们作为一个下行的终端实际上选择不了你接触什么样的网络环境的。

DOM的初始化过程其实我们也是无法控制的,因为DOM的初始化是跟浏览器里面的DOM解析引擎相关的,它解析快解析慢我们改不了。

DOM的结构以及动态操作,这就是我们相关的。一个页面的DOM结构是我们在制作页面的时候自己来下定义的,我们可以做多层嵌套,也可以做底层嵌套,我们可以做绝对定位也可以做相对定位。动态操作就是DOM在运行到一定阶段之后。

JS执行过程跟浏览器的内核相关,它的执行快慢我们也无法改变,我们能优化的就是JS逻辑组织部分。

回流(Reflow)和重绘(Repaint)

提高高性能DOM就不得不提到回流和重绘,那么什么是回流什么是重绘?

回流 
对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的、开发人员定义的)来计算并根据计算结果将元素放到它该出现的位置,这个过程称为回流。

重绘 
当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为重绘。

什么情况下会触发回流和重绘?

DOM元素的添加、修改(内容)、删除(回流+重绘),仅修改DOM元素的字体颜色(只有重绘,因为不需要调整布局),回流一定触发重绘,但是重绘不一定触发回流。

现在我们知道了触发重绘和回流的触发条件,那我们为什么要避免他们?为什么避免他们高性能DOM就能够写出来呢?

如何避免触发回流和重绘

Display的值会影响布局,从而影响整个页面元素的位子发生变化,所以会更改render树的结构,先将元素从document中删除,完成修改后再把元素放回原来的位置,如果需要创建多个DOM节点,可以使用documentFragment创建完后一次性的加入document

文章来源: http://34585f3f.wiz03.com/share/s/0Qm5Y_0RRQtc2F-3Zy2piy1K0E4QKp0IAQvZ2PEFvB08u3fM

如何写出高性能DOM?的更多相关文章

  1. JAVA语言之怎样写出高性能的Java代码?

    本文主要向大家介绍了JAVA语言之怎样写出高性能的 Java 代码?通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. 在这篇文章中,我们将讨论几个有助于提升Java应用程序性能的方法.我 ...

  2. 如何写出高性能SQL语句

    优化SQL查询:如何写出高性能SQL语句 1.首先要搞明白什么叫执行计划? 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生欀如一条SQL语句如果 ...

  3. 深入理解 GIL:如何写出高性能及线程安全的 Python 代码

    深入理解 GIL:如何写出高性能及线程安全的 Python 代码 本文由 伯乐在线 - 郑芸 翻译.未经许可,禁止转载!英文出处:A. Jesse.欢迎加入翻译组. GIL对多线程的影响:http:/ ...

  4. 优化SQL查询:如何写出高性能SQL语句

    1. 首先要搞明白什么叫执行计划? 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个 10万条记录的表中查1条 ...

  5. 优化 SQL 查询:如何写出高性能SQL语句

    1. 首先要搞明白什么叫执行计划? 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个 10万条记录的表中查1条 ...

  6. Sql Server 优化 SQL 查询:如何写出高性能SQL语句

    1. 首先要搞明白什么叫执行计划? 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个 10万条记录的表中查1条 ...

  7. 如何写出高性能SQL语句(文章摘自web开发者)

    (声明:本文内容摘自web开发者,仅供收藏学习之用,如有侵权请作者联系博主,博主将在第一时间删除) 原文地址:http://www.admin10000.com/document/484.html 1 ...

  8. 写出高性能SQL语句的十三条法则

    1. 首先要搞明白什么叫执行计划? 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个10万条记录的表中查1条记 ...

  9. 如何写出高性能的CSS3动画

    小伙伴们在写CSS3动画时,会发现在手机上很多时候会感到卡顿,然后Google到的解决方案大多是开启GPU加速transform: translate3d(0,0,0); 可解决,但是为什么开启GPU ...

随机推荐

  1. LeetCode 141——环形链表

    1. 题目 2. 解答 2.1 方法 1 定义快慢两个指针,慢指针每次前进一步,快指针每次前进两步,若链表有环,则快慢指针一定会相遇. /** * Definition for singly-link ...

  2. LeetCode 169. Majority Element - majority vote algorithm (Java)

    1. 题目描述Description Link: https://leetcode.com/problems/majority-element/description/ Given an array ...

  3. Asp.net之数组应用

    string[] abc=new string[8]{"1","2","3","4","1",&qu ...

  4. 150命令之线上查询及帮助命令 man hellp

    150命令之线上查询及帮助命令 man 查询命令的帮助 man + 命令 NAME        ls - list directory contents 命令+命令简单说明   SYNOPSIS   ...

  5. 从电梯问题,看c和c++之间的区别(有点懂了)错觉错觉

    磕磕碰碰的也相继用c和c++构造了不少的电梯了.虽然对自我的表现不满意,但是总体来说还是有一定的收获的,对于c和c++之间的区别感觉也摸到了一点点门道了... 用c语言构造电梯的步骤: 第一步: 分析 ...

  6. 3DMAX贴图无法显示

    问题描述:我在点击"将材质指定给选定对象"按钮之后,模型只是变灰了,没有显示出我贴的图. 原因是:没有显示贴图. 我的解决方案:点击材质编辑器里面的"视口中显示敏感处理材 ...

  7. css那些事儿2 经典两列布局

    <!DOCTYPE html> <html> <head> <title></title> <link rel="style ...

  8. 3dContactPointAnnotationTool开发日志(十三)

      为了使生成的项目能够显示报错信息我又勾选了下面这几个选项:   然后生成的项目运行时可以显示错误信息了,貌似是shader是空的.   之前的代码是这么写的,调用了Shader.Find(),貌似 ...

  9. 3dContactPointAnnotationTool开发日志(四)

      没办法,为了能在寝室接着做这玩意只好又在电脑上装一个和实验室版本一样的unity了.虽然打开后UI界面还是一团糟,不过至少要的东西都在,又手动调了调UI界面.   然后把旋转视角功能加上了.鼠标右 ...

  10. 【week5】psp

    本周psp psp饼图: 随笔字数折线图: 代码行折线图: