开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

优化JS/jQuery性能(getBoundingClientRect)并消除布局重绘

优化JS/jQuery性能(getBoundingClientRect)并消除布局重绘是一个关注前端性能优化的问题。getBoundingClientRect是一个用于获取元素在视口中的位置和尺寸信息的方法，但是频繁调用该方法可能会导致性能问题。为了消除布局重绘，我们可以采取以下措施：

避免频繁调用getBoundingClientRect方法。可以使用节流（throttle）或防抖（debounce）技术来减少调用次数。
使用requestAnimationFrame方法来调用getBoundingClientRect。requestAnimationFrame可以确保在浏览器重绘前执行指定的函数，从而减少不必要的重绘。
使用transform和opacity等属性进行动画效果的实现，而不是直接修改元素的位置和尺寸。这样可以让浏览器使用GPU加速，从而提高性能。
使用CSS动画和CSS过渡（transition）来实现动画效果，而不是使用JS。这样可以让浏览器自动优化性能。
使用虚拟DOM（Virtual DOM）技术。虚拟DOM是一种将真实DOM抽象为JavaScript对象的技术，可以在内存中进行DOM操作，最后一次性更新真实DOM，从而减少布局重绘的次数。React等前端框架支持虚拟DOM技术。
使用Web Worker技术。Web Worker可以在后台线程中执行JS代码，从而避免阻塞主线程。这对于一些耗时的计算操作非常有用。

推荐的腾讯云相关产品：

腾讯云对象存储（COS）：提供高性能、低成本的云存储服务，可以用于存储网站静态资源等。
腾讯云CDN：提供内容分发网络服务，可以加速网站访问速度，提高用户体验。
腾讯云云服务器：提供高性能、稳定的虚拟化云服务器，可以满足各种应用场景的需求。
腾讯云数据库：提供MySQL、MongoDB等多种数据库服务，可以满足不同类型应用的数据存储需求。
腾讯云API网关：提供API管理和安全服务，可以帮助企业构建安全、高效的API服务。

腾讯云相关产品介绍链接地址：

腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云CDN：https://cloud.tencent.com/product/cdn
腾讯云云服务器：https://cloud.tencent.com/product/cvm
腾讯云数据库：https://cloud.tencent.com/product/cdb
腾讯云API网关：https://cloud.tencent.com/product/apigateway

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

chrome对页面重绘和回流以及优化进行优化

而如何去观察页面的绘制时间，找到性能瓶颈，可以借助Chrome的开发者工具。回流与重绘1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。...注意：回流必将引起重绘，而重绘不一定会引起回流。回流何时发生：当页面布局和几何属性改变时就需要回流。...优化重绘回流CSS避免使用table布局。尽可能在DOM树的最末端改变class。避免设置多层内联样式。将动画效果应用到position属性为absolute或fixed的元素上。...参看文章：回流与重绘：CSS性能让JavaScript变慢？...转载本站文章《chrome对页面重绘和回流以及优化进行优化》,请注明出处：https://www.zhoulujun.cn/html/webfront/browser/webkit/2016_0506_

9051 0

精读《web reflow》

借用这张经典图：网页渲染会经历 DOM -> CSSOM -> Layout(重排 or reflow) -> Paint(重绘) -> Composite(合成)，其中 Composite 在精读...那么排除 JS、DOM、CSSOM、Composite 可能导致的性能问题外，剩下的就是我们这次关注的重点，reflow 了。从顺序上可以看出来，重排后一定重绘，而重绘不一定触发重排。...这是因为某些代码可能导致浏览器优化失效，即明明能合并 reflow 时没有合并，这一般出现在我们用 js API 访问某个元素尺寸时，为了保证拿到的是精确值，不得不提前触发一次 reflow，即便写在...getComputedStyle getComputedStyle 通常会导致重排和重绘，是否触发重排取决于是否访问了位置相关的 key 等因素。...=> { elements[id].setLeft(top) }) }) }) fastdom 是一个可以在不分离代码的情况下，分离读写执行的库，尤其适合用在 reflow 性能优化场景

7171 0

浏览器渲染之回流重绘

前言回流和重绘是前端开发的高频词汇之一，你可以在各种面经，性能优化相关文章可以看到，但是很多都是草草带过。本文带你从浏览器渲染流程中了解回流与重绘的原理。...在重绘阶段，系统会遍历渲染树，并调用渲染对象的 paint 方法，将渲染对象的内容显示在屏幕上。和布局一样，绘制也分为全局（绘制整个呈现树）和增量两种。...减少回流与重绘前端性能优化重要手段之一。减少强制同步布局避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。...() 方法现代浏览器会对频繁的回流或重绘操作进行优化，浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，...总结本文从浏览器渲染流程的角度讲述了回流和重绘的原理，通过 performance 调试工具更直观的感受到像素管道的五大关键路径，文末有提到常见的优化回流和重绘的例子，希望对你有帮助，有不正确不严谨的地方

