草庐IT

页面重排和重绘问题

飞仔FeiZai 2023-03-28 原文

页面重排（reflow）是指浏览器重新计算页面的渲染布局，通常是由于元素的尺寸、位置或者视口尺寸发生了变化导致的。重排会影响页面的性能，应尽量避免。

页面重绘（repaint）是指浏览器对已渲染的页面进行更新，通常是由于元素的样式发生了变化导致的。重绘不会影响布局，但会消耗更多的 CPU 资源。

通常情况下，浏览器会在重排后自动触发重绘，但有时候也需要手动触发重绘。重排和重绘的过程是非常消耗性能的，所以，在网页开发过程中，应该尽量避免过多的重排和重绘。

 

建议一：

为了避免页面重排和重绘带来的性能问题，你可以采取以下措施：

  1. 尽量减少对 DOM 的操作，特别是对频繁操作的元素。

  2. 避免使用递归，尽量使用循环。

  3. 使用缓存，尽量避免重复计算。

  4. 使用 CSS3 的动画和过渡，避免使用 JavaScript 来控制动画。

  5. 尽量使用相对定位，避免使用绝对定位。

  6. 尽量使用轻量级的元素，如 div 和 span，避免使用重量级的元素，如 table 和 form。

当你要在 JavaScript 中操作 DOM 时，应该尽量避免使用过多的 DOM 操作，特别是对频繁操作的元素。这是因为，每次 DOM 操作都会导致浏览器进行重排和重绘，这会消耗大量的 CPU 资源，导致页面性能下降。

 

建议二：

为了避免过多的重排和重绘，有以下几点建议：

  • 尽量减少对布局的修改，尤其是在页面加载后的修改，因为这会导致浏览器的重排。
  • 使用 CSS 选择器的级别尽量低，因为浏览器在渲染时会从上到下匹配选择器，越深层的选择器匹配越慢，会导致更多的重排。
  • 使用 CSS 预处理器，可以减少代码量，从而减少重排的次数。
  • 使用计算属性或者函数计算样式，而不是直接使用字符串拼接的方式。
  • 使用动画时，尽量使用 CSS3 动画，因为 CSS3 动画可以通过硬件加速来提升性能，而 JavaScript 动画则不行。
  • 使用 requestAnimationFrame() 来控制动画的刷新率，这可以有效减少不必要的重绘。
  • 使用 transform 属性来进行位移和缩放，因为 transform 属性会触发硬件加速，而 left、top 等属性则不会。
  • 尽量避免使用 table 布局，因为 table 的布局会导致浏览器进行大量的重排。

 

通过这些方法，你就可以在 JavaScript 中有效地避免页面重排和重绘带来的性能问题了。

 

为了避免过多的 DOM 操作，你可以使用以下方法：

  1. 使用文档片段（document fragment）：文档片段是一个轻量级的容器，可以存储多个 DOM 元素。你可以先将所有要操作的元素放入文档片段中，然后再将文档片段添加到页面中。这样做可以减少对 DOM 的操作次数，从而提高性能。

  2. 使用 innerHTML：innerHTML 属性可以直接将一段 HTML 代码设置到元素中。你可以先使用字符串拼接的方式生成所有要操作的元素，然后再使用 innerHTML 将所有元素一次性添加到页面中。这样做可以减少对 DOM 的操作次数，从而提高性能。

  3. 使用缓存：在 JavaScript 中，你可以使用变量来缓存 DOM 元素。例如，你可以将常用的 DOM 元素存储在变量中，这样就可以直接使用变量而不必每次都去查找 DOM 元素。这样做可以减少对 DOM 的操作次数，从而提高性能。

  4. 使用事件委托：事件委托是指，将事件监听器添加到父元素上，而不是子元素。这样，当子元素触发事件时，父元素也会触发事件。这样做可以减少对 DOM 的操作次数，从而提高性能。
  5. 使用 CSS3 的动画和过渡：CSS3 的动画和过渡可以让你使用简单的代码实现复杂的动画效果。这些动画和过渡是由浏览器自动实现的，不会对 DOM 进行操作，因此可以大大提高性能。

通过这些方法，你就可以在 JavaScript 中有效地避免过多的 DOM 操作带来的性能问题了。

 

页面重排li的DOMHtml/Css

有关页面重排和重绘问题的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  4. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  5. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  6. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  7. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  8. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

  9. SPI接收数据异常问题总结 - 2

    SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位（1bit）。SPI数据收发是数据交换，因此接收数据时从第二个字节开始才是有效数据，也就是数据整体向右移一个字节（1byte）。请教前辈之后也没有得到解决，通过在网上查阅前人经验终于解决问题，所以写一个避坑经验总结。实际背景：MCU与一款芯片使用spi通信，MCU作为主机，芯片作为从机。这款芯片采用的是它规定的六线SPI，多了两根线：RDY和INT，这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手

  10. git使用常见问题（提交代码，合并冲突） - 2

    文章目录git常用命令（简介，详细参数往下看）Git提交代码步骤gitpullgitstatusgitaddgitcommitgitpushgit代码冲突合并问题方法一：放弃本地代码方法二：合并代码常用命令以及详细参数gitadd将文件添加到仓库：gitdiff比较文件异同gitlog查看历史记录gitreset代码回滚版本库相关操作远程仓库相关操作分支相关操作创建分支查看分支：gitbranch合并分支：gitmerge删除分支：gitbranch-ddev查看分支合并图：gitlog–graph–pretty=oneline–abbrev-commit撤消某次提交git用户名密码相关配置g

随机推荐