文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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_

1.4K10

精读《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 性能优化场景

88710
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    浏览器渲染之回流重绘

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

    2.2K40

    前端| 性能优化总结

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

    1K20

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

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

    87620

    【调试】ChromeDevTool高级调式

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

    58320

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

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

    1.5K40

    前端编程技巧 | H5在线商城项目复盘之后，总结出了若干个场景解决方案

    今天主要分享，我再这次复盘中，系统的拆解了若干H5开发的场景解决方案，涵盖布局架构、性能优化、兼容性处理等关键痛点，并提供可直接复用的代码方案和避坑指南。...这是一个常见的问题，传统渲染会导致成千上万的DOM节点，引发布局计算与重绘耗时激增；滚动时JS计算（如样式计算、数据过滤）阻塞主线程，导致卡顿；未销毁的事件监听器或DOM引用可能导致内存泄漏，尤其在SPA...（3）CSS Containment 失效问题：部分安卓浏览器不支持 contain: strict，导致列表重绘范围扩大。...t=${Date.now()}滚动卡顿滚动事件频繁触发重绘使用 -webkit-overflow-scrolling: touch启用硬件加速Safe Area 遮挡刘海屏区域计算偏差添加iOS安全区域...核心意义在于通过系统化总结，将项目经验转化为可复用的技术资产，主要价值体现在：技术迭代与质量提升技术债务追踪：暴露代码规范、性能优化、组件设计等前端特有问题的根源。

    74001

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

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

    1.5K20

    理解浏览器重绘和回流

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

    75921

    重绘和回流（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属性。

    1.2K10

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

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

    1.2K10

    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 图层重组在图像层面，我们可以局限重绘回流的范围

    1K21

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

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

    1.5K30

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

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

    1.9K20

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

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

    3.1K20

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

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

    3.2K10

    你真的了解回流和重绘吗

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

    5.4K50

    你真的了解回流和重绘吗

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

    1.7K21
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券