1.7K4 0

前端| 性能优化总结

09 浏览器重绘（Repaint）和回流（Reflow）：回流必将引起重绘，重绘不一定会引起回流。...()/scrollTo() 性能影响：回流比重绘的代价要更高。...现代浏览器会对频繁的回流或重绘操作进行优化：浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次...避免方法如下： CSS 避免使用 table 布局。尽可能在 DOM 树的最末端改变 class。避免设置多层内联样式。...因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

7512 0

浏览器的回流与重绘 (Reflow & Repaint)

作者：腰花原文链接：https://juejin.im/post/5a9923e9518825558251c96a 写在前面在讨论回流与重绘之前，我们要知道：浏览器使用流布局模型 (Flow Based...性能影响回流比重绘的代价要更高。有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。...现代浏览器会对频繁的回流或重绘操作进行优化：浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次...JavaScript 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。...因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

6892 0

【调试】ChromeDevTool高级调式

这是要上天了~ Audits就是性能分析插件，类似雅虎军规。能够根据性能优化规则对你的网站提出优化意见。...在Timeline帧渲染的过程中，会产生以下几种颜色：（1）蓝色：网络通信和HTML解析（2）黄色：javascript执行（3）紫色：样式计算和布局，即重排（4）绿色：重绘（5）两个函数...以下三种情况，会导致网页重新渲染：（1）修改DOM （2）修改样式表（3）用户事件注释：重新渲染，就需要重新生成布局（俗称“重排”reflow）和重新绘制（俗称“重绘”repaint）...需要注意的是： “重绘”不一定需要“重排”，比如改变某个网页元素的颜色，就只会触发“重绘”。因为布局没有改变，所以没有触发“重排”。...但是，“重排”必然导致“重绘”，比如改变一个网页元素的位置，就会同时触发“重绘”和“重排”，因为布局改变了。 ####如何开发不会导致重排？

2402 0

从 8 道面试题看浏览器渲染过程与性能优化

如何优化 ? defer 和 async 的区别 ? 谈谈浏览器的回流与重绘 ? 什么是渲染层合并 (Composite) ?...最小化关键资源数: 消除它们（内联）、推迟它们的下载（defer）或者使它们异步解析（async）等等。优化关键字节数（缩小、压缩）来减少下载时间。...谈谈浏览器的回流与重绘回流必将引起重绘,重绘不一定会引起回流。...现代浏览器会对频繁的回流或重绘操作进行优化：浏览器会维护一个队列,把所有引起回流和重绘的操作放入队列中,如果队列中的任务数量或者时间间隔达到一个阈值的,浏览器就会将队列清空,进行一次批处理,这样可以把多次回流和重绘变成一次...一般一个元素开启硬件加速后会变成合成层,可以独立于普通文档流中,改动后可以避免整个页面重绘,提升性能。注意不能滥用 GPU 加速,一定要分析其实际性能表现。

1.2K4 0

浏览器的渲染流程--重排、重绘、合成

，根据渲染树计算每个节点的几何信息生成布局树（Layout Tree）对布局树进行分层，并生成分层树（Layer Tree）为每个图层生成绘制列表渲染绘制(Paint)。...二、重排定义：当通过JS或css改变了元素的宽度、高度等，修改了元素的几何位置属性，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排。...相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。...这样的效率是最高的，因为是在非主线程上合成，并没有占用主线程的资源，另外也避开了布局和绘制两个子阶段，所以相对于重绘和重排，合成能大大提升绘制效率。...(200)' 七、总结重排一定会引起重绘，而重绘不一定会引起重排，重绘的开销较小，重排的代价较高。

1.1K2 0

理解浏览器重绘和回流

今天带大家理解浏览器的重绘和回流。浏览器渲染过程我们先简单了解一些浏览器是怎么渲染页面的。...渲染树生成后，先是会计算 “布局”，然后分层，最后进行栅格化（渲染）。重绘（repaint）重绘，就是重新绘制。发生了不改变元素物理信息的情况下只会进行重绘。...重绘不会改变页面的布局，只是对局部区域重新渲染，一般来说不会导致严重的性能问题。重排（reflow）重排，就是重新排布。...下面是维基百科的页面重排的可视化展示：如何避免重绘重排减少 DOM 操作。...但如果在这过程中访问了布局相关信息（比如 scrollHeight、getBoundingClientRect）时，就会强制进行重渲染去获取最新布局数据；将经常变化的元素放到新的层。

5312 1

重绘和回流（Repaint & Reflow），如何优化

通常要花费3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一 2.重绘由于节点的几何属性发生改变或者由于样式改变而不影响布局的，称为重绘，例如outline,visibility,color...回流一定会发生重绘，重绘不一定会引发回流 4.浏览器优化现代浏览器大多都通过队列机制来批量更新布局，浏览器会把修改操作放在队列中，至少一个浏览器刷新（16.6ms）才清空队列，但当你获取布局信息时，队列中可能存在影响这写属性和方法返回值的操作...5.减少重绘与回流 1.css ....减少重绘与回流　　1.CSS 使用 transform 替代 top 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局) 避免使用...2.JavaScript 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。

7821 0

什么是回流与重绘 (Reflow & Repaint)

Contents 1 写在前面 2 回流（Reflow） 3 重绘（Repaint） 4 影响 5 避免重绘与回流 6 总结写在前面在讨论今天的主角之前，我们要先了解一下浏览器的渲染机制。...现代浏览器会对频繁的回流或重绘操作进行优化，浏览器会维护一个队列，当我们页面发生回流或重绘时，有时候并不是立即执行，而是先放入维护的队列中，到达一定时间后统一去进行绘制当你访问以下属性或方法时，浏览器会立刻清空队列...() 所以当我们需要使用如上api获取数据时，我们要注重渲染时机以及取值时机避免重绘与回流避免使用 table 布局。...避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。...因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

8781 0

Web前端性能优化（二）

，所以这两个线程是互斥的，当一个线程在解析或渲染时，另一个线程则被冻结，所以我们就能够知道 CSS 的性能会让 JS 变慢，而频繁的触发重绘与回流，会导致 UI 频繁渲染，最终导致 JS 变慢当 Render...，而不会影响布局的，就称为重绘 Repaint，在回流的时候，浏览器会使 Render Tree 中受到影响的部分失效，并重新构造这部分 Render Tree，完成回流后，浏览器会重新绘制受影响的部分到屏幕中...，所以回流必将引起重绘，而重绘不一定会引起回流盒子模型相关属性会触发重布局width, height, padding, margin, display, border-width, border, min-height...定位属性及浮动也会触发重布局top, bottom, left, right, position, float, clear 改变节点内部文字结构也会触发重布局text-align, overflow-y...Paint Setup 和 Paint 重绘；⑤ 图层作为纹理上传至 GPU；⑥ 符合多个图层到页面上生成最终屏幕图像 Composite Layers 图层重组在图像层面，我们可以局限重绘回流的范围

8192 1

前端开发，关键技术点杂烩

脚本放底部，不让 JS 脚本阻碍 DOM 的加载；代码优化：缩短原型链，减少属性和方法的查找时间；使用事件代理代替事件绑定；减少对 DOM 的直接操作，减少页面重绘，使用 H5 新方法 requestAnimationFrame...渲染性能：用 createDocumentFragment 对象在内存里操作 DOM、使用 class 替换来代替直接更改样式、开启GPU硬件加速； Repaint(重绘)：当在页面上修改了一些不需要改变定位的样式的时候...（比如background-color,border-color,visibility)，浏览器只会将新的样式重新绘制给元素（这就叫一次“重绘”或者“重新定义样式”）。...弹性布局（与流体布局相似，大小单位使用 em）、固定布局、混合布局、绝对定位布局、流体布局（宽高以百分比计算，配合媒体查询完成） ... 12、你常用的 JS 框架有哪些？...看了源码中一些“类型检测”函数的实现，jQuery 中的这些方法完成度非常高，实现很全面，性能也是很高的。

1.1K3 0

前端关键技术点杂烩，这些你必须知道

脚本放底部，不让 JS 脚本阻碍 DOM 的加载；代码优化：缩短原型链，减少属性和方法的查找时间；使用事件代理代替事件绑定；减少对 DOM 的直接操作，减少页面重绘，使用 H5 新方法 requestAnimationFrame...渲染性能：用 createDocumentFragment 对象在内存里操作 DOM、使用 class 替换来代替直接更改样式、开启GPU硬件加速； Repaint(重绘)：当在页面上修改了一些不需要改变定位的样式的时候...（比如background-color,border-color,visibility)，浏览器只会将新的样式重新绘制给元素（这就叫一次“重绘”或者“重新定义样式”）。...弹性布局（与流体布局相似，大小单位使用 em）、固定布局、混合布局、绝对定位布局、流体布局（宽高以百分比计算，配合媒体查询完成） ... 12、你常用的 JS 框架有哪些？...看了源码中一些“类型检测”函数的实现，jQuery 中的这些方法完成度非常高，实现很全面，性能也是很高的。

1.6K2 0

技巧：文本超过N行折叠内容并显示“...查看全部”

不过这里最大的问题在于浏览器的回流和重绘。因为我们每次截取字符串都需要浏览器重新渲染出来才能得到是否超过N行，这过程中就触发了浏览器的重绘或回流，每次循环都会触发一次。...而对于正常的需求来说，假设N取值是3，那很可能每次计算会导致50次以上的重绘或回流，这中间消耗的性能还是非常大的，不小心可能就是几十毫秒甚至上百毫秒。...另一方面，对于页面布局而言，可能会因为其它页面元素的增删或者样式改变，导致页面布局变动，影响到文本容器的宽度，此时也应该重新计算一次截取长度。...减少浏览器回流的影响上述实现方案中，每一次截取都需要浏览器重新渲染DOM，即重绘。...重绘的影响还比较小，而如果截取的字符串行数发生改变，还会引发文本容器的高度变化，这时候就会导致浏览器回流，而文本容器在文档流中，回流将会影响整个文档。

2.8K1 0

技巧：文本超过N行折叠内容并显示“...查看全部”

不过这里最大的问题在于浏览器的回流和重绘。因为我们每次截取字符串都需要浏览器重新渲染出来才能得到是否超过N行，这过程中就触发了浏览器的重绘或回流，每次循环都会触发一次。...而对于正常的需求来说，假设N取值是3，那很可能每次计算会导致50次以上的重绘或回流，这中间消耗的性能还是非常大的，不小心可能就是几十毫秒甚至上百毫秒。...另一方面，对于页面布局而言，可能会因为其它页面元素的增删或者样式改变，导致页面布局变动，影响到文本容器的宽度，此时也应该重新计算一次截取长度。...减少浏览器回流的影响上述实现方案中，每一次截取都需要浏览器重新渲染DOM，即重绘。...重绘的影响还比较小，而如果截取的字符串行数发生改变，还会引发文本容器的高度变化，这时候就会导致浏览器回流，而文本容器在文档流中，回流将会影响整个文档。

2.5K2 0

css布局优化：布局计算限制— containwill-change合成层

在《浏览器层面优化前端性能(2):Reader引擎线程与模块分析优化点》提过：避免大规模、复杂的布局布局，就是浏览器计算DOM元素的几何信息的过程：元素大小和在页面中的位置。...简化绘制的复杂度比如js 获取元素的offsetTop ffsetTop 比如getBoundingClientRect 消耗更少。...在css里面，重绘 backgroun 比如 box-shadow 消耗更好。...但是，我们可是使用css contain 属性来限制回流与重绘contain CSS 新出了 contain 属性，拥有 contain 属性（不为 none）的元素与页面其他元素相对独立，并且该元素及其后代元素样式...、DOM 发生变化时不会导致整个页面回流和重绘。

1.4K3 0

你真的了解回流和重绘吗

浏览器的渲染过程本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，优化性能，可以跳到后面。...既然知道了浏览器的渲染过程后，我们就来探讨下，何时会发生回流重绘。何时发生回流重绘我们前面知道了，回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。...浏览器的优化机制现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。...当然，大部分现代浏览器都对其做了优化，因此，只会触发一次重排。但是如果在旧版的浏览器或者在上面代码执行的时候，有其他代码访问了布局信息(上文中的会触发回流的布局信息)，那么就会导致三次重排。...总结本文主要讲了浏览器的渲染过程、浏览器的优化机制以及如何减少甚至避免回流和重绘，希望可以帮助大家更好的理解回流重绘。参考文献渲染树构建、布局及绘制高性能Javascript

5K5 0

你真的了解回流和重绘吗

既然知道了浏览器的渲染过程后，我们就来探讨下，何时会发生回流重绘。何时发生回流重绘我们前面知道了，回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。...浏览器的优化机制现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。...当然，大部分现代浏览器都对其做了优化，因此，只会触发一次重排。但是如果在旧版的浏览器或者在上面代码执行的时候，有其他代码访问了布局信息(上文中的会触发回流的布局信息)，那么就会导致三次重排。...重点使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能...总结本文主要讲了浏览器的渲染过程、浏览器的优化机制以及如何减少甚至避免回流和重绘，希望可以帮助大家更好的理解回流重绘。参考文献渲染树构建、布局及绘制高性能Javascript

1.3K2 1

高质量jQuery代码的十二条经验

js/jquery11/1.8/jquery.min.js"> window.jQuery document.write('jquery1.8.min.js"> /script>') 2、优化jQuery...许多复杂的操作 $container.append($element); 7.2、最小化DOM更新重布局和重绘是WEB页面中最常见的也是最昂贵的两种操作。...当改变样式，而不改变页面几何布局时，将会发生重绘。隐藏一个元素或者改变一个元素的背景色时都将导致一次重绘。当对页面结构进行更新时，将导致页面重布局。...摒弃弃用方法关注每个新版本的废弃方法是非常重要的并尽量避免使用这些方法。

1.2K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